[SOLVED]QML mouse selection rectangle

  • Hi everyone,
    just throwing this topic here in search of ideas if anyone has already stumbled on this matter.
    I need to implement a mouse selection area in QML.
    Something like this:

    I am inside a Flickable element containing a Canvas.
    My idea is to do it with some drag&drop properties, showing and resizing a semi-transparent Rectangle as long as the mouse button is pressed.

    Is there any efficient way you can think of ?
    Any help is greatly appreciated.
    If I come up with a working solution soon, I will post it here.

    Thanks !

  • Adding one bit.

    The Flickable item steals every mouse click.
    I want the selection rectangle to be activated with the SHIFT key modifier only.
    Is there a way to tell Flickable to ignore the mouse events if the SHIFT key is pressed ?

  • OK, took me a couple of hours to implement it.
    Here's the code. Might not be 100% perfect but it gives the idea:

    Rectangle {
            id: selectionRect
            visible: false
            x: 0
            y: 0
            z: 99
            width: 0
            height: 0
            rotation: 0
            color: "#5F227CEB"
            border.width: 1
            border.color: "#103A6E"
            transformOrigin: Item.TopLeft
        MouseArea {
            id: selectionMouseArea
            property int initialXPos
            property int initialYPos
            property bool justStarted
            anchors.fill: parent
            z: 2 // make sure we're above other elements
            onPressed: {
                if (mouse.button == Qt.LeftButton && mouse.modifiers & Qt.ShiftModifier)
                    console.log("Mouse area shift-clicked !")
                    // initialize local variables to determine the selection orientation
                    initialXPos = mouse.x
                    initialYPos = mouse.y
                    justStarted = true
                    flickableView.interactive = false // in case the event started over a Flickable element
                    selectionRect.x = mouse.x
                    selectionRect.y = mouse.y
                    selectionRect.width = 0
                    selectionRect.height = 0
                    selectionRect.visible = true
            onPositionChanged: {
                if (selectionRect.visible == true)
                    if (justStarted == true && (mouse.x != initialXPos || mouse.y != initialYPos))
                        if (mouse.x >= initialXPos)
                            if (mouse.y >= initialYPos)
                               selectionRect.rotation = 0
                               selectionRect.rotation = -90
                            if (mouse.y >= initialYPos)
                                selectionRect.rotation = 90
                                selectionRect.rotation = -180
                        justStarted = false
                        //console.log("Selection rotation: " + selectionRect.rotation)
                    if (selectionRect.rotation == 0 || selectionRect.rotation == -180)
                        selectionRect.width = Math.abs(mouse.x - selectionRect.x)
                        selectionRect.height = Math.abs(mouse.y - selectionRect.y)
                        selectionRect.width = Math.abs(mouse.y - selectionRect.y)
                        selectionRect.height = Math.abs(mouse.x - selectionRect.x)
            onReleased: {
                selectionRect.visible = false
                // restore the Flickable duties
                flickableView.interactive = true

  • Now how the heck do I mark this thread as "solved" ?

    The ‘thread tools’ at the bottom of a thread let the poster or moderators ‘mark a thread as solved’. This will add a ‘Solved’ tag to the post in the category view to help people find solved posts easily.

    The only option I have is "Delete topic"...nice...

  • Add [SOLVED] to the beginning of the subject line.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.