首页 > 解决方案 > 如何在 QML 中创建沿圆形轮廓移动的形状

问题描述

我使用 QT 5.11.3 并且有一个大问题......

我想实现一个使用鼠标拖动沿着圆的轮廓(或特定路径)移动的形状。

我在下面的链接中引用了这个例子。
如何使项目在 QML 中的圆圈内拖动?

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)
    }
}

但是 MouseArea 不仅移动到了圆的轮廓,而且还移动到了圆的内部。

如果您有使用鼠标区域或鼠标拖动沿形状轮廓移动的示例,请告知。

标签: qtqml

解决方案


推荐阅读