如何使用Path2D（或任何Shape抽屉）在Java中绘制SVG路径点？

Question

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? Ps: i'm targeting swing .

Answer 1

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).