earcut.js triangulation avec des trous

Question

Je tente de faire une certaine triangulation en utilisant la bibliothèque d'oreille. Je trouve la documentation sur cette bibliothèque très mince, donc j'espère que quelqu'un a de l'expérience avec la bibliothèque et peut m'aider avec cela. Ce que j'essaye de réaliser est de trianguler un polygone avec un polygone intérieur que je veux menacer comme un trou. Pour cet exemple, j'ai un polygone carré simple, et un polygone carré plus petit à l'intérieur.

La façon dont je compris le format d'entrée earcut gérerait en utilisant ce tableau:

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

tout cela fonctionne et je reçois des triangles, mais je ne voudrais pas les attendre à traverser le polygone intérieur. Lors de l'élaboration des triangles retournés sur une toile, ceci est mon résultat:

J'ai essayé googler beaucoup et n'a pas trouvé de bons exemples, également examiné par des tests de earcuts sur GitHub, mais wheren't pouvoir obtenir beaucoup d'eux non plus.

L'exemple est assez basique, donc je suppose que quelqu'un ayant des connaissances dans cette bibliothèque verrait probablement ce que je fais de mal immédiatement.

Answer 1

Sur la page GitHub il faut des tableaux plats afin d'obtenir la triangulation pour votre exemple, avec le second tableau montrant les trous, tous les verts du premier indice du second tableau à la fin est le trou

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

devient

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 

index Verts est index de tableau/dimensions (dimensions 2d = 2)

l'appel

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

Pour deux trous

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 

MISE À JOUR

Je pense que le problème est quand vous dessinez les polys que vous obtenez les index incorrect.

Pour tirer les polys

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