nanosvg | Simple stupid SVG parser | Animation library
kandi X-RAY | nanosvg Summary
kandi X-RAY | nanosvg Summary
Simple stupid SVG parser
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of nanosvg
nanosvg Key Features
nanosvg Examples and Code Snippets
Community Discussions
Trending Discussions on nanosvg
QUESTION
I have a display.newCircle() and I want to fill it with a vector image. I know how to do this with a 'png' file, but it doesn't work with vectors. I am using an 'svg' file and to import it I use:
...ANSWER
Answered 2017-Sep-20 at 18:26Basically this worked out to be the answer.
QUESTION
I'm using the nanovg library to render a compound Bezier shape, but the nanosvg library doesn't tell me the winding direction, aka the solidity/hole-ness of each subpath in the compound shape.
What is a mathematical algorithm that will tell me which subpath is solid and which is a hole, given the Bezier points of the subpaths, assuming that all paths are nonintersecting?
I could compute the area of each subpath, sort by area, and alternative between solid and hole, but this only works if the paths form a subset chain, so drawing this compound shape would not be possible.
...ANSWER
Answered 2017-Sep-20 at 00:21The algorithm is the one described in the SVG fill-rule definition. Start from a point and draw one arbitrary ray to infinity (well, a line that ends outside the area you need to consider) and count the path crossings with one of the two methods nonzero and evenodd described.
Determining the count of crossings: Don't try to do this for subpaths in one go, but consider each path segment individually. The majority will have a count of zero, which is fine. This library has for example a function for computing the intersection points between a cubic Bezier and a line. Look at the source code, it is well documented. (Although it is not very clear which stance the author takes on copyright.)
Determining the path direction: You only have to determine whether the starting and end point of the segment are left or right of your ray.
- If both are on the same side, count one left-to-right and one right-to-left. (nonzero rule: 0, evenodd rule: +2)
- If the start point is left and the end point is right, either count one left-to-right (+1), or, for a cubic Bezier with three crossings, count two left-to-right and one right-to-left. (nonzero rule: +1, evenodd rule: +3)
- If the start point is right and the end point is left, for one crossing (nonzero rule: -1, evenodd rule: +1) or for three crossings (nonzero rule: -1, evenodd rule: +3)
- If the ray crosses a subpath just at a segment point, you have to avoid counting the crossing twice. The best way to avoid errors is to handle the two segments as if they were one, subtract one from the added count of crossings, and determine the side only for the overall start/end points.
In the end, for nonzero, a point is inside if the final count total is not zero. For evenodd, it is inside if the final count total is odd.
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install nanosvg
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page