使用 Paper.js 为正在绘制的圆制作动画

Question

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

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

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

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

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

Answer 1

这是一个转换函数，它接受 html5 canvas 弧参数和 returns 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 为正在绘制的圆制作动画

Animate a circle being drawn using Paper.js

javascript

canvas

paperjs