Uso del relleno par impar en el lienzo HTML

Question

¿Hay alguna biblioteca de código abierto (JaveScript) que implemente una regla de relleno par impar en el lienzo? Si intento implementarlo yo mismo, entonces, ¿qué tan complejo sería (teniendo en cuenta el caso general que también tiene curvas complejas) y afectaría el rendimiento (debido a la sobrecarga de hacerlo por cada píxel en JaveScript).

¿Cuáles son los métodos para convertir el relleno par impar en bobinado distinto de cero (considerando una solución genérica que funcionará para todos los casos). Una vez el método que encontré fue dividir la forma en todos los polígonos que no se intersectan y llenarlos por separado.

Una opción es usar SVG y dibujar el SVG en el lienzo, pero también encontré que el renderizado SVG nativo es un poco lento en el iPad, pero ¿es SVG lento incluso cuando lo dibujo en un lienzo HTML (en el iPad)?

Gracias de antemano

Answer 1

me encontré con esta pregunta, ya que estaba buscando la misma hace algún tiempo. Es decir, utilice una regla de relleno "evenodd" dentro de un lienzo HTML.

Después de investigar un poco, y revisar listas de correo y parches, noté que, como resultado, las versiones recientes de Firefox y Chrome tienen soporte para esto, pero cada uno de una manera diferente, específica del navegador.

En Firefox se trata de utilizar el mozFillRule attribute. Ejemplo:

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

En Chrome, lo haces pasando la cadena EVENODD como un parámetro para el método fill. Ejemplo:

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

Estos son los dos navegadores que hemos buscado para, así que no sé sobre el estado de este en otros navegadores. Afortunadamente, en un futuro no muy lejano, podremos utilizar esta función a través del atributo fillRule que ahora forma parte del HTML standard.

Answer 2

Ver fill() method API:

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

fillRule puede ser "nulo" o "EVENODD"
--- "no cero": La regla sinuoso distinto de cero, que es la regla por defecto.
--- "evenodd": La regla de enrollamiento par impar.

Compatibilidad del navegador:
--- IE 11+, Firefox 31+, Chrome están bien.
--- No probé en IE 9/10.
--- Use ctx.mozFillRule = 'evenodd'; con el viejo Firefox 30/30-.