Qml 캔버스 경로 오류

Question

동적으로 생성 된 Path을 Canvas에 렌더링하고 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 점프) 기본값 start point은 Path이므로 (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 
     } 
    } 
}