如何在QML中使项目在圆内拖动? [英] How to make an item drag inside a circle in 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.
我希望它继续进行
如何在QML中将项目拖动到圆内?
直到半径为100的父矩形的边界为止。 / p>
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
}
}
}
}
推荐答案
因此,我花了一些时间提供上述 smoother 解决方案。
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)
}
}
I使用 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中使项目在圆内拖动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!