Stosowanie wypełnienia parzyste-nieparzyste na kanwie HTML

Question

Czy istnieją biblioteki Open Source (JaveScript), które implementują parzyste reguły nieparzyste w obszarze roboczym. Jeśli spróbuję go zaimplementować samodzielnie, to jak złożony byłby (biorąc pod uwagę ogólny przypadek, który również ma skomplikowane krzywe) i uderzyłby w wydajność (ze względu na narzut związany z wykonaniem tego dla każdego piksela w JaveScript).

Jakie są metody konwersji wypełnienia parzyste-nieparzyste na uzwojenie niezerowe (biorąc pod uwagę ogólne rozwiązanie, które będzie działać w każdym przypadku). Raz znalazłem metodę, aby podzielić kształt na wszystkie nie przecinające się wielokąty i wypełnić je osobno.

Jedną z opcji jest użycie SVG i narysowanie SVG na płótnie, ale odkryłem również, że natywne renderowanie SVG jest nieco powolne na iPadzie, ale czy jest wolne od SVG, nawet gdy rysuję je na płótnie HTML (na iPadzie)?

Dzięki z góry

Answer 1

natknąłem to pytanie jak szukałem taki sam jakiś czas temu. Oznacza to, że używaj reguły wypełnienia "evenodd" wewnątrz płótna HTML.

Po drobnych badaniach i przeglądaniu list i łatek, zauważyłem, że, jak się okazało, najnowsze wersje Firefoksa i Chrome obsługują to, ale każda z nich w inny sposób, zależnie od przeglądarki.

W przeglądarce Firefox jest to kwestia korzystania z mozFillRule attribute. Przykład:

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

W Chrome to zrobić przekazując ciąg evenodd jako parametr do metody fill. Przykład:

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

Oto dwie przeglądarki, których szukałem, więc nie wiem o tym w innych przeglądarkach. Miejmy nadzieję, że w niedalekiej przyszłości będziemy mogli korzystać z tej funkcji za pośrednictwem identyfikatora fillRule, który jest teraz częścią HTML standard.

Answer 2

Zobacz fill() method API:

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

fillRule może być "niezerowe" lub "evenodd"
--- "niezerowe": niezerowych reguła kręte, który jest zasada domyślna.
--- "evenodd": Reguła wyrównania parzystości nieparzystej.

Zgodność przeglądarki:
--- IE 11+, Firefox 31+, Chrome działa prawidłowo.
--- Nie testowałem w IE 9/10.
--- Użyj ctx.mozFillRule = 'evenodd'; ze starym Firefoksem 30/30-.