Pixi.js: How to set fillRule of PIXI Graphics ?

Created on 14 Nov 2016 · 10Comments · Source: pixijs/pixi.js

in HTML5 Canvas , when draw polygon , there are 2 fillRules :

fillRule:
The algorithm by which to determine if a point is inside a path or outside a path.
Possible values:
"nonzero": The non-zero winding rule, which is the default rule.
"evenodd": The even-odd winding rule.

How to do that in PIXI ? and Which algorithm is used in PIXI ?

🤔 Question

Source

finscn

👍2

Most helpful comment

the terminology of fillRule is 『winding rule』：
https://en.wikipedia.org/wiki/Nonzero-rule
https://en.wikipedia.org/wiki/Even-odd_rule

There is an article talk about it with OpenGL : http://www.glprogramming.com/red/chapter11.html

If PIXI support this feature , I think it could help for creating a polygon with holes.
And it may be more fast than polygon triangulation in js with earcut I think.

finscn on 14 Nov 2016

👍3

All 10 comments

the terminology of fillRule is 『winding rule』：
https://en.wikipedia.org/wiki/Nonzero-rule
https://en.wikipedia.org/wiki/Even-odd_rule

There is an article talk about it with OpenGL : http://www.glprogramming.com/red/chapter11.html

If PIXI support this feature , I think it could help for creating a polygon with holes.
And it may be more fast than polygon triangulation in js with earcut I think.

finscn on 14 Nov 2016

👍3

Could you help me ？ @englercj @GoodBoyDigital

finscn on 9 Jan 2017

I think the tessellation that article describes is using GLU, which we don't have in WebGL. Not sure about the winding rules, I'm unfamiliar with the Graphics code.

englercj on 20 Feb 2017

Thanks.

finscn on 20 Feb 2017

Having the ability to control the Winding Rule would really help when integrating with backend 2d libraries like java.awt.geom.

bobby on 6 Jul 2018

Need this +1

jdelrue on 25 Apr 2019

In case this is useful to anyone, I have some working code (not using PIXI but using WebGL) which draws polygons with an even-odd winding rule: see https://github.com/pixijs/pixi.js/issues/891#issuecomment-473567390

It uses libtess.js to convert the polygon to a list of triangles that make up the filled regions.