Utilizzando riempimento pari-dispari su tela HTML

Question

Ci sono delle librerie open source (Javescript) che implementano regola di riempimento pari-dispari su tela. Se provo a implementare io stesso allora come complessa sarebbe (considerando caso generale che ha anche curve complesse) e sarebbe colpito dalle prestazioni (a causa di sovraccarico di farlo per ogni pixel in Javescript).

Quali sono i metodi per la conversione di riempimento pari-dispari a non-zero (considerando una soluzione generica che funziona per tutti i casi). Una volta il metodo che ho trovato è stato dividere la forma in tutti i poligoni non intersecanti e riempirli separatamente.

Un'opzione è usare SVG e disegnare l'SVG su tela, ma ho anche scoperto che il rendering SVG nativo è un po 'lento su iPad, ma SVG è lento anche quando lo disegno su tela HTML (su iPad)?

Grazie in anticipo

Answer 1

mi sono imbattuto in questa domanda in quanto stavo cercando per lo stesso qualche tempo fa. Cioè, usa una regola di riempimento "evenodd" all'interno di una tela HTML.

Dopo un po 'di ricerche e passando per mailing list e patch, ho notato che, come risulta, le versioni recenti di Firefox e Chrome hanno il supporto per questo, ma ognuna in un modo diverso, specifico per il browser.

In Firefox si tratta di una questione di usare il mozFillRule attribute. Esempio:

// 
// Firefox Example 
// 
// canv has the HTML canvas element 
var ctx = canv.getContext("2d"); 
ctx.fillStyle = "#ff0000"; 
ctx.mozFillRule = 'evenodd'; 
ctx.beginPath(); 
ctx.moveTo(100, 10); 
ctx.lineTo(40, 180); 
ctx.lineTo(190, 60); 
ctx.lineTo(10,60); 
ctx.lineTo(160,180); 
ctx.closePath(); 
ctx.fill(); 

In Chrome, lo si fa passando la stringa evenOdd come parametro al metodo fill. Esempio:

// 
// Chrome Example 
// 
// canv has the HTML canvas element 
var ctx = canv.getContext("2d"); 
ctx.fillStyle = "#ff0000"; 
ctx.beginPath(); 
ctx.moveTo(100, 10); 
ctx.lineTo(40, 180); 
ctx.lineTo(190, 60); 
ctx.lineTo(10,60); 
ctx.lineTo(160,180); 
ctx.closePath(); 
ctx.fill('evenodd'); 

Questi sono i due browser ho ricercato per, quindi non so circa lo stato di questo in altri browers. Speriamo che in un futuro non troppo lontano, saremo in grado di utilizzare questa funzione tramite il fillRule attibute che ora fa parte del HTML standard.

Answer 2

Vedi fill() method API:

void ctx.fill(); 
    void ctx.fill(fillRule); 
    void ctx.fill(path, fillRule); 

FillRule può essere "diverso da zero" o "evenOdd"
--- "diverso da zero": La regola di avvolgimento diverso da zero, che è la regola predefinita.
--- "evenOdd": La regola di avvolgimento evenOdd.

Compatibilità browser:
--- IE 11+, Firefox 31+, Chrome sono OK.
--- Non ho eseguito il test su IE 9/10.
--- Utilizzare ctx.mozFillRule = 'evenodd'; con il vecchio Firefox 30/30-.