迭代多边形内的每个点

Question

假设我在网格环境中有某个多边形的顶点，我如何遍历它包含的每个单元格（包括边缘上的单元格）？

为了澄清，我有以下顶点（算作左上角是(0, 0)）：

//each point is [x, y]
var verts = [
    [1, 1],
    [3, 1],
    [3, 2],
    [4, 2],
    [4, 4],
    [0, 4],
    [0, 3],
    [1, 3]
];

这会定义一个像这样的多边形：

根据上面的顶点，每个绿点都是我想要迭代的点。顶点沿着多边形边缘的方向没有模式，它可以围绕多边形顺时针或逆时针移动。但是，它们将井然有序；也就是说，如果你放下笔并按顺序移动到每个顶点，而不抬起，它会绘制轮廓而不会在多边形内部交叉。

用例是我有来自通过画布 API 加载的 PNG 的 imageData。这个PNG被分成“区域”，我需要迭代当前“区域”的每个像素。每个“区域”都由一个顶点数组定义，如上。

我尝试了类似以下的方法，它将为数组中的每组 4 个顶点创建一个用于迭代的正方形。

for(var v = 0, vl = verts.length - 4; v < vl; ++v) {
    //grabbing the minimum X, Y and maximum X, Y to define a square to iterate in
    var minX = Math.min(verts[v][0], verts[v + 1][0], verts[v + 2][0], verts[v + 3][0]),
        minY = Math.min(verts[v][1], verts[v + 1][1], verts[v + 2][1], verts[v + 3][1]),
        maxX = Math.max(verts[v][0], verts[v + 1][0], verts[v + 2][0], verts[v + 3][0]),
        maxY = Math.min(verts[v][1], verts[v + 1][1], verts[v + 2][1], verts[v + 3][1]);

    for(var x = minX; x < maxX; ++x) {
        for(var y = minY; y < maxY; ++y) {
            //do my checks on this pixel located at X, Y in the PNG
        }
    }
}

这有两个大问题：

1. 它可以在多边形内重复点，并且
2. 可以抓取多边形外的点

我可以通过跟踪我检查的点来解决第一个问题，因此我不会重复检查。第二个只能通过对每个点运行PointInPoly 检查来解决，这会使这个解决方案比我想要的要重得多。

编辑
迭代整个图像中的每个像素并对每个像素应用PointInPoly 检查也是不可接受的；它会比上面的算法还要慢。

Answer 1

如果你的多边形是凸的，你可以这样做：

• 为多边形的每条边创建一条线，表示一侧内侧和一侧外侧（这是基于法线，可能取决于缠绕方向）
• 对于已计算的边界框内的每个像素，检查该像素是否位于线的内侧。如果像素位于任何一条线的外侧，则它位于多边形之外。如果它在所有这些里面，那么它在里面。

基本算法来自这里：https://github.com/thegrandpoobah/voronoi/blob/master/stippler/stippler.cpp#L187

如果您的多边形不是凸的，那么我要做的就是在画布上以已知颜色实际绘制多边形，然后应用iterative flood fill algorithm。这要求您至少知道内部的一个像素，但这不应该是一项昂贵的测试。但这可能不适用于 JavaScript，如果您无法在屏幕外缓冲区中执行此操作（不熟悉 canvas 标签）。