アルゴリズム：SVG円グラフを描くために度をx、yに分解する関数

Question

私はSVGグラフィックスを使って円グラフを描きます。私は、円グラフ（例えば、277度）と直径（例えば200px）の度合いを与えられ、277度の円を描く必要があります。

SVGグラフィックでは、そのサークルが終了するポイントまで277度を解決する必要があります。

私は数学で最大ではないので、度数を取ることができる数式/ javascript関数を考え出しました。&は、円が終了する位置のx、y点を考え出します。

私のJavascript機能（下部）は、正確な角度を正しいポイントに解決しますか？度の値から座標を取得するアルゴリズムを開発する手助けはできますか？それとも、私が知っていることを知っていることができる既存のアルゴリズムがありますか？

マイアルゴリズム：は（私が助けを必要とする）
だから私は与えられていた値は以下のとおりです。円径：200pxの、サークルサイズ：277度。

• ポイント0,0を中心に回転するときに277の終点が必要です。私は罪を使用する必要があることを意味第一象限に
• 277の両端（正しいということです？）

• だから私は三角形の今を知っている値は次のとおりです。斜辺= 100ピクセル（半径）、角度= 7度（277-270）。

  sin（7）= o/100; 0.1219 = o/100; o = 12.2;

• したがって、Y点は12.2ですが（私の酒のために0,0がそう左上隅その本当にmidY-X = 100から12.2 = 87.8である;？（正解）今

• が決定していることですXのPOS、IはCOSを使用する（つまり正しい？）

  （7）/ 100 =

  COS; = 99.25;

• はしたがって、X点は99.25または100から99.25 = 0.75である。

277度のx、y座標は0.75,87.8です。あれは正しいですか？

だから、コードでは、このアルゴリズムは、次のようになります。

function resolveToPoint(deg, diameter) 
{ 
    if (deg <= 0) 
     return 0; 

    var x  = 0; 
    var y  = 0; 
    var angle = 0; 
    var rad = diameter/2; 
    var midX = rad; 
    var midY = rad; 

    if (deg <= 90) 
     angle = 90 - deg; 
    else if (deg <= 180) 
     angle = deg - 90; 
    else if (deg <= 270) 
     angle = deg - 180; 
    else if (deg <= 360) 
     angle = deg - 270; 

    // Q: Will I ALWAYS use cos to determine the x & sin for the x NO MATTER what quadrant the angle is in?? 
    x = Math.cos(angle) * rad; 
    y = Math.sin(angle) * rad; 

    if (deg <= 90) 
    { 
     x = midX + x; 
     y = midY - y; 
    } 
    else if (deg <= 180) 
    { 
     x = midX + x; 
     y = midY + y; 
    } 
    else if (deg <= 270) 
    { 
     x = midX - x; 
     y = midY + y; 
    } 
    else if (deg <= 360) 
    { 
     x = midX - x; 
     y = midY - y; 
    } 

    return {mX: x, mY: y}; 
} 

その後、私はそうのようなSVGでそれを使用します：

function outputPiegraph(point, rad, diameter) 
{ 
    var svg = '<svg width="%spx" height=""%spx" id='pie' style="background-color: green;"> 
    <path d="M%spx,%spx L%spx, %spx A%spx,"%spx 1 1,1 %spx,%spx z" 
    fill="red" stroke="blue" stroke-width="2" />" 
</svg>'; 


    return sprintf(svg, diameter, diameter, point.mX, point.mY, rad, rad, rad, diameter); 
} 

Answer 1

これは極座標から直交座標への単純な変換である：

function resolveToPoint(deg, diameter) { 
    var rad = Math.PI * deg/180; 
    var r = diameter/2; 
    return {mX: r * Math.cos(rad), mY: r * Math.sin(rad)}; 
} 

http://en.wikipedia.org/wiki/Polar_coordinates#Converting_between_polar_and_Cartesian_coordinates

Answer 2

あなたが単位円を考慮した場合、X座標与えられた（ラジアンベースの）角度がコサインによって与えられ、同様に、Y座標はサインによって与えられる。だから、これを簡単に以下のように解決することができます。

function resolveToPoint(deg, diameter) { 
    var radians = angle_in_degrees/180 * Math.PI; 
    var x = diameter/2 * cos(radians); 
    var y = diameter/2 * sin(radians); 

    return {mX : x, mY: y}; 
}