如何使用HTML5画布找出点击圈子的哪个部分？-Howtofindoutwhichpartofthecirclewasclicked,usingHTML5canvas?

2  

Try This

This example just translates the clicked e.pageX and e.pageY to normal quadrant system. And after some condition, you can determine which part has been clicked.

此示例仅将单击的e.pageX和e.pageY转换为正常象限系统。在某些条件之后,您可以确定单击了哪个部分。

    $('#myCanvas').click(function (e) {
    var nx,ny;
    nx=-(x- e.pageX);
    ny=y- e.pageY;
        if (nx>0 && ny>0){
      alert('Yellow');
      }else if (nx<0 && ny>0){
      alert('Blue');
      }else if (nx>0 && ny<0){
      alert('Green');
      }else if (nx<0 && ny<0){
      alert('Red');
      }

    });

Here is the fiddle https://jsfiddle.net/xawpLdys/3/

这是小提琴https://jsfiddle.net/xawpLdys/3/

UPDATE

John S was right, (It counts clicks that are outside the circle). To prevent the clicks outside the circle from considering, we need to just find the distance from the center of the circle and the clicked point. Then compare the distance with the circle's radius to see it is inside radius.

John S是对的,(它会计算圈外的点击次数)。为了防止圆圈外的咔嗒声被考虑,我们需要找到距离圆心和点击点的距离。然后将距离与圆的半径进行比较,看它是否在半径范围内。

The updated code :

更新的代码:

    $('#myCanvas').click(function (e) {
    var nx,ny;
    nx=-(x- e.pageX);
    ny=y- e.pageY;
     var dx = Math.abs(Math.abs(x)-Math.abs(e.pageX));
     var dy = Math.abs(Math.abs(y)-Math.abs(e.pageY));
     var distance_clicked = Math.sqrt((dx*dx)+(dy*dy));
     if(distance_clicked <= radius){
        if (nx>0 && ny>0){
          alert('Yellow');
          }else if (nx<0 && ny>0){
          alert('Blue');
          }else if (nx>0 && ny<0){
          alert('Green');
          }else if (nx<0 && ny<0){
          alert('Red');
          }
    }
    });

Here is the updated fiddle https://jsfiddle.net/xawpLdys/8/

这是更新的小提琴https://jsfiddle.net/xawpLdys/8/

It still have the limitations of dividing the circle more than 4 slices.

它仍然具有将圆分割超过4个切片的限制。

0  

The accepted answer seems a bit limited. It counts clicks that are outside the circle. That could be fixed fairly easily, but it would still be limited to four sections.

接受的答案似乎有点受限。它会计算圈子外的点击次数。这可以很容易地修复,但它仍然只限于四个部分。

To determine if a point is in a sector:

要确定某个点是否在某个扇区中:

1. First check if it is within the circle. The Pythagorean theorem comes into play here. Square the x and y values, if their sum is less than or equal to the radius squared, the point is in the circle.

首先检查它是否在圆圈内。毕达哥拉斯定理在这里发挥作用。将x和y值平方,如果它们的总和小于或等于半径的平方,则该点在圆中。

2. If the point is in the circle, then check if its angle is between the start and end angles for the sector. You can get the point's angle using the arc tangent function from trigonometry.

如果该点位于圆圈中,则检查其角度是否在扇区的起始角度和结束角度之间。您可以使用三角函数的反正切函数获得点的角度。

Try this jsfiddle.

试试这个jsfiddle。

Here are the types that help make this work:

以下是有助于实现此功能的类型:

var Circle = function(center, radius) {
    this.center = center;
    this.radius = radius;

    this._radiusSquared = Math.pow(this.radius, 2);
}

$.extend(Circle.prototype, {
    containsPoint: function(point) {
        var relPoint = this.pointToRelPoint(point);
        return Math.pow(relPoint.x, 2) + Math.pow(relPoint.y, 2)
                <= this._radiusSquared;
    },

    getAngleForPoint: function(point) {
        var relPoint = this.pointToRelPoint(point);
        return Math.atan2(-relPoint.y, -relPoint.x) + Math.PI;
    },

    pointToRelPoint: function(point) {
        return { x: point.x - this.center.x, y: point.y - this.center.y }
    }
});

var CircleSector = function(startAngle, endAngle) {
    this.startAngle = startAngle;
    this.endAngle = endAngle;
};

$.extend(CircleSector.prototype, {
    containsAngle: function(angle) {
        return (angle >= this.startAngle) && (angle