2012-01-10 10 views
0

私は問題があります、私にいくつかの提案を教えてください?私の問題は次のとおりです。3D円グラフを描画し、クリックして円グラフのポイントに移動すると、その部分が開始点(12時方向)からマウスが離されるまで表示されます。キャンバスで3D円グラフを描き、マウスのクリックに応じてパーセンテージを表示する方法は?

私にいくつかのアイデアを与えてください、私は数学が得意ではないよ、とマウスがポイントから解放し、マウスがリリースポイントに与えられた点からの部分を描く天使を計算する方法がわかりません。

ありがとうございます!私の悪い英語のために申し訳ありません、あなたが私が何を言おうとしているのか理解するのが難しい場合、再度、感謝します !

答えて

4

古い質問が、楽しみの問題のように聞こえます。私はこの時点で2Dを採用しています。 3Dが必要な場合は、まずこのことを覚えてから、3D空間に変換する方法を考えることができます。これははるかに困難です。

あなたは12時(PI/2)から開始し、マウスをクリックして頂点を二分半径で終わるアークによって形成される円スライスの角度を見つけたいです。次にキャンバスを使用してその領域を塗りつぶします。

what you want

数学 -

直角三角形を構築することで、この角度を探す:

サイド1(Y):垂直円の中心(頂点)からのクリックのy位置に

サイド2(x):クリックのy位置からクリックのx位置まで水平に表示

サイド3:斜め

get x and y

が覚えてクリックのx位置に頂点(これは赤で、斜辺であり、既知である必要はない)から、マウスの位置をカウントする左右から上から下へ

はサイドxの長さは、クリックのx位置を引い円の半径に等しいどのように参照してください?

次に、余接(隣接する側/反対側)を使用して、陰影領域の角度を見つけるために、PI(180度)からそれを引きます。あなたが見ることができるように

use cotan

は、いくつかの象限に、あなたはパイを追加し、いくつかの中で、あなたはしませんが、それはあなたがあなたのスライスの角度を見つける方法を本質的です。

はまた、あなたが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

関連する問題