Qml Canvas Pathエラー

Question

私はCanvasに動的に生成されたPathをレンダリングするウィジェットを作成しようとしていますが、PathAnimatorを使用してそのパスに続くドットもあります。問題は、ドットが予想どおりに円内を移動するにもかかわらず、レンダリングされたパスが（0,0）にジャンプする不思議な不連続性を示すことです。

Screenshot of the path glitch, and the most relevant code snippets

私が何かを逃した、またはここにバグがあることがありますか？

その他の注意事項/明確化：
*私は（PyQt5経由）のQt 5.5.1を使用してい
*ここでの最終目標は、ちょうど円形の経路を作成することではありません。

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