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

【问题标题】：Check a point location in a particular area on html canvas检查 html 画布上特定区域中的点位置
【发布时间】：2022-01-23 19:09:51
【问题描述】：

我想检查一个点（x，y）是否在画布上的特定区域。例如，如果我在 html 画布上有一个 100X100 的区域，那么我想找出一个点 (x, y) 是在该区域内还是在该区域外。此检测将使用 javascript 和 jquery 完成。谢谢。

【问题讨论】：

您是在问如何计算这个吗？这是一个基本的数学：if(x>=0 && x<= 100 && y>=0 && y<=100){ /*inside*/ }else{ /*outside*/ }
这对于一个简单的矩形来说是正确的，但是如果矩形区域本身以某个角度弯曲呢？
对于所有可能的形状没有通用的解决方案。如果这是您想要实现的，您可以使用mouseenter 事件检查鼠标光标是否在画布元素上。

标签： javascript html canvas

【解决方案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 时启用/禁用 - 画布节点的所有事件

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

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

【讨论】：

缺少括号：if(isPointInPoly(polygon,testpoint) {

【解决方案2】：

第 1 步：将您的区域/区域定义为路径。

第 2 步：检查给定点是否在此路径内。

// Define path - could be anything, rectangle, circle, polygon etc.
var path = new Path2D();
path.rect(x1, y1, width, height);

// Check if the given point (x2, y2) is inside the path.
if (ctx.isPointInPath(path, x2, y2)) {
    // Point is inside the area
} else {
    // Point is not inside the area
}

如果您有多个区域要检查，请将每个区域定义为路径并为每个区域执行isPointInPath 检查。

【讨论】：