0

I have a circle drawn in canvas, its suppose to be a seekbar for a music player, which goes from top in clockwise direction.

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

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

Is it possible to detect a click on the green rectangle (anywhere BUT in the middle of the circle where pause / play button will be drawn). So I need a percentage (1-100) for example, user clicks middle right and its 0.25%, or 1/4, and so on.

If its clicked in the middle of the circle than I need to run pause / play function, but it its clicked anywhere else I need to get a percentage.

I am using jquery.

Toniq
  • 4,492
  • 12
  • 50
  • 109

3 Answers3

0

You can get the coordinates of you click event with jQuery :

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

        });

and then you'll have to analyse the (x,y) coordinates :

if the point (x,y) is inside the middle circle, then you call the function pause/play if not, you have to compute the angle between the line from the center of the canvas to the (x,y) point and the vertical line in the middle of your canvas. then, for example, an angle of 90 degrees equals to 25%, a angle of 180 degrees equals to 50% etc.

I don't know if I'm clear...

Elodie
  • 108
  • 9
0

Check out source of jPlayer circle demo. You can use the same approach to get percentage:

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;

demo: http://jsfiddle.net/7RUt3/

dimusic
  • 4,123
  • 2
  • 28
  • 31
  • This works great, but still if i click in the middle, it triggers the same event. How can I exclude the circle center and redirect action somewhere else? – Toniq Sep 03 '13 at 12:22
  • How to check if circle in the middle clicked - http://stackoverflow.com/a/16792888/1032493 fiddle: http://jsfiddle.net/7RUt3/2/ – dimusic Sep 03 '13 at 12:42
  • Ok, one more question. How could I draw pause/play icon in the middle like in this example? http://coolcarousels.frebsite.nl/c/55/ – Toniq Sep 03 '13 at 16:04
  • you can use `drawImage` method https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D#drawImage() – dimusic Sep 04 '13 at 08:45
0

in order to handle the click in the middle, you can check the distance between the point (x,y) and the center of your circle (the center of the inner circle is (0.0) )

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

thanks to the 4 line above, you know that the inner circle, drawn in green, has a radius of 60 (radius - strokeSize = 100-40 = 60). So, to detect a click INSIDE the inner circle, the distance between the clicked point and the center must be lower than 60.

To do this, complete the solution of DMK with this :

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

Is that ok for you ?

Elodie
  • 108
  • 9