2

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

enter image description here

10
  • Why doesn't it work properly? What does it do wrong?
    – Mitch
    Sep 12, 2014 at 14:18
  • Your code doesn't run because of errors. Please post something that does.
    – Mitch
    Sep 12, 2014 at 14:37
  • @Mitch Is that you downvoting the newcoming QML questioners? ;)
    – mlvljr
    Sep 14, 2014 at 22:28
  • @mlvljr, it sure is. I can only ask something so many times before I just start downvoting. That's what the feature is for, after all. At least I leave a reason though; most people on here just downvote and say nothing. :)
    – Mitch
    Sep 15, 2014 at 14:45
  • @Mitch You are one cruel pal, Mitch!
    – mlvljr
    Sep 15, 2014 at 14:53

2 Answers 2

3

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 !

2
  • useful answer!! just tweaking to work in case you select from right to left instead of left to right!!
    – Jimmy
    Aug 13, 2015 at 13:41
  • @Jimmy: would you mind to fix it in the posted code too? That would be helpful to others :)
    – Isaac
    Aug 15, 2016 at 0:41
0

I fixed the rectangle to be drawn even when the mouse drag position is not from left to right down. Hope it helps others.

Rectangle {

color: "transparent"

MouseArea {
    id: selectArea
    anchors.fill: parent

    property Rectangle highlightItem : null;
    property real startX
    property real startY

    onPressed: (mouse) => {
        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" : mouseX,
            "y" : mouseY,
        });
        startX = mouseX;
        startY = mouseY;
    }
    onPositionChanged: (mouse) => {
       // on move, update the width of rectangle

       if (mouseX - startX < 0 ) {
           highlightItem.x = mouseX;
       }

       if (mouseY - startY < 0) {
           highlightItem.y = mouseY;
       }

       highlightItem.width = (Math.abs (mouseX - startX));
       highlightItem.height = (Math.abs (mouseY - startY));

    }
    onReleased: {

    }

    Component {
        id: highlightComponent;

        Rectangle {
            color: "#0D0080FF"
            border.width: 1
            border.color: "#fff"
        
        }
    }
}
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.