konvajs/konva

Overlapping shape fill got "removed". Evenodd issue?

CPatchane opened this issue ยท 3 comments

Hello here ๐Ÿ‘‹

It's more a question than a bug but I would like to know if it was possible to avoid that the fill of the shape is being removed when it's overlapping itself.

Here is the sandbox that I used for this issue.

My need is to draw a contour of this line:
Screenshot 2024-02-02 at 16 48 09

But in the sandbox you can see that I got this:
Screenshot 2024-02-02 at 16 48 44

The contour points are not perfect compared to the original shape but it's correct except that the fill seems to be removed at some places where the shape is overlapping on itself. I expect something similar when you draw a classical line, when I have "painted" a place, it shouldn't be removed when I pass again on it.

Is it possible to fix that using konva or the Canvas API?

Note: I need to draw a contour to then apply that to a clipFunc, so I can't rely on the stroke + strokeWidth anymore.

Thanks a lot by advance!

Are you sure your computeContour is correct?

I think, it's not perfect but I was expecting to not see those empty filling, here is what I have when keeping only the borders:
Screenshot 2024-02-06 at 14 22 53

But maybe I'm wrongly thinking this as a brush (when you pass at a point, it should always be painted like in Photoshop) instead of a shape filling after being computed (filling the shape above seems to make sense here) ๐Ÿค”

Oh, after thinking again about this contour function, I get a better result by making sure to close the shape when the vector directions change.
Screenshot 2024-02-06 at 14 37 38
Screenshot 2024-02-06 at 14 37 45

The result is much better and it solves this problem at least. Thank you very much for this little help :)