How to get path of Bezier curves with coordinates of decimal value

Gondil

I need to get path of some vector shape which is transformed into Bezier curves. I have a 512x512 px canvas with 350x350 px letter "R" in the middle. I need to export somehow a coordinates of points of Bezier curves.

So I have that canvas with coordinates from 0,0 to 511,511 and some shape in it. But, when I save it as *.svg in the path are for example (M 256.124 373.811 l-85.544 -46.3289 c -21.8516,33.0922 -34.017,54.9238).

I understand that svg coordinate system differs from carthesian system. That real numbers are close to wanted decimal numbers but why there are negative numbers?

But I need coordinates of pixels in decimal format and from range 0,0 to 511,511. For example (M 256 377 C 23 532 123 43 123 352)

Is there a way to get path like that?

Gondil

I already decoded path in .svg from CorelDraw.

Firstly, Corel and most Graphic editors have carthesian coordinate system (point [0,0] is in bottom-left corner). On the other hand, SVG has different system with start point in top-left corner. From this, when I have canvas with size 512x512 px and place mouse on it, I see a point coordinates are for example [128,312] in the SVG path it will be point [128,200]. See the pictures below.

Carthesian coordinate system SVG

Next, path continues L-89,8385 -46,3289 C-22,9477,33,0922 -35,7249,54,9238 -38,4096,65,4971. This mean Line to point, which is 89.84 px smaller on the x-axis and 46.33 px smaller on the y-axis. So you basically deduct that numbers from the coordinates of current last point.

Lastly, C mean curve to, exactly cubic Beziér curve. This is quite strange. -22,9477,33,0922 means -22.95 px on x-axis and +33.09 px on y-axis for control point 1. As mentioned it is computed from last point on last curve. Next -35,7249,54,9238 is for control point 2 also computed from last point of last curve NOT from control point 1!! And finally -38,4096,65,4971 belongs to endpoint of current curve. Maybe you noticed that start point of curve is not mentioned. Start point is of course end point of last curve/line/...

To the very ending, you can see something like this in SVG path -1,95237,7,5638 -6,18545,13,9241 -12,7772,19,0808 -6,59057,5,07167 -11,3103,7,65002. These are next curves. There is no letter as L,C,M or any other but that are curves because there was C and no other letter to this point. Than you need to get 3 numbers like -1,95237,7,5638 to get next control point 1, control point 2 and end point.

Hope this will help somebody.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to draw each section of the blue Bezier curves with different color?

Circle approximations using Bezier curves

How to get a value in a file with coordinates in Java

How to fill a bezier path with gradient color

Gimp: How can I get the coordinates of path tool points?

How do I get a coordinates list from an svgpathtools bezier curve?

How to draw shapes along a bezier path

How to detect collision between object made of bezier curves and a circle?

How to clip a UIView with a bezier path?

Subdivide Bezier Curves

How to close path of two parallel quadratic Bezier curves where each starts with a MoveTo tag

How to Draw Shapes using Bezier Curves in a Flutter CustomPainter

How to create bezier curves for an arc with different start and end tangent slopes

How to get round value if value is in decimal in php?

How to get appropriate decimal/double currency value with decimal point?

How to expand shape created from a lot of bezier curves (JavaScript and canvas)

Unable to get rid of spike on bezier path

WPF path description for a sine curve using bezier curves

Biciycle wheel path and bezier curves

How to smooth the joint of lines in bezier path?

How to get coordinates for the center of Path in javafx?

How to draw image inside a circular bezier path

How to prevent loops in cubic Bezier curves

iOS: How to get route path between two coordinates

how to use bezier curves in cytoscape.js

Understanding how to draw SVG bezier curves by example

How to connect multiple bezier curves?

Bezier curves in Unity

How to draw a curve in Bezier Path?