Question

我想检查点（x，y）是否在画布上的特定区域。例如，如果我在html画布上有一个100X100的区域，那么我想找到一个点（x，y）是否位于该区域内或它是否在该区域之外。这个检测是使用javascript和jquery完成的。感谢名单。

Answer 1

取决于您需要它的用例：

MouseOver / Click：只要您的画布是唯一具有移动元素的东西，并且您不需要支持safari / iOS，那么一个好的“塑造”图像映射实际上可以完成这项工作。（使用图像映射在画布的尺寸上拉伸1px * 1px透明gif）

任意点（包括鼠标）：使用公式计算点是在多边形内部还是外部。以下脚本（虽然不是来自我）解决了这个问题：

//+ Jonas Raoni Soares Silva
//@ http://jsfromhell.com/math/is-point-in-poly [rev. #0]

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}

在他的页面上，Jonas还举了一个如何使用它的例子。基本上poly是包含多边形点的对象数组，pt是一个具有要测试点的对象：

var polygon = [
    {x: 0, y: 0},
    {x: 0, y: length},
    {x: length, y: 10},
    {x: -length, y: -10},
    {x: 0, y: -length},
    {x: 0, y: 0}
];

var testpoint= {x: 1, y:2};
if(isPointInPoly(polygon,testpoint)) { /* do something */ }

如果是鼠标位置，你应该把整个东西绑定到mousemove上，再次可以在mouseenter / mouseleave上禁用 - canvas节点的所有事件

任何一点：使用canvas函数isPointInPath（），如下所述：http://canvas.quaese.de/index.php?nav=6,42&doc_id=31虽然AFAIK只有在画布上只有一个路径（你可以使用多个画布）时才有效 - 或者每个都重绘一次多边形并在测试时进行测试。

我个人更喜欢选项2.如果您需要有关获取鼠标坐标的进一步帮助，Google搜索应该在stackoverflow上为您提供正确的页面（或参见右侧的“相关”部分）

检查html画布上特定区域中的点位置

1 个答案: