Question

短版

简而言之，如何检测鼠标光标是否位于HTML 5画布上绘制的圆圈内

长版

我拥有所有这些投票数据，并希望将其显示为随着数据进入而更新的饼图，因此我使用PHP脚本来计算分段大小并通过$.getScript生成一个javascript / p>

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();  

}

这是一张饼图代码的JSfiddle。

我之前已经解决了clickable areas但无法弄清楚如何将其应用于某个行业。

我还考虑使用ghost canvas background，但不知道如何翻译它，因此每个部门都是单独处理的。

有没有方法可以在没有库的情况下执行此操作，还是应该使用ChartJs之类的内容？

Answer 1

以下代码来自If mouse is inside circle sector?，但它经过重构，因此可以使用角度代替点。

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);
}

如果鼠标在圈内？

短版

长版

1 个答案: