캔버스 원이 클릭 위치를 감지합니다.

Question

캔버스에 그려진 서클을 시계 방향으로 위로 이동하는 음악 플레이어에 대한 검색 바라고 가정합니다.

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

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

은 가능한 녹색 사각형 (어디하지만 일시 정지/재생 버튼이 그려집니다 원의 중간에)에 클릭을 감지하는 것입니다. 그래서 예를 들어 백분율 (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; 

     }); 

을 한 다음에 (x, y) 분석해야합니다 좌표

경우 점 (x를 y를)가 가운데 원 안에 있으면 함수를 호출하면 캔버스 중심에서 (x, y) 점까지의 선과 중간의 세로선 사이의 각도를 계산해야합니다. 당신의 캔버스. 다음, 예를 들어, 90도 각도가 25 %에 해당, 180 °의 각도가 50 % 등

나는 분명 해요 경우 몰라요 ...

Answer 3

중간에 클릭을 처리하기 위해, 당신은 점 (x, y) 사이의 거리를 확인할 수 있으며, 당신의 원의 중심이 위의 4 라인에

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

감사 (내부 원의 중심이 (0.0)이다), 당신은 녹색으로 그려 내부 원, 60 (반경의 반경 것을 알고있다 - strokeSize을 = 100-40 = 60).

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

인가 : 그래서, 내부 원 안에 클릭을 감지, 클릭 된 점과 중심 사이의 거리가보다 낮은 60

가 이렇게이와 DMK의 솔루션을 완료하려면 있어야합니다 너 괜찮 니?