Qml画布路径错误

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

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

我错过了一些东西，或者是有错误吗？

其他注意事项/澄清：
*我使用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 
     } 
    } 
}

}

来源

2016-11-19 Joshua Leung

它跳转到（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 
     } 
    } 
}

来源

2016-11-19 07:59:57 mcchu

Qml画布路径错误

回答

相关问题