基于网格将多边形拆分为多个多边形（html5画布）答案

【问题标题】：Split polygon into multiple polygons based on grid (html5 canvas)基于网格将多边形拆分为多个多边形（html5画布）
【发布时间】：2015-03-10 14:55:41
【问题描述】：

我在带有底层网格的画布上绘制多边形

我现在想把这个多边形分割成多个多边形（基于网格）

所以我得到了 4 个多边形的坐标，而不是 1 个多边形。

是否有一个我没有考虑过的简单解决方案？

这是我的测试画布的代码 (codepen)

<script>
var bw = 200;
var bh = 200;
var p = 0;
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;

var grid = 50;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function drawBoard(){

 context.beginPath();
 for (var x = 0; x <= bw; x += grid){
    context.moveTo(0.5 + x + p, p);
    context.lineTo(0.5 + x + p, bh + p);
 }
 for (var x = 0; x <= bh; x += grid) {
    context.moveTo(p, 0.5 + x + p);
    context.lineTo(bw + p, 0.5 + x + p);
 }
 context.lineWidth = 1;
 context.strokeStyle = "black";
 context.stroke();

}
drawBoard();

// Polygon
context.fillStyle = '#f00';
context.beginPath();
context.moveTo(0, 0);
context.lineTo(100,50);
context.lineTo(50, 100);
context.lineTo(0, 90);
context.closePath();
context.fill();
</script>

【问题讨论】：

@KenFyrstenberg 关于这个有什么想法吗？我可以使用 drawImage 裁剪可视化将多边形划分为网格单元的解决方案。然后对每个子多边形单元格进行行进正方形轮廓检测。最后做一些路径简化以将每条路径减少到（希望）只是子多边形的顶点。但这似乎很混乱。我无法做的是可视化数学解决方案——也许在单个单元格内找到线段，并以某种方式用这些线段创建封闭路径。我只是认为有一个简单的解决方案，它让我不知道它：-)
@markE（嗯，如果用户不在列表中，@'s 似乎不起作用，很高兴知道）。我会做与 Matt Ko 所概述的类似的事情。找到每个正方形内的交点并基于此重建多边形（检查边并将网格区域限制为原始多边形大小）。
你可以用每条网格线分割多边形，它会很慢而且可能不是最好的解决方案，这里已经讨论了如何分割：stackoverflow.com/questions/3623703/…

标签： javascript html algorithm canvas split

【解决方案1】：

你可以很容易地计算出这个：
您首先从网格中获取所有点（所有交叉点），然后您所要做的就是检查每个点是否在您的多边形内。

如果它是多边形的一个角，您可以忽略它。
如果它在您的多边形之外，您可以忽略它。
如果它在您的多边形内，则该点的每一侧都有 4 个微不足道的多边形。然后，这取决于您要如何处理多边形内有多个网格点的情况。

要查看一个点是否在多边形内，有很多方法，这里只是其中之一，来自 SO：Check a point location in a particular area on html canvas

顺便说一句：您不需要考虑多边形之外的琐碎网格点（x 坐标高于或小于多边形的最大/最小 x 坐标的那些以及 y 坐标高于或小于最大/多边形的最小 y 坐标）。

编辑：我制作了这张图片：

您所做的是检查网格上的所有点。
黑色和蓝色点会被忽略，因为它们位于网格的外部或边界上。
只有绿点很有趣。
从那里，您只需沿各个方向跟随网格，直到遇到与多边形边界的交点。
这要么是一个边界点 - 蓝色 - 要么是一个交点 - 橙色。
很容易找到一条线和多边形边界的交点，所以我不会在这里详细介绍。
就是这样，您拥有将定义内部多边形的所有点。

在这里，当多边形内有多个网格点（绿点）时，您也可以立即发现问题，因为您必须选择所需的大多边形内的哪些多边形。
这解决起来相当复杂，我认为它超出了这个问题的范围。

【讨论】：

我没有按照你的想法...你能做一个演示吗？
这仅适用于这种非常简单的情况，这个问题比这要复杂得多，请参阅：codepen.io/anon/pen/OPBXjX
在这种情况下，我不确定你实际上想要如何分割你的多边形。对于凹多边形，你的问题对我来说真的没有意义......
如果你想做多边形裁剪（像这样：en.wikipedia.org/wiki/…），那么我相信它在 javascript 中的效率会非常低。看起来有一些库可以帮助你：polyk.ivank.net/?p=demos、sourceforge.net/projects/jsclipper

【解决方案2】：

为了解决这个问题，您可以将每个网格单元视为一个单独的多边形，并将它们与您的多边形一个接一个地相交，进行相交的算法描述为 here

请记住，对于每个网格单元，您可以得到任意数量的新多边形，请参见此案例：

【讨论】：