Question

我正在尝试使用Paper.js为正在绘制的圆圈设置动画。

由于圆形工具只是用于实例化通过moveTo / arcTo等构建的路径的快速访问，因此没有支持开始和结束角度的参数（对于打开的饼图类圆圈）。

我正在寻找的是一种方法，可以将从第一个点开始绘制的圆圈设置为在某个半径范围内选择的角度。

要指定的实际画布specification allows for explicit startAngle and endAngle。如果在Paper.js中就是这种情况，我可以很容易地实现我想要的。但是，在Paper.js中，我还没有遇到过复制这种控制的方法。我在Fabric.js中创建了一些东西，它作为Fabric的圆形实现使用了与规范中的arc命令相同的属性。

有没有人知道这可以实现的方式，所以我可以为endAngle设置动画？

Answer 1

这是一个转换函数，它接受html5 canvas arc参数并返回Paper.js弧所需的from, through, to参数。

function canvasArcToPaperArc(cx,cy,radius,startAngle,endAngle,strokecolor){
    var startX=cx+radius*Math.cos(startAngle);
    var startY=cy+radius*Math.sin(startAngle);
    var endX=cx+radius*Math.cos(endAngle);
    var endY=cy+radius*Math.sin(endAngle);
    var thruX=cx+radius*Math.cos((endAngle-startAngle)/2);
    var thruY=cy+radius*Math.sin((endAngle-startAngle)/2);
    var from = new Point(startX,startY);
    var through = new Point(thruX,thruY);
    var to = new Point(endX,endY);
    return({from:from, through:through, to:to});
}

使用Paper.js

1 个答案: