古い質問が、楽しみの問題のように聞こえます。私はこの時点で2Dを採用しています。 3Dが必要な場合は、まずこのことを覚えてから、3D空間に変換する方法を考えることができます。これははるかに困難です。
あなたは12時(PI/2)から開始し、マウスをクリックして頂点を二分半径で終わるアークによって形成される円スライスの角度を見つけたいです。次にキャンバスを使用してその領域を塗りつぶします。
数学 -
直角三角形を構築することで、この角度を探す:
サイド1(Y):垂直円の中心(頂点)からのクリックのy位置に
サイド2(x):クリックのy位置からクリックのx位置まで水平に表示
サイド3:斜め
が覚えてクリックのx位置に頂点(これは赤で、斜辺であり、既知である必要はない)から、マウスの位置をカウントする左右から上から下へ
はサイドxの長さは、クリックのx位置を引い円の半径に等しいどのように参照してください?
次に、余接(隣接する側/反対側)を使用して、陰影領域の角度を見つけるために、PI(180度)からそれを引きます。あなたが見ることができるように
は、いくつかの象限に、あなたはパイを追加し、いくつかの中で、あなたはしませんが、それはあなたがあなたのスライスの角度を見つける方法を本質的です。
はまた、あなたが1/2パイ(90度)から開始しているので円(1/2 PI)の周りの道の1/4を調整する必要があります。
コード -
これはjQueryのプラグインの - 円の直径は、キャンバス要素のサイズプロパティで設定されている
https://raw.github.com/thilosavage/pielighter/master/pielighter.js
。
つまり <canvas id='myPIe' size='400'></canvas>
は、サークル400pxワイドを作成します。
境界線のサイズ、境界線の色、および塗りつぶしの色をカスタマイズできます。
onReleaseとonDragのコールバックを追加できます。これらのコールバックには、選択したスライスのパーセント、度、ラジアンが渡されます。
簡単なデモ:http://thilosavage.com/projects/pielighter/demo-simple.php
全デモ:http://thilosavage.com/projects/pielighter/demo-full.php