Arcs processing problem about svgpath HOT 14 CLOSED

Here is the exact way to reproduce this one:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<path d="M148.7 277.9A228.7 113.2 90 1 0 159.3 734.8L837.5 734.8A228.5 113 90 1 0 837.5 277.9L159.3 277.9A228.5 113 90 0 0 148.7 277.9Z" />
</svg>

var s = 'M148.7 277.9A228.7 113.2 90 1 0 159.3 734.8L837.5 734.8A228.5 113 90 1 0 837.5 277.9L159.3 277.9A228.5 113 90 0 0 148.7 277.9Z'

console.log(new SvgPath(s).scale(1, -1).translate(0, 850).abs().round(1).toString())
// M148.7 572.1A228.7 113.2 18.383 1 0 159.3 115.2L837.5 115.2A113 228.5 0 1 0 837.5 572.1L159.3 572.1A113 228.5 0 0 0 148.7 572.1Z

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 1000">
<path d="M148.7 572.1A228.7 113.2 18.383 1 0 159.3 115.2L837.5 115.2A113 228.5 0 1 0 837.5 572.1L159.3 572.1A113 228.5 0 0 0 148.7 572.1Z" />
</svg>

from svgpath.

Looks like missed sign somewhere.

@kpym probably your fork has the same bug - flipping can trash arcs.

from svgpath.

@puzrin Probably, if the problem is in a2c (I have not changed a2c), but it looks like the problem is in the way the transform works with arc. I'll check this ...

from svgpath.

100% not in a2c. See #23 (comment). There are 2 problems:

• use improper part of esllipsis
• distortion due presition loss (in internal division 0 / 0)

@rlidwka is investigating too.

from svgpath.

@puzrin I have not checked, but if I remember well the sweep-flag is not changed by the transform. But it should be, because if the transformation is orientetion reversing (like scale(1,-1)) the positif direction change and the sweep-flag should be reversed ... to be checked.

from svgpath.

@kpym, I believe the first issue I found is here:
https://github.com/fontello/svgpath/blob/master/lib/ellipse.js#L70-L77

L is -2.41e-12, l1 is 52303.68999999999, K is 52303.689999999995, and so it divides numbers both very close to zero.

If you add rotate(0.00001), this issue goes away.

But there is a second issue somewhere, because arc does not actually flip. Maybe it has something to do with sweep-flag, thanks for the suggestion.

from svgpath.

Here is the attempt to fix precision error (is there a better way?):
b50ec17

As for sweep-flag, you're right, it needs to be flipped when one axis is flipped (e.g. scale(1, -1), but not scale(-1, -1)). Trying to figure out the exact conditions now.

from svgpath.

https://github.com/fontello/svgpath/blob/master/lib/matrix.js#L47

sx * sy < 0 ?

from svgpath.

The exact condition is what I said: if the transform is orientation
preserving. This is equivalent to the determinant of the linear part is
positif.
Le 9 mars 2016 15:40, "Alex Kocharin" [email protected] a écrit :

Here is the attempt to fix precision error (is there a better way?):
b50ec17
b50ec17

As for sweep-flag, you're right, it needs to be flipped when one axis is
flipped (e.g. scale(1, -1), but not scale(-1, -1)). Trying to figure out
the exact conditions now.

—
Reply to this email directly or view it on GitHub
#23 (comment).

from svgpath.

Sorry I'm answering from my phone and I'm not very concentrated... I'll try to be more clear: if the determinant is negative, the seep-flag should be reversed.

from svgpath.

@kpym is my answer correct #23 (comment) ?

[ sx, *, *, sy, *, * ] => need to check if sx*sy is negative or not?

from svgpath.

@puzrin No. This is only valid for diagonal matrix. For general matrix you have to use the determinant.

from svgpath.

The determinant is m[0]×m[3]-m[1]×m[2].

from svgpath.

Seems to work now.

@kpym big thanks for your help!

from svgpath.