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にできますそれらからも多くを得る。

この例はかなり基本的なので、私はこのライブラリの知識を持っている人が、おそらく私が間違っていることをすぐに見ていると思います。二番目の配列は、穴を指しと、あなたの例のために三角測量を取得するので、それはフラットアレイをとるgithubのページから

Answer 1

は、末端に二番目の配列の最初のインデックスから全てVertsには穴

あります

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 

2用の穴

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