Extracting skew, rotate, scale from the generic transform

[asturur]

Hello, i was following the changes and noticed this:

I had the same exact problem when dealing with fabricjs transform and implementing skew support, and i found this solution, that i also posted on stack oveflow:

https://stackoverflow.com/a/32125700/2655678

With that js code, that can hopefully written in faster C, you can actually decompose a generic 2x3 matrix in a set of transforms that are an angle, a scale on X and Y, a skew on X, a 0 skew on Y and a translation.

I hope it can be used to fix that comment i found in the commits.

[zbjornson]

Thanks for the reference!

Shortly after I added that comment, I also found a method in the CSS spec: 14.2.1 Decomposing a 2D matrix and 12.2.2. Decomposing a 3D matrix. Their method for extracting the scale is the same as the one I used, which gives a discrepancy with browser behavior. Will give your method a try.

[asturur]

So to add more details that code work in this way:
https://jsfiddle.net/10c54375/

The decomposition is valid when the resulting pieces are applied in this order:

translate, rotate, scale and skew.

If you scroll the fiddle down you see the second canvas has the same drawing of the first

There are of course edge cases, like a matrix [-1, 0, 0, -1, 0 ,0] that is a flip on both axis, often gets translated as no flip but rotation of 180 degrees (they are sort of equivalent )
Hopefully constraint can be added if this behaviour is not good

[zbjornson]

This got fixed in #1038!