earcut.js 带孔的三角剖分

Question

我正在尝试使用 earcut 库进行一些三角测量。我发现这个库的文档很薄，所以希望有人有这个库的经验，可以帮助我解决这个问题。

我想要实现的是用一个内部多边形对一个多边形进行三角剖分，我想将其威胁为一个洞。对于这个例子，我有一个简单的方形多边形，里面有一个较小的方形多边形。

我理解 earcut 输入格式的方式是使用这个数组来处理它：

var a = [
    [[0,100],[100,100],[100,0],[0,0]], //outer polygon
    [[25,25],[75,25],[75,75],[25,75]] //hole
]
var toProcess = earcut.flatten(a);
var result = earcut(toProcess.vertices, toProcess.holes, toProcess.dimensions);

一切正常，我得到了一些三角形，但我不希望它们穿过内部多边形。在 canvas 上绘制返回的三角形时，这是我的结果：

我尝试了很多谷歌搜索，但没有找到任何好的例子，还查看了 github 上的 earcuts 测试，但也无法从中获得太多信息。

该示例非常基础，所以我想了解该库的人可能会立即看出我做错了什么。

Answer 1

从 github 页面开始，它采用平面数组，以便为您的示例进行三角剖分，第二个数组指向孔，从第二个数组的第一个索引到末尾的所有顶点是洞

var v = [[[0,100],[100,100],[100,0],[0,0]], //outer polygon
[[25,25],[75,25],[75,75],[25,75]]],

变成

var flat =     [0,100,100,100,100,0,0,0,25,25,75,25,75,75,25,75]
                |     |        |    |   |     |     |     |
// vert index   0     1        2    3   4     5     6     7

顶点索引是数组索引/维度（二维维度 = 2）

然后打电话

var poly = earcut(flat,[4]); //points to the hole starting at the 4th vert to the 7th

两个洞

var flat =     [0,100,100,100,100,0,0,0,25,25,75,25,75,75,25,75, 2,2,7,2,7,7,2,7]
var poly = earcut(flat,[4,8]); // creates two holes 
                               // using verts 4,5,6,7 first hole
                               // uning verts 8,9,10,11 second hole

更新

我认为问题是当您绘制多边形时，您得到的索引不正确。

绘制多边形

var v = toProcess.vertices
for(var i = 0; i < result.length; i += 3){
    ctx.beginPath();
    ctx.moveTo(v[result[i]*2],v[result[i]*2+1])
    ctx.lineTo(v[result[i+1]*2],v[result[i+1]*2+1])
    ctx.lineTo(v[result[i+2]*2],v[result[i+2]*2+1])
    ctx.closePath();
    ctx.stroke();
}

earcut.js 带孔的三角剖分

earcut.js triangulation with holes

javascript

geometry

canvas

polygons

triangulation