Important: Please read the Qt Code of Conduct -

QML version of QRubberBand

  • 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?

  • 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

    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,
                Rectangle {
                    id: marker
                    width: 0
                    height: 0
                    color: 'green'

Log in to reply