0

キャンバスに円が描かれています。これは、音楽プレーヤーのシークバーであり、上から時計回りに移動します。

 <div id="wrapper"><canvas id="canvas" width="200" height="200"></canvas></div>

http://jsfiddle.net/5JPwA/1/

緑色の四角形のクリックを検出することは可能ですか (一時停止/再生ボタンが描画される円の真ん中のどこでも)。したがって、パーセンテージ (1-100) が必要です。たとえば、ユーザーが中央右をクリックし、その 0.25%、または 1/4 などです。

円の真ん中でクリックされた場合は一時停止/再生機能を実行する必要がありますが、それ以外の場所でクリックされた場合はパーセンテージを取得する必要があります。

私はjqueryを使用しています。

4

3 に答える 3

0

jPlayer circle demoのソースを確認してください。同じアプローチを使用してパーセンテージを取得できます。

var x = e.pageX - canvas.offsetLeft - w/2,
    y = e.pageY - canvas.offsetTop - h/2,
    mAngle = Math.atan2(y, x);

if (mAngle > -1 * Math.PI && mAngle < -0.5 * Math.PI) {
    mAngle = 2 * Math.PI + mAngle;
}

var percentage = (mAngle + Math.PI / 2) / 2 * Math.PI * 10;

デモ: http://jsfiddle.net/7RUt3/

于 2013-09-03T10:15:26.167 に答える
0

jQuery でクリック イベントの座標を取得できます。

$("#canvas").click(function(event) {
        var x = event.pageX - canvas.offsetLeft;
            var y = event.page - canvas.offsetTop;

        });

次に、(x,y) 座標を分析する必要があります。

ポイント (x,y) が中央の円の内側にある場合は、一時停止/再生関数を呼び出します。そうでない場合は、キャンバスの中心から (x,y) ポイントまでの線とキャンバスの真ん中にある垂直線。たとえば、90 度の角度は 25% に等しく、180 度の角度は 50% に等しいなどです。

清楚かどうかわからない…

于 2013-09-03T09:14:50.900 に答える
0

真ん中のクリックを処理するために、点 (x,y) と円の中心の間の距離を確認できます (内側の円の中心は (0.0) です)。

var w = 200;
var h = 200;
var strokeSize = 40; 
var radius = 100;

上記の 4 行のおかげで、緑色で描かれた内側の円の半径が 60 (半径 - ストロークサイズ = 100-40 = 60) であることがわかります。したがって、内側の円の内側でクリックを検出するには、クリックされたポイントと中心の間の距離が 60 未満である必要があります。

これを行うには、DMK のソリューションを次のように完成させます。

if ( Math.sqrt(x*x + y*y) > 60 ) {
   // compute the angle and do your stuff
} else {
   // call the pause/play function
}

よろしいですか？

于 2013-09-03T12:47:52.393 に答える