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);

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

我已经尝试了很多google搜索并没有找到任何好的例子，也看了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

Verts索引是数组索引/维度（2d维度= 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();
}