简体   繁体   中英

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

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?

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.

笛卡尔坐标系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.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM