Paper.jsを使用して円を描くアニメーション

Question

Paper.jsを使用して描画される円をアニメーション化しようとしています。

円ツールは、moveTo/arcToなどで構築されたパスをインスタンス化するためのクイックアクセスであるため、開始円と終了角度をサポートする引数はありません（円グラフのような円の場合）。

私が探しているのは、最初の点から特定の半径で選択した角度まで描かれている円をアニメーション化する方法です。

実際のキャンバスspecification allows for explicit startAngle and endAngleを指定します。これがPaper.js内の場合は、私が探しているものを簡単に達成することができました。しかし、Paper.jsでは、私はまだそのようなコントロールを複製する方法を見つけていません。私はFabricの円の形の実装が仕様のarcコマンドと同じ属性を使用していたので、Fabric.jsの中で何かを作った。

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