Блог

Как мне правильно изменить x, y объекта, чтобы он менял свое положение при изменении размера родительского объекта? Существует, я представлю, что если я перетащу прямоугольник в середину, то при изменении размера окна он должен оставаться в середине. (только в середине, например, прямоугольник можно перемещать свободно)

 import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 640
    height: 480

onWidthChanged: {
            block.x -= block.previousWidth - width
            block.previousWidth = width
        }

onHeightChanged: {
            block.y -= block.previousHeight - height
            block.previousHeight = height
        }

    Rectangle {
        id: block
        color: "red"
        width: 50
        height:50
        x: 100
        y: 50

       property int previousWidth: 0
       property int previousHeight:0

       Component.onCompleted: { 
          previousWidth = parent.width
          previousHeight  = parent.height
}

        MouseArea {
            anchors.fill: parent
            drag.target: block
        }
    }
}
  

Должен признаться, сначала вопрос меня не впечатлил. Однако, когда я подумал об этом, это представляет собой очень интересный и допустимый вариант использования. Поэтому я был бы рад предоставить решение.

Решение

Я бы подошел к проблеме так:

1. Сделайте фрейм дочерним элементом фонового изображения.
2. Вместо ручного вычисления координат используйте Item.scale для масштабирования изображения, эффективно сохраняя относительное положение рамки относительно изображения.

Пример

Вот пример, который я подготовил для вас, чтобы продемонстрировать, как можно реализовать предлагаемое решение:

 import QtQuick 2.15
import QtQuick.Window 2.15

Window {
    visible: true
    width: 640
    height: 480

    Image {
        anchors.centerIn: parent
        source: "alphabet.png"
        scale: parent.width/sourceSize.width

        Rectangle {
            id: frame

            width: parent.width/7
            height: parent.height/4
            border.color: "black"
            color: "transparent"
            antialiasing: true

            MouseArea {
                anchors.fill: parent
                drag.target: parent
            }
        }
    }
}
  

Результат

В примере получается следующий результат:

Исходное окно

Измененное окно

Фрейм перемещается

Размер окна снова изменяется

Как я уже сказал в своем комментарии, лучшим решением является привязка, например:

 Window {
    id: root
    width: 600
    height: 400
    title: qsTr("Parent window")
    visible: true
    flags: Qt.WindowStaysOnTopHint

    Grid {
        anchors.fill: parent
        Repeater {
            model:  16
            Rectangle {
                width: root.width / 4
                height: root.height / 4
                color: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
            }
        }
    }
    Rectangle {
        border {
            width: 5
            color: "black"
        }
        color: "transparent"
        width: root.width / 4
        height: root.height / 4
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.leftMargin: root.width / 4
        anchors.bottomMargin: root.height / 4
    }
}