Прямоугольник QML с отрицательной шириной для выделения мышью

Question

Я пытаюсь сделать прямоугольник выделения мышью.

Но Rectangle {} объект не может иметь отрицательные значения ширины и высоты.

Поэтому он выбирает только left-to-right & top-to-bottom:

Rectangle {
    id: selectorRectangle
    x: 0
    y: 0
    width: 0
    height: 0
    color: "#8000abcd"
    border.color: "#00fbfb"
}


MouseArea {
    anchors.fill: parent
    propagateComposedEvents: true

    onPressed: {
        selectorRectangle.x = mouse.x
        selectorRectangle.y = mouse.y
    }

    onPositionChanged: {
        selectorRectangle.width = mouse.x - selectorRectangle.x
        selectorRectangle.height = mouse.y - selectorRectangle.y
    }
}

---

Как мне этого добиться?

Спасибо!

Answer 1

Вот моя реализация. Вам просто нужно сохранить нажатую точку в свойстве и рассчитать x, y, width, height соответственно, чтобы ширина и высота были положительными.

Rectangle {
            id: selectorRectangle
            x: 0
            y: 0
            width: 0
            height: 0
            color: "#8000abcd"
            border.color: "#00fbfb"
        }

        MouseArea {
            anchors.fill: parent
            propagateComposedEvents: true
            property var lastPressPoint: Qt.point(0,0)

            onPressed: {
                lastPressPoint.x = mouse.x;
                lastPressPoint.y = mouse.y;
            }

            onPositionChanged: {
                selectorRectangle.x = Math.min(lastPressPoint.x , mouse.x)
                selectorRectangle.y = Math.min(lastPressPoint.y , mouse.y)
                selectorRectangle.width = Math.abs(lastPressPoint.x - mouse.x);
                selectorRectangle.height =  Math.abs(lastPressPoint.y - mouse.y);
            }
            onReleased: {
                 selectorRectangle.x = 0;
                selectorRectangle.y = 0;
                selectorRectangle.width = 0;
                selectorRectangle.height = 0;
            }
        }