丸みのある四角形を円に変換

Question

私は丸められた四角形を円形に変換する必要がある特定のアニメーションに取り組んでいます。私はpaper.jsのドキュメントをチェックしており、これを達成するための事前定義された関数が見つかりませんでした。

- >

アニメーションは滑らかにする必要があります。私が扱っている長方形の数が非常に多いので、「現在の丸められた丸を削除し、もう1つ丸めたバージョンを再描画する」メソッドを使用することはできません。パフォーマンスが低下し、アニメーションが遅くなります。

これは丸い四角形を生成するために使用しているコードです。

// Had to paste something to post the question 
// Though the whole code can be seen on codepen link 
var rect = new Rectangle(); 
var radius = 100, origin = {x: 100, y: 100}; 
rect.size = new Size(radius, radius); 
rect.center = new Point(origin.x, origin.y); 
var cornerSize = radius/4; 
var shape = new Path.Rectangle(rect, cornerSize); 

調製したCodepenの例は進捗状況を示しています。

他のオブジェクトタイプを使用してアニメーション全体を処理できれば、それも問題ありません。今のところ、丸みを帯びた矩形を丸に変換できるプロパティは見つかりません。

私はまた、オブジェクトの色と位置をアニメートしています。私は色のアニメーションを見つけるために多くのドキュメントを見てきました。

PS：オブジェクトの色をアニメーション化する他の（より良い）テクニックがある場合は、それも共有してください。

Answer 1

にコーナーの大きさは、最初の丸い四角形としてパスを作成する必要があります。その後、アニメーションの各ステップで、パスの8つのセグメントを変更する必要があります。これはPathオブジェクトでのみ機能し、矩形がShapeの場合は無効です。

セグメント点とハンドルは、次のように設定しなければならない。

κ（カッパ）Numerical.KAPPA（カッパhereの詳細）としてpaper.jsに定義されています。

この（Click here for the Sketch）のようになります。半径を変更するコード：

var rect = new Path.Rectangle(new Point(100, 100), new Size(100, 100), 30); 
rect.fullySelected = true; 

var step = 1; 
var percentage = 0; 

function onFrame(event) { 
    percentage += step; 
    setCornerRadius(rect, percentage) 
    if (percentage > 50 || percentage < 0) { 
     step *= -1; 
    } 
} 

function setCornerRadius(rectPath, roundingPercent) { 
    roundingPercent = Math.min(50, Math.max(0, roundingPercent)); 
    var rectBounds = rectPath.bounds; 
    var radius = roundingPercent/100 * Math.min(rectBounds.width, rectBounds.height); 
    var handleLength = radius * Numerical.KAPPA; 

    l = rectBounds.getLeft(), 
    t = rectBounds.getTop(), 
    r = rectBounds.getRight(), 
    b = rectBounds.getBottom(); 

    var segs = rectPath.segments; 
    segs[0].point.x = segs[3].point.x = l + radius; 
    segs[0].handleOut.x = segs[3].handleIn.x = -handleLength; 
    segs[4].point.x = segs[7].point.x = r - radius; 
    segs[4].handleOut.x = segs[7].handleIn.x = handleLength; 
    segs[1].point.y = segs[6].point.y = b - radius; 
    segs[1].handleIn.y = segs[6].handleOut.y = handleLength; 
    segs[2].point.y = segs[5].point.y = t + radius; 
    segs[2].handleOut.y = segs[5].handleIn.y = -handleLength; 
} 

編集：私はちょうど形状を使用してはるかに簡単な方法を発見しました。どんなアプローチがより速く実行されているかわからない

ここにShape（Click here for the Sketch）を使用した実装があります。

var size = 100; 
var rect = new Shape.Rectangle(new Rectangle(new Point(100, 100), new Size(size, size)), 30); 
rect.strokeColor = "red"; 

var step = 1; 
var percentage = 0; 

function onFrame(event) { 
    percentage = Math.min(50, Math.max(0, percentage + step)); 
    rect.radius = size * percentage/100; 
    if (percentage >= 50 || percentage <= 0) { 
     step *= -1; 
    } 
} 

Answer 2

を変更し、次の

var cornerSize = circle.radius/1;