Question

我有一个用画布绘制的圆圈，它假设是一个音乐播放器的搜索栏，它从顺时针方向从顶部开始。

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

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

是否可以检测到绿色矩形上的单击（在圆圈中间的任何位置，将绘制暂停/播放按钮）。所以我需要一个百分比（1-100），例如，用户点击右中间及其0.25％或1/4，依此类推。

如果它点击在圆圈中间而不是我需要运行暂停/播放功能，但它点击了我需要获得百分比的任何其他地方。

我正在使用jquery。

Answer 1

您可以使用jQuery获取Click事件的坐标：

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

        });

然后你必须分析（x，y）坐标：

如果点（x，y）在中间圆圈内，则调用函数pause / play 如果没有，则必须计算从画布中心到（x，y）点的线与画布中间的垂直线之间的角度。然后，例如，90度的角度等于25％，180度的角度等于50％等。

我不知道我是否清楚......

Answer 2

查看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/

Answer 3

为了处理中间的点击，你可以检查点（x，y）和圆心（中心圆的中心是（0.0））之间的距离。

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

由于上面的4行，您知道以绿色绘制的内圆半径为60（半径 - strokeSize = 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
}

你可以吗？

画布圆圈检测点击位置

3 个答案: