Skip to content

GitLab

Commit ebd573aa authored by Jean-Baptiste Mardelle's avatar Jean-Baptiste Mardelle
Browse files

Some polishing for effect and rotoscoping qml overlays

parent 54bbc6ae
Pipeline #47757 passed with stage
in 10 minutes and 46 seconds
Hide whitespace changes
Inline Side-by-side
src/monitor/view/kdenlivemonitoreffectscene.qml
View file @ ebd573aa
......@@ -35,7 +35,7 @@ Item {
onOffsetxChanged: canvas.requestPaint()
onOffsetyChanged: canvas.requestPaint()
property bool iskeyframe
property int requestedKeyFrame
property int requestedKeyFrame: 0
property var centerPoints: []
property var centerPointsTypes: []
onCenterPointsChanged: canvas.requestPaint()
......@@ -68,15 +68,20 @@ Item {
if (context && root.centerPoints.length > 0) {
context.beginPath()
context.strokeStyle = Qt.rgba(1, 0, 0, 0.5)
context.fillStyle = Qt.rgba(1, 0, 0, 0.5)
context.lineWidth = 2
context.fillStyle = Qt.rgba(1, 0, 0, 1)
context.lineWidth = 1
context.setLineDash([3,3])
var p1 = convertPoint(root.centerPoints[0])
context.moveTo(p1.x, p1.y)
context.clearRect(0,0, width, height);
context.fillRect(p1.x - handleSize, p1.y - handleSize, 2 * handleSize, 2 * handleSize);
for(var i = 0; i < root.centerPoints.length; i++)
{
context.fillRect(p1.x - handleSize, p1.y - handleSize, 2 * handleSize, 2 * handleSize);
context.translate(p1.x, p1.y)
context.rotate(Math.PI/4);
context.fillRect(- handleSize, 0, 2 * handleSize, 1);
context.fillRect(0, - handleSize, 1, 2 * handleSize);
context.rotate(-Math.PI/4);
context.translate(-p1.x, -p1.y)
if (i + 1 < root.centerPoints.length)
{
var end = convertPoint(root.centerPoints[i + 1])
......@@ -152,7 +157,6 @@ Item {
Rectangle {
id: frame
objectName: "referenceframe"
property color hoverColor: "#ff0000"
width: root.profile.x * root.scalex
height: root.profile.y * root.scaley
x: root.center.x - width / 2 - root.offsetx;
......@@ -239,11 +243,17 @@ Item {
root.requestedKeyFrame = -1
isMoving = false;
}
onEntered: {
controller.setWidgetKeyBinding(i18n("<b>Double click</b> to add a keyframe, <b>Shift drag</b> for proportional rescale, <b>Hover right</b> for toolbar, <b>Click</b> on a center to seek to its keyframe"));
}
onExited: {
controller.setWidgetKeyBinding();
}
}
Rectangle {
id: framerect
property color hoverColor: "#ffffff"
property color hoverColor: activePalette.highlight //"#ffff00"
x: frame.x + root.framesize.x * root.scalex
y: frame.y + root.framesize.y * root.scaley
width: root.framesize.width * root.scalex
......@@ -271,7 +281,7 @@ Item {
cursorShape: Qt.SizeFDiagCursor
onEntered: {
if (!pressed) {
tlhandle.color = '#ffff00'
tlhandle.color = framerect.hoverColor
}
}
onExited: {
......@@ -287,7 +297,7 @@ Item {
oldMouseX = mouseX
oldMouseY = mouseY
effectsize.visible = true
tlhandle.color = '#ffff00'
tlhandle.color = framerect.hoverColor
handleRatio = framesize.width / framesize.height
}
onPositionChanged: {
......@@ -353,7 +363,7 @@ Item {
cursorShape: Qt.SizeBDiagCursor
onEntered: {
if (!pressed) {
trhandle.color = '#ffff00'
trhandle.color = framerect.hoverColor
}
}
onExited: {
......@@ -369,7 +379,7 @@ Item {
oldMouseX = mouseX
oldMouseY = mouseY
effectsize.visible = true
trhandle.color = '#ffff00'
trhandle.color = framerect.hoverColor
handleRatio = framesize.width / framesize.height
}
onPositionChanged: {
......@@ -424,7 +434,7 @@ Item {
cursorShape: Qt.SizeBDiagCursor
onEntered: {
if (!pressed) {
blhandle.color = '#ffff00'
blhandle.color = framerect.hoverColor
}
}
onExited: {
......@@ -440,7 +450,7 @@ Item {
oldMouseX = mouseX
oldMouseY = mouseY
effectsize.visible = true
blhandle.color = '#ffff00'
blhandle.color = framerect.hoverColor
handleRatio = framesize.width / framesize.height
}
onPositionChanged: {
......@@ -495,7 +505,7 @@ Item {
cursorShape: Qt.SizeFDiagCursor
onEntered: {
if (!pressed) {
brhandle.color = '#ffff00'
brhandle.color = framerect.hoverColor
}
}
onExited: {
......@@ -511,7 +521,7 @@ Item {
oldMouseX = mouseX
oldMouseY = mouseY
effectsize.visible = true
brhandle.color = '#ffff00'
brhandle.color = framerect.hoverColor
handleRatio = framesize.width / framesize.height
}
onPositionChanged: {
......@@ -558,10 +568,15 @@ Item {
}
Rectangle {
anchors.centerIn: parent
width: 1
height: root.iskeyframe ? effectsize.height * 1.5 : effectsize.height / 2
color: framerect.hoverColor
width: root.iskeyframe ? effectsize.height : effectsize.height / 2
height: width
radius: width / 2
border.color: centerArea.containsMouse || centerArea.pressed ? framerect.hoverColor : "#ff0000"
border.width: 1
color: centerArea.containsMouse || centerArea.pressed ? framerect.hoverColor : "transparent"
opacity: centerArea.containsMouse || centerArea.pressed ? 0.5 : 1
MouseArea {
id: centerArea
width: effectsize.height * 1.5; height: effectsize.height * 1.5
anchors.centerIn: parent
property int oldMouseX
......@@ -569,8 +584,6 @@ Item {
hoverEnabled: true
enabled: root.iskeyframe || controller.autoKeyframe
cursorShape: enabled ? Qt.SizeAllCursor : Qt.ArrowCursor
onEntered: { framerect.hoverColor = '#ffff00'}
onExited: { framerect.hoverColor = '#ffffff'}
onPressed: {
if (root.iskeyframe == false && controller.autoKeyframe) {
console.log('ADDREMOVE CENTER PRESSED')
......@@ -592,12 +605,6 @@ Item {
}
}
}
Rectangle {
anchors.centerIn: parent
width: root.iskeyframe ? effectsize.height * 1.5 : effectsize.height / 2
height: 1
color: framerect.hoverColor
}
}
EffectToolBar {
id: effectToolBar
......
src/monitor/view/kdenlivemonitorrotoscene.qml
View file @ ebd573aa
......@@ -134,7 +134,7 @@ Item {
p1 = convertPoint(root.centerPoints[i])
ctx.lineTo(p1.x, p1.y);
if (i == root.requestedKeyFrame) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.8)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(p1.x - handleSize, p1.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 0, 0, 0.5)
} else {
......@@ -143,6 +143,7 @@ Item {
}
} else {
var c1; var c2
var alphaColor = Qt.hsla(activePalette.highlight.hslHue, activePalette.highlight.hslSaturation, activePalette.highlight.hslLightness, 0.5)
for (var i = 0; i < root.centerPoints.length; i++) {
p1 = convertPoint(root.centerPoints[i])
// Control points
......@@ -172,21 +173,21 @@ Item {
if ((iskeyframe || autoKeyframe) && !root.displayResize) {
// Draw control points and segments
if (subkf) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.8)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(c1.x - handleSize/2, c1.y - handleSize/2, handleSize, handleSize);
ctx.fillStyle = Qt.rgba(1, 0, 0, 0.5)
} else {
ctx.fillRect(c1.x - handleSize/2, c1.y - handleSize/2, handleSize, handleSize);
}
if (root.requestedSubKeyFrame == 2 * i) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.8)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(c2.x - handleSize/2, c2.y - handleSize/2, handleSize, handleSize);
ctx.fillStyle = Qt.rgba(1, 0, 0, 0.5)
} else {
ctx.fillRect(c2.x - handleSize/2, c2.y - handleSize/2, handleSize, handleSize);
}
if (i == root.requestedKeyFrame) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.8)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(p1.x - handleSize, p1.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 0, 0, 0.5)
} else {
......@@ -208,19 +209,19 @@ Item {
// Calculate and draw center
centerCross.x = bottomLeft.x + (topRight.x - bottomLeft.x)/2
centerCross.y = topRight.y + (bottomLeft.y - topRight.y)/2
ctx.moveTo(centerCross.x - root.baseUnit, centerCross.y)
ctx.lineTo(centerCross.x + root.baseUnit, centerCross.y)
ctx.moveTo(centerCross.x, centerCross.y - root.baseUnit)
ctx.lineTo(centerCross.x, centerCross.y + root.baseUnit)
ctx.moveTo(centerCross.x - root.baseUnit/2, centerCross.y - root.baseUnit/2)
ctx.lineTo(centerCross.x + root.baseUnit/2, centerCross.y + root.baseUnit/2)
ctx.moveTo(centerCross.x + root.baseUnit/2, centerCross.y - root.baseUnit/2)
ctx.lineTo(centerCross.x - root.baseUnit/2, centerCross.y + root.baseUnit/2)
}
ctx.stroke()
if (root.addedPointIndex > -1 && !root.displayResize) {
// Ghost point where a new one could be inserted
ctx.beginPath()
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.strokeStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = activePalette.highlight
ctx.strokeStyle = activePalette.highlight
ctx.lineWidth = 1
ctx.fillRect(addPointPossible.x - handleSize, addPointPossible.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.roundedRect(addPointPossible.x - handleSize, addPointPossible.y - handleSize, 2 * handleSize, 2 * handleSize, handleSize, handleSize);
if (root.addedPointIndex === 0) {
p1 = convertPoint(root.centerPoints[root.centerPoints.length - 1])
} else {
......@@ -235,63 +236,63 @@ Item {
if (root.displayResize) {
// Draw resize rectangle / handles
ctx.beginPath()
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.strokeStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
ctx.strokeStyle = activePalette.highlight
ctx.lineWidth = 1
ctx.rect(bottomLeft.x, topRight.y, topRight.x - bottomLeft.x, bottomLeft.y - topRight.y)
if (root.resizeContainsMouse == 4) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(bottomLeft.x - handleSize, bottomLeft.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(bottomLeft.x - handleSize, bottomLeft.y - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 3) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(topRight.x - handleSize, bottomLeft.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(topRight.x - handleSize, bottomLeft.y - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 2) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(topRight.x - handleSize, topRight.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(topRight.x - handleSize, topRight.y - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 1) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(bottomLeft.x - handleSize, topRight.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(bottomLeft.x - handleSize, topRight.y - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 5) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(bottomLeft.x + (topRight.x - bottomLeft.x) / 2 - handleSize, topRight.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(bottomLeft.x + (topRight.x - bottomLeft.x) / 2 - handleSize, topRight.y - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 7) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(bottomLeft.x + (topRight.x - bottomLeft.x) / 2 - handleSize, bottomLeft.y - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(bottomLeft.x + (topRight.x - bottomLeft.x) / 2 - handleSize, bottomLeft.y - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 6) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(topRight.x - handleSize, topRight.y + (bottomLeft.y - topRight.y) / 2 - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(topRight.x - handleSize, topRight.y + (bottomLeft.y - topRight.y) / 2 - handleSize, 2 * handleSize, 2 * handleSize);
}
if (root.resizeContainsMouse == 8) {
ctx.fillStyle = Qt.rgba(1, 1, 0, 1)
ctx.fillStyle = activePalette.highlight
ctx.fillRect(bottomLeft.x - handleSize, topRight.y + (bottomLeft.y - topRight.y) / 2 - handleSize, 2 * handleSize, 2 * handleSize);
ctx.fillStyle = Qt.rgba(1, 1, 0, 0.5)
ctx.fillStyle = alphaColor
} else {
ctx.fillRect(bottomLeft.x - handleSize, topRight.y + (bottomLeft.y - topRight.y) / 2 - handleSize, 2 * handleSize, 2 * handleSize);
}
......@@ -310,7 +311,6 @@ Item {
Rectangle {
id: frame
objectName: "referenceframe"
property color hoverColor: "#ff0000"
width: root.profile.x * root.scalex
height: root.profile.y * root.scaley
x: root.center.x - width / 2 - root.offsetx;
......@@ -368,6 +368,12 @@ Item {
property bool centerContainsMouse
hoverEnabled: true
cursorShape: (!root.isDefined || pointContainsMouse || centerContainsMouse || addedPointIndex >= 0 || resizeContainsMouse > 0 ) ? Qt.PointingHandCursor : Qt.ArrowCursor
onEntered: {
controller.setWidgetKeyBinding(i18n("<b>Double click</b> on center to resize, <b>Double click</b> on line segment to add new point, <b>Double click</b> point to delete it, <b>Double click</b> background to create new keyframe, <b>Hover right</b> for toolbar"));
}
onExited: {
controller.setWidgetKeyBinding()
}
onWheel: {
controller.seek(wheel.angleDelta.x + wheel.angleDelta.y, wheel.modifiers)
}
......@@ -631,7 +637,7 @@ Item {
addedPointIndex = -1
}
// Check if we are on center point
if (Math.abs(centerCross.x - mouseX) <= canvas.handleSize/2 && Math.abs(centerCross.y - mouseY) <= canvas.handleSize/2) {
if (Math.abs(centerCross.x - mouseX) <= canvas.handleSize && Math.abs(centerCross.y - mouseY) <= canvas.handleSize) {
centerContainsMouse = true;
pointContainsMouse = false;
canvas.requestPaint()
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment