勉強も兼ねて、円グラフのようにぐるっと描写するjsを書きたかったのですが、どうにもうまくいきませんでした。。
角度の計算がおかしいんだろうなと思うのですが、どうにも数学が苦手で、もう少し調査してリベンジしたいです。
単純に90度ごとだととても簡単なのですが、終点の座標が曲線の部分にかかってくると三角関数が関わってくるので数学が苦手な人間にとってはとても大変なんですよね。
|
1 2 3 |
<svg width="100" height="100" viewBox="-100 -100 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M 0,0 L 0,-100 a 100 100 -90 0,1 100,100 z" fill="black" id="path01"/> </svg> |
このソースコードだと、こんな図形になります。90度の単純な扇形。
pathタグの「d=”M 0,0 L 0,-100 a 100 100 -90 0 1 100,100 z”」部分の記述にそれぞれ意味があるようです。
d=” M（円弧中心の座標） L （始点の座標） A （円のX軸半径,円のy軸半径） （傾き） （180度以下か以上か 0 or 1） （時計回りかどうか 0 or 1） （終点の座標） z “
それぞれの計算式を下記にあてはめるように三角関数で値を出して…
|
1 |
<path d="M cx,cy L x1 y1 start rx ry start f1 f2 dx,dy z" fill="red" stroke="black" /> |
f1の値が鬼門ですね。頑張ります。
—
SVGによる扇形の描画サンプル
こちらのサイトを参考にさせて頂きました。大変わかりやすかったです。
