Question

任何人都知道如何检查在圆圈或多边形内单击鼠标的方法。我的问题是我想检查一下，如果鼠标已经在圆圈或多边形内部被克隆了。圆或多边形坐标已存储在数组中。任何帮助都非常感谢

Answer 1

根据some other answers的建议，我关注了一些链接和found the c code here。以下是用于查找点是否在多边形

中的JavaScript转换

版权所有（c）1970-2003，Wm。伦道夫富兰克林

特此授予任何获得本软件及相关文档文件（“软件”）副本的人免费许可，以无限制地交易本软件，包括但不限于使用权，复制权，修改，合并，发布，分发，再许可和/或出售本软件的副本，并允许向其提供本软件的人员这样做，但须符合以下条件：


源代码的重新分发必须保留上述版权声明，此条件列表以及以下免责声明。

二进制形式的再分发必须在随分发提供的文档和/或其他材料中复制上述版权声明。

未经事先书面许可，不得使用W. Randolph Franklin的名称来认可或宣传本软件衍生的产品。

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

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 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

我看一下isPointInPath方法。

它需要你将路径绘制到'canvas'元素上，但是你很有可能想要这样做才能渲染它。如果您不需要在画布上渲染多边形，则可以创建一个不可见的canvas元素（创建它但不会将其添加到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）是否在你的形状范围内。

Answer 4

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

多边形是more challenging。那篇文章链接到C代码来实现它，它应该可以转换为JavaScript。

Answer 5

我用上面的函数组装了一个例子： 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 );
});

Javascript检查鼠标在圆形或多边形内单击

5 个答案: