带孔的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); 

它所有的作品，我也得到了一些三角形，但我不希望他们越过内侧多边形。 当画在画布上返回的三角形，这是我的结果：

我试着用搜索引擎很多，并没有发现任何很好的例子，还可以通过在github earcuts测试看去，却wheren't能从他们身上得到很多。

这个例子是非常基本的，所以我想有人对这个库的知识可能会立即看到我做错了什么。

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 

绿党指数是数组索引/尺寸（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 

UPDATE

我认为这个问题是当你画的多边形你所得到的指标不正确。

要绘制多边形

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