I've been looking for a way to take the points from a SVG
and apply that in a Path2D
painter.
The parsing task is not my point here, the problem is understand how the points works in a canvas and how to apply it to a Path2D
.
For example, consider I have this SVG
tag:
<svg>
<path d = "
m 51.688 5.25
c 10 20 30 40 50 60
z">
</path>
</svg>
This just moves the drawer to the first point, draws a curve using these points and closes the path.
I tried to apply this to a Path2D
like this:
float x = 200, y = 200;
Path2D.Float painter = new Path2D.Float();
painter.moveTo(51.688+x, 5.25+y);
painter.curveTo(10+x, 20+y, 30+x, 40+y, 50+x, 60+y);
painter.closePath();
As the points from SVG
are relatives I summed x and y fields to points, but I got this result:
This was just a little test to check if the drawing works and I need use this with more complex paths, and as I need to draw up to 50 SVG paths Batik
was not a good approach, considering it was so slow to render only one svg image of my project.
Then what I need to know is if is possible to draw the SVG path using its points directly like this. If yes, how to fix my ideia? If not, how a good way to draw the path? P.s.: i'm targeting swing
.
If you would like to understand how SVG path commands work, the best source is to read the SVG specification. It is all explained clearly there. I'm not sure why you came here to ask first.
Lower case path commands (like c
) are relative. Their coordinates should be considered offsets from the end point of the last path segment.
So the equivalent to your path description should be:
painter.moveTo(51.688, 5.25);
painter.curveTo(51.688 + 10, 5.25 + 20, 51.688 + 30, 5.25 + 40, 51.688 + 50, 5.25 + 60);
painter.closePath();
(I've left out your x
and y
parameters here for the sake of clarity).