使用鼠标 QML 绘制矩形

Question

我正在使用 QML 2.0 创建一个波形。 我想知道如何在用户单击波形时开始绘制矩形并在用户释放鼠标按钮时结束。

我需要黄色矩形之类的东西。

我尝试使用 Canvas，但无法正常工作。 你能帮帮我吗？

Canvas {
    property int prevX
    property int prevY
    property int hh:wave.height
    property int lineWidth: 2
    property color drawColor: "red"
    id:mycanvas

    height: 200
    width: 2000
    MouseArea {
        id:mousearea
        anchors.fill: parent
        cursorShape:Qt.PointingHandCursor
        onPositionChanged: mycanvas.requestPaint();

        onPressed: {
            prevX = mouse.x;
            prevY = mouse.y
            var mousePosition = mouse.x / mousearea.width;
            wave.zoomOut(mousePosition);
            console.log("QML: ZoomStart mousePosition " + mousePosition)

        }

        onReleased: {
            var mousePosition = mouse.x / mousearea.width;
            console.log("QML: ZoomFinish mousePosition " + mousePosition)
            wave.zoomOut2(mousePosition);
        }
    }

    onPaint: {
        var ctx = getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = "#000000"
        ctx.globalAlpha = 0.05

        ctx.fillRect(prevX, 0, mousearea.mouseX-prevX,mainRectangle.height/4.5);

        ctx.stroke();
        ctx.restore();
    }
}

Answer 1

我要做的是动态地实例化一个 QtQuick Rectangle 并同时设置它的视觉属性：

只需将此作为“波形图”组件的子组件：

MouseArea {
    id: selectArea;
    anchors.fill: parent;
    onPressed: {
        if (highlightItem !== null) {
            // if there is already a selection, delete it
            highlightItem.destroy (); 
        }
        // create a new rectangle at the wanted position
        highlightItem = highlightComponent.createObject (selectArea, {
            "x" : mouse.x 
        });
        // here you can add you zooming stuff if you want
    }
    onPositionChanged: {
        // on move, update the width of rectangle
        highlightItem.width = (Math.abs (mouse.x - highlightItem.x));  
    }
    onReleased: {
        // here you can add you zooming stuff if you want
    }

    property Rectangle highlightItem : null;

    Component {
        id: highlightComponent;

        Rectangle {
            color: "yellow";
            opacity; 0.35;
            anchors {
                top: parent.top;
                bottom: parent.bottom;
            }
        }
    }
}

这应该可以解决问题！