如何使项目在 QML 中的圆圈内拖动?

问题描述

下面的代码允许在一个由最小和最大拖动值定义的矩形区域中拖动红色的小矩形.

Below code allows the small red coloured rectangle to be dragged in an area which is a rectangle defined by minimum and maximum drag values.

我希望它只持续到半径为 100 的父矩形的边界，这意味着它现在是一个圆.

I want it to go on only up till the boundary of the parent rectangle whose radius is 100 which means that it is now a circle.

如何在 QML 中让一个项目在一个圆圈内拖动?

How to make an item drag inside a circle in QML?

Window {
    width: 200; height: 200; visible: true

    Rectangle
    {
        x: 10; y: 10
        width: 200; height: 200
        radius: 100
        color: "blue"

        Rectangle {
            x: 10; y: 10
            width: 20; height: 20
            color: "red"

            MouseArea
            {
                id: dragArea
                anchors.fill: parent

                drag.target: parent
                drag.minimumX : 20
                drag.maximumX : 150

                drag.minimumY : 20
                drag.maximumY : 150
            }
        }
    }
}

推荐答案

于是我找时间提供了上述更流畅的解决方案.

So I found some time to provide the aforementioned smoother solution.

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    property int radius: 100

    Rectangle {
        id: circle
        width: 2 * radius
        height: 2 * radius
        radius: root.radius

        color: 'blue'
    }

    Rectangle {
        id: mark
        width: 20
        height: 20
        x: (dragObj.dragRadius <= root.radius ? dragObj.x : root.radius + ((dragObj.x - root.radius) * (root.radius / dragObj.dragRadius))) - 10
        y: (dragObj.dragRadius <= root.radius ? dragObj.y : root.radius + ((dragObj.y - root.radius) * (root.radius / dragObj.dragRadius))) - 10
        color: 'red'

        MouseArea {
            id: markArea
            anchors.fill: parent
            drag.target: dragObj
            onPressed: {
                dragObj.x = mark.x + 10
                dragObj.y = mark.y + 10
            }
        }
    }

    Item {
        id: dragObj
        readonly property real dragRadius: Math.sqrt(Math.pow(x - root.radius, 2) + Math.pow(y - root.radius, 2))
        x: root.radius
        y: root.radius

        onDragRadiusChanged: console.log(dragRadius)
    }
}

我使用 dragObj 来避免我拖动位置的限制.这跨越了从圆心开始的向量.只要 dragObj 本身包含在圆圈中，我将使用它的位置作为标记的位置.
但是一旦它离开圆圈，我会将向量投影到圆圈上，所以它会保持在限制范围内.

I use the dragObj to avoid the limitations of my dragging position. This spans a vector from the center of the circle. As long as the dragObj itself is contained in the circle, I will use it's position as the position of the marker.
But once it leaves the circle, I will project the vector on the circle, so it will stay within the limits.

为了确保每次拖动都在标记上重新开始，我将在再次按下鼠标时将 dragObj 的位置重置为标记的位置(新拖动的前提条件-事件)

To ensure, that every drag starts again on the mark, I will reset the position of the dragObj to the position of the mark, when ever the mouse is pressed again (precondition for a new drag-event)

玩得开心.

这篇关于如何使项目在 QML 中的圆圈内拖动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！