If mouse is inside circle sector?

Question

Short Version

In Short, how can I detect if the mouse cursor is inside a sector of a circle drawn on a HTML 5 Canvas

Long Version

I have all this voting data and want to display it as a pie chart that updates as the data comes in, so I have PHP script that works out the segment sizes and makes a javascript that laods via $.getScript

function toRadians(deg) { 
return deg * Math.PI / 180 
 } 

function drawpiechart() { 

ctx.fillStyle='#fdbb30'; 
ctx.beginPath(); 
ctx.moveTo(cx,cy); 
ctx.arc(cx,cy,125,0,toRadians(65.4545454545)); 
ctx.lineTo(cx,cy); 
ctx.closePath(); 
ctx.fill();  

ctx.fillStyle='#0087dc'; 
ctx.beginPath(); 
ctx.moveTo(cx,cy); 
ctx.arc(cx,cy,125,toRadians(65.4545454545),toRadians(98.1818181818)); 
ctx.lineTo(cx,cy); 
ctx.closePath(); 
ctx.fill();  

ctx.fillStyle='#EEEEEE'; 
ctx.beginPath(); 
ctx.moveTo(cx,cy); 
ctx.arc(cx,cy,125,toRadians(98.1818181818),toRadians(360)); 
ctx.lineTo(cx,cy); 
ctx.closePath(); 
ctx.fill();  

}

Heres a JSfiddle of the piechart code.

I've worked out clickable areas before but couldn't figure out how to apply that to a sector.

I also looked at using a ghost canvas background but didn't know how to translate that across so each sector was treated separately.

Is there a way to do this without a library, or should I look at using something like ChartJs ?

http://stackoverflow.com/questions/13652518/efficiently-find-points-inside-a-circle-sector — Andrei Bozantan, May 17 '14 at 14:11
Or simply use the native method `ctx.isPointInPath(x, y)` on the last defined path (redefine for each sector, no need to redraw). — , May 20 '14 at 08:36

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

The code below is from If mouse is inside circle sector? but it is refactored so that it works with angles instead of points.

function isInsideSector(point, center, radius, angle1, angle2) {
  function areClockwise(center, radius, angle, point2) {
    var point1 = {
      x : (center.x + radius) * Math.cos(angle),
      y : (center.y + radius) * Math.sin(angle)
    };
    return -point1.x*point2.y + point1.y*point2.x > 0;
  }

  var relPoint = {
    x: point.x - center.x,
    y: point.y - center.y
  };

  return !areClockwise(center, radius, angle1, relPoint) &&
         areClockwise(center, radius, angle2, relPoint) &&
         (relPoint.x*relPoint.x + relPoint.y*relPoint.y <= radius * radius);
}

edited May 23 '17 at 12:11

Community

1
1

answered May 17 '14 at 14:45

Andrei Bozantan

3,781
2
30
40

I've got a mostly [working model](http://jsfiddle.net/rudigerkidd/6JpQ4/) now, thank you. but I'm confused as to what angle & point 2 are meant to be in that second function – Rudiger Kidd May 17 '14 at 15:27
Nevermind, figured that out now – Rudiger Kidd May 17 '14 at 15:33
figured it out `center.y + radius * Math.sin(angle)` needed to be `(center.y + radius) * Math.sin(angle)` and likewise for x to. – Rudiger Kidd May 17 '14 at 16:21

If mouse is inside circle sector?

Short Version

Long Version

1 Answers1