Question

我正在尝试构建一个窗口小部件，在Path中呈现动态生成的Canvas，并使用PathAnimator在该路径后面有一个点。问题在于，尽管点按预期方向移动圆圈，但渲染路径显示出一个奇怪的不连续点，它会跳转到（0,0）。

路径故障的屏幕截图，以及最相关的代码片段

我错过了什么，或者这里有错误吗？

补充说明/澄清：
*我正在使用Qt 5.5.1（通过PyQt5）
*这里的最终目标不仅仅是创建一个圆形路径。但是，我试图确保基本技术首先正确工作，因此循环路径

这是完整的代码：

import QtQuick 2.3

Rectangle {
    id: base

    property real radiusMax : 200
    property real padding : 50

    property int duration: 15000
    property int numPoints : 12

    //property list<point> points


    width:  (radiusMax + padding) * 2
    height: (radiusMax + padding) * 2
    color: "white"

    /* The path that everything follows */
    Path {
        id: myPath

        // To be dynamically generated...
        //PathCurve { x: base.radiusMax; y: base.radiusMax } 
    }

    Instantiator {
        id: pathPoints
        model: base.numPoints

        property real angle  : (Math.PI / 180) * (360 / base.numPoints)
        //property real angle : 0.5235987755982988
        property real radius : base.radiusMax

        property point midpoint : Qt.point(base.radiusMax, base.radiusMax)

        onAngleChanged: console.log("angle = %1".arg(angle))

        delegate : PathCurve {
            x: pathPoints.midpoint.x + pathPoints.radius * Math.cos(pathPoints.angle * index)
            y: pathPoints.midpoint.y + pathPoints.radius * Math.sin(pathPoints.angle * index)
        }

        onObjectAdded: {
            console.log("Point %1 = (%3, %4)  <-- (%2)".arg(index).arg(index * pathPoints.angle).arg(object.x).arg(object.y))

            /* Update the list */
            if (index == base.numPoints - 1) {
                var items = []
                for (var i = 0; i < base.numPoints; i++) {
                    var obj = pathPoints.objectAt(i)
                    console.log("=> adding %1 = (%2, %3)".arg(i).arg(obj.x).arg(obj.y))
                    //if ((obj != null) || !(obj.x == 0 && obj.y == 0))
                        items.push(obj)
                }
                myPath.pathElements = items
            }
        }
    }

    /* Canvas: Used to render the path */
    Canvas {
        anchors.centerIn: parent
        width:  base.radiusMax * 2
        height: base.radiusMax * 2

        contextType: "2d"

        onPaint: {
            console.log("paint")
            context.clearRect(0, 0, width, height)
            context.strokeStyle = Qt.rgba(.4,.6,.8);
            context.path = myPath;
            context.closePath();
            context.stroke();
        }
  //}

    /* Dot that the participant is supposed to follow */
    Rectangle {
        id: targetDot

        // Start position - top-left of the canvas
        x: base.radiusMax
        y: base.radiusMax

        width: 20
        height: 20
        radius: 10

        color: "lightblue"

        PathAnimation {
            id: pathAnim

            running: true
            loops: Animation.Infinite

            duration: base.duration

            target: targetDot
            orientation: PathAnimation.RightFirst
            anchorPoint: Qt.point(targetDot.width/2, targetDot.height/2)
            path: myPath
        }
    }
}

}

Answer 1

它跳转到（0,0），因为Path的默认start point是（0,0）。要绘制圆形路径，需要在生成路径时指定起点。例如，使用第一个路径点作为起点：

Instantiator {
    id: pathPoints
    //....

    onObjectAdded: {
        if (index == base.numPoints - 1) {
            var items = []
            for (var i = 0; i < base.numPoints; i++) {
                var obj = pathPoints.objectAt(i)
                items.push(obj)
            }
            myPath.pathElements = items

            myPath.startX = items[0].x //assign start point
            myPath.startY = items[0].y //assign start point
        }
    }
}

渲染路径显示一个奇怪的不连续性，它跳转到（0,0）

1 个答案: