search

jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.
https://two.js.org
MIT License
8.29k stars 454 forks source link

Creating a hole inside a path #613

Closed simonhoss closed 2 years ago

simonhoss commented 2 years ago

Hello

I'm trying to create a hole for a path, but somehow it's not working. Any advice of what I'm doing wrong?

Here is my code example: https://codepen.io/simonhoss/pen/KKybOPG

Thanks for your effort and help! Simon

jonobr1 commented 2 years ago

Great question; when drawing things inside of others, the order of the anchors matter. In some programming contexts this is known as clockwise or counterClockwise`. You need to reverse the order (as in the anchors need to go counter clockwise) of the anchors like so: https://codepen.io/jonobr1/pen/mdqaNmq?editors=0010

simonhoss commented 2 years ago

Thanks this solved it.

Is there any reason why you don't use "oddeven" for this? Maybe better performance?

Now I have to figure the direction of my path's. Would it be interesting for you having such a functionality inside two? I mean handing over a Path object which determine if a path is clock or counter clock direction?

jonobr1 commented 2 years ago

Glad it helped and great question.

Currently Two simply passes off the "oddeven" to the underlying rendering environment (SVG or Canvas). This setup didn't add any overhead, but you bring up a good point. There could easily be a way to describe what you're saying so that the developer doesn't need to worry about the order of the points.

I think such functionality would fit well with this enhancement: https://github.com/jonobr1/two.js/issues/443

simonhoss commented 2 years ago

Thanks for your answer helped a lot