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

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

$("#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% 等等。

不知道我说清楚没...

于 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（半径 - 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
}

这个可以吗 ？

于 2013-09-03T12:47:52.393 回答
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 回答