Javascript 使用Paper.js为正在绘制的圆设置动画

Javascript 使用Paper.js为正在绘制的圆设置动画,javascript,canvas,paperjs,Javascript,Canvas,Paperjs,我正在尝试使用Paper.js为正在绘制的圆设置动画 由于圆工具只是用于实例化通过moveTo/arcTo等构建的路径的快速访问,因此没有参数支持开始和结束角度(对于类似圆的开放饼图) 我要寻找的是一种方法,可以使从第一个点到我选择的某个半径的角度绘制的圆具有动画效果 要指定的实际画布。如果在Paper.js中是这样的话,我可以很容易地实现我想要的。然而,在Paper.js中,我还没有找到复制这种控件的方法。我在Fabric.js中创建了一些东西,作为Fabric的圆形状实现,使用了与规范中的a

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

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

我要寻找的是一种方法,可以使从第一个点到我选择的某个半径的角度绘制的圆具有动画效果

要指定的实际画布。如果在Paper.js中是这样的话,我可以很容易地实现我想要的。然而,在Paper.js中,我还没有找到复制这种控件的方法。我在Fabric.js中创建了一些东西,作为Fabric的圆形状实现,使用了与规范中的arc命令相同的属性


有没有人知道一种方法可以实现这一点,这样我就可以设置收尾角的动画?

这里有一个转换函数,它接受html5画布圆弧参数,并返回Paper.js圆弧所需的
参数

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});
}

Canvas的本机绘图命令在路径中可用——请看,是的,我已经看到了,但本机arc的增强和paper的实现之间有很大的区别当尝试为圆的绘制设置动画时,“通过”似乎完全抽象为一个值。至少在我的脑海里,我不知道如何通过动画来显示一个圆的图画。绘制路径后,您甚至可以操作“from”、“through”和“to”属性吗?它们似乎不是可访问的属性。您可以设置动画循环:删除旧的较小圆弧并添加新的较大圆弧。;-)谢谢,但这不是很低效吗?此外,当我画圆时,我可以创建“从”和“到”点,但不知道如何创建“通过”点。有什么想法吗?所有画布动画都包括擦除画布和重新绘制更新的形状。您可以使用三角学计算从、到到。试试看。如果你做不到的话。晚饭后我会发布一个答案。:-)感谢您花时间发布此功能。所以,为了找到“通过”位置,你只需要取当前“从”和“到”的平均值?我昨晚确实考虑过这个问题,但我很感谢你的意见,今天我将试一试:)