Draw rectangle using mouse QML

Question

I'm creating a wave form using QML 2.0. I would like to know how I can draw rectangle starting when the user clicks on the waveform and ends when user releases mouse button.

I need something like the yellow rectangle.

I tried with Canvas but isn't working properly. Can you help me?

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

What I would do is instanciate a QtQuick Rectangle dynamically and set its visual properties in the same time :

Just put this a a children of your 'wave graph' component :

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;
            }
        }
    }
}

That should do the trick !