使用Javascript检查鼠标点击圆形或多边形内部

Question

任何人都知道如何检查是否在圆形或多边形内点击了鼠标。我的问题是我想检查一下，如果鼠标已经在圆或多边形内部被遮住了。圆形或多边形坐标已存储在数组内。任何帮助真的很感谢

Answer 1

圈很容易，只需检查从点到圆心的距离是否小于使用Pythagorean theorem（另请参阅this question）的圆的半径。

多边形是more challenging。该文章链接到C代码来做到这一点，它应该可以翻译成JavaScript。

Answer 2

至于圆形情况下，它是很容易的，才刚刚检查，如果从点到中心的距离小于（OET）半径：

function intersects(x, y, cx, cy, r) { 
    var dx = x-cx 
    var dy = y-cy 
    return dx*dx+dy*dy <= r*r 
} 

---

对于多边形，最简单的方式是想象一条直线从这一点直线上升。如果这条线跨过奇数个多边形边界，则您的点位于多边形内。 （它只会穿过一个多边形边界，形成一个简单的凸多边形）

您可能也可以找到第三方几何库，但它可能比自己编码需要更多的时间。

Answer 3

正如some other answers所示，我跟着一些链接和found the c code here。 这里是查找点是否在多边形中的JavaScript翻译

Copyright（c）1970-2003，Wm。 Randolph Franklin

特此授权任何人获得本软件和相关文档文件（“软件”）的副本，以免费限制地处理本软件，包括但不限于使用权，复制，修改，合并，发布，分发，授权和/或销售软件的副本，并允许收到本软件是装在这样做的人，须符合下列条件：

1. 的再分发源代码必须保留上述版权声明，此条件列表和以下免责声明。
2. 以二进制形式重新分发时，必须在随分发提供的文档和/或其他材料中复制上述版权声明。
3. 未经特别事先书面许可，W. Randolph Franklin的名称不得用于认可或推广衍生自本软件的产品。

的软件提供“AS IS”，不包括任何明示或默示的担保，包括但不限于适销性，针对特定用途的适用性和不侵权的担保。在任何情况下，作者或版权所有者都不承担任何索赔，损害或其他责任，无论是在合同，侵权或其他方面的行为，不论是由软件或其使用或其他交易引起或与之相关的行为。软件。

function pnpoly(nvert, vertx, verty, testx, testy) { 
    var i, j, c = false; 
    for(i = 0, j = nvert-1; i < nvert; j = i++) { 
     if(((verty[i] > testy) != (verty[j] > testy)) && 
      (testx < (vertx[j] - vertx[i]) * (testy - verty[i])/(verty[j] - verty[i]) + vertx[i])) { 
       c = !c; 
     } 
    } 
    return c; 
} 

nvert - 在多边形顶点的数量。下面讨论是否重复第一个顶点。
vertx，verty - 包含多边形顶点的x坐标和y坐标的数组。
testx，testy - 测试点的X和Y坐标。

Answer 4

我组装的例子与上述功能： http://jsfiddle.net/jcspader/Vz6ka/

var gDrawingContext = $("canvas")[0].getContext("2d"); 


gDrawingContext.beginPath(); 
gDrawingContext.arc(50, 50, 10, 0, Math.PI*2, false); 
gDrawingContext.closePath(); 
gDrawingContext.strokeStyle = "red"; 
gDrawingContext.stroke(); 

gDrawingContext.beginPath(); 
gDrawingContext.arc(55, 55, 10, 0, Math.PI*2, false); 
gDrawingContext.closePath(); 
gDrawingContext.strokeStyle = "blue"; 
gDrawingContext.stroke(); 

function intersects(x, y, cx, cy, r) { 
    var dx = x-cx 
    var dy = y-cy 
    return dx*dx+dy*dy <= r*r 
} 
console.clear(); 
$("canvas").on("click", function (e){ 
    if (intersects(e.pageX, e.pageY, 55, 55, 10)) 
    console.info(e.pageX + ", " + e.pageY); 
}); 

Answer 5

我不得不看看isPointInPath方法。

它将要求您将路径绘制到“画布”元素上，但很有可能您要这样做来渲染它。如果您不需要在画布上渲染多边形，则可以创建一个不可见的画布元素（创建它，但不会将其添加到DOM）。

var canvas = document.getElementById('canvas'); // Or document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
for (var i = 0; i < coords.length; i++) { 
    ctx.lineTo(coords[i].x, coords[i].y); 
} 
ctx.isPointInPath(50,50); 

假设你已经协调与x和y属性对他们的对象的数组，上面的代码应该告诉你，如果该点（50，50）位于你的形状的范围内。