ポリゴンをRaphaelのサークルに変換するにはどうすればよいですか？

Question

Raphaelでは任意の形状を円に変形したいので、過度の歪みはないので、元のパス内のノードを数え、同じ数のノードで新しいパスを作成します。

これまでのところ、新しいパスを同じ数のノードを持つポリゴンに配置することができましたが、円を達成するためにキュービックベジェポイントを調整したいときに私の計算が失敗します。私は接線を計算すべきであることは分かっていますが、どのように進むべきかはわかりません。ここに私のコードは次のとおりです。

var path, paper, circle, radius; 
radius = 150; 
paper = Raphael("canvas", radius*4, radius*4); 
path = drawCircle(6) //can be any number 

function drawCircle(nodes){ 
    newPath = []; 
    for(x=0; x<nodes; x++) { 
     deg = (x/nodes)*360; 
     if(x==0) { 
      newPath.push("M " + Math.sin(deg*Math.PI/180)*radius + " " + Math.cos(deg*Math.PI/180)*radius); 
     } 
     else { 
     newPath.push(
       "C " + Math.sin(deg*Math.PI/180)*radius 
       + " " + Math.cos(deg*Math.PI/180)*radius 
       + " " + Math.sin(deg*Math.PI/180)*radius 
       + " " + Math.cos(deg*Math.PI/180)*radius 
       + " " + Math.sin(deg*Math.PI/180)*radius 
       + " " + Math.cos(deg*Math.PI/180)*radius 
       ) 
      } 
    } 
    newPath.push("Z") 
    console.log(newPath) 
    paper.path(newPath).attr({"fill": "#000"}).translate(200, 200) 
} 

ここではそれを試してみるjsfiddleです： http://jsfiddle.net/zeYtT/

Answer 1

ここで修正されたコードです。 SVGのcurveコマンドではなく、arc pathコマンドを使用できます。以下のコードでは、最初のノードと最後のノードを等しく扱い、余分なノードを1つ生成するように見えることに注意してください。これは、任意の形状がすべて閉じている、つまり最初のノードと最後のノードが等しいことを前提としています。これは単に「パスを閉じる」コマンド（Z）で保証することはできません。

var path, paper, circle, radius; 
radius = 150; 
paper = Raphael("canvas", radius * 4, radius * 4); 
path = drawCircle(8) //can be any number 

function drawCircle(nodes) { 
    var newPath = [] 
    for (var i = 0; i <= nodes; i++) { 
     var deg = (i*1.0/nodes) * 360; 
     var x = Math.cos(deg * Math.PI/180) * radius 
     var y = Math.sin(deg * Math.PI/180) * radius 
     if (newPath == 0) newPath.push("M " + x + " " + y) 
     else newPath.push("A " + (radius) + "," + (radius) + ",0,0,1," + x + "," + y) 
    } 
    newPath.push("Z") 
    console.log(newPath) 
    paper.path(newPath).attr({ 
     "fill": "#000" 
    }).translate(200, 200) 
} 

Answer 2

「正しい」方法は、xにはcosを、sinにはyを使用することです。私はそれを覚えて文字の実際の形状（cos - > o - > xとsin - > i - > y）を比較する:)