Холст круг обнаружить позицию щелчка

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

Заканчивать источник от 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 2

Вы можете получить координаты вас нажмите событие с JQuery:

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

     }); 

, а затем вы должны проанализировать (х, у) координаты:

, если точка (х, у) находится внутри среднего круга, тогда вы вызываете функцию pause/play , если нет, вам нужно вычислить угол между линией от центра холста до точки (x, y) и вертикальной линией посредине ваш холст. то, например, угол 90 градусов составляет 25%, угол 180 градусов составляет 50% и т.д.

Я не знаю, если я понятно ...

Answer 3

для того, чтобы обработать щелчок в середине, вы можете проверить расстояние между точкой (х, у) и центр вашего круга (центр внутреннего круга (0,0))

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

благодаря 4 линии выше, вы знаете, что внутренний круг, нарисованный в зеленый цвет, имеет радиус 60 (радиус - strokeSize = 100-40 = 60). Таким образом, чтобы обнаружить щелчок внутри внутреннего круга, расстояние между щелкнутой точкой и центром должно быть ниже 60.

Чтобы сделать это, выполните решение ДОК с этим:

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

ли это нормально для вас?