Skip to content

GitLab

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

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
    Showing with 70 additions and 57 deletions
    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()
    ......
    Markdown is supported
    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