QML version of QRubberBand

elderorb

Is it possible to implement QML version of QRubberBand ? I mean fully
QML, without any widgets dependency?

I understand it is trivial to make draggable area inside QML window.
But what about draggable area over the whole screen? Should I create
separate invisible QML window with the geometry of the screen and just
put draggable rectangle inside or better approach exists?

elderorb

I've made some experiments and got basic rubber band working using
additional QML Window. But the issue I confronted is that
transparency/opacity on Windows 7 (and Windows 10) seems to be broken.
As soon as I start re-sizing area, opacity and transparency seems to
be reset and instead of nice semi-transparent rectangle I see ugly
opaque items... I can only hope I'm doing something wrong otherwise
seems like major issue in Qt :( Just in case, here is the code of
'main.qml':

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4


Window {
    id: root
    visible: true
    Button {
        text: "show rubber"
        onClicked: {
            root.visible = false
            var rubberBand = rubberBandFactory.createObject(null);
            rubberBand.visible = true
            rubberBand.onAreaSelected.connect(function(x, y, w, h) {
                console.log(x, y, w, h)
                root.visible = true
            })
        }
    }


    property var rubberBandFactory: Component {

        Window {
            id: rubber
            visible: true
            flags: Qt.FramelessWindowHint | Qt.Popup
            modality: Qt.NonModal
            width: Screen.width
            height: Screen.height
            color: "red"
            opacity: 0.2

            signal areaSelected(int x, int y, int width, int height);
            property bool initialPosSelected: false;

            MouseArea {
                id: mouseArea
                anchors.fill: parent
                hoverEnabled: false

                onPressed: {
                    marker.x = mouseArea.mouseX
                    marker.y = mouseArea.mouseY
                    hoverEnabled = true;
                }


                onPositionChanged: {
                    marker.width = mouseArea.mouseX - marker.x
                    marker.height = mouseArea.mouseY - marker.y
                }


                onReleased: {
                    hoverEnabled = false
                    rubber.visible = false
                    areaSelected(marker.x, marker.y, marker.width,
marker.height)
                }
            }


            Rectangle {
                id: marker
                width: 0
                height: 0
                color: 'green'
            }
        }
    }
}
...