使用 Paper.js 绘制圆形动画

Question

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

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

我正在寻找的是一种方法，可以将绘制的圆从第一个点动画到我选择的某个半径的角度。

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

有谁知道可以实现这一点的方法，以便我可以为 endAngle 设置动画？

Answer 1

这是一个转换函数，它接受 html5 画布弧形参数并返回 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});
}