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

Question

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

我想将此多边形现在拆分为多个多边形（基于网格）

因此，我获得了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>

Answer 1

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

• 如果它是多边形的一角，则可以忽略它。
• 如果它在您的多边形之外，您可以忽略它。
• 如果它在您的多边形内部，则该点的每一侧都有平凡的4个多边形。然后，它取决于您希望如何处理多边形内有多个网格点的情况。

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

顺便说一下：你不需要考虑多边形之外的琐碎网格点（x坐标高于或小于多边形的最大/最小x坐标的那些以及y坐标高于或小于最大值的那些） min y-coordiantes of the polygon of。）

编辑：我拍了这张图片：

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

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

Answer 2

要解决此问题，您可以将每个网格单元视为一个单独的多边形，并将它们与您的多边形逐个相交，描述的交叉算法是here

请记住，对于每个网格单元格，您可以获得任意数量的新多边形，请参阅以下情况：