How to decompose 2d transform matrix and how to composite them back

Question

I am writing some vector shape transform demo , and I am stucked:

There is a transform matrix datas got from some shape :

matrix = [3.23891, -0.87126, 246.73324, 1.07431, 0.86589, 169.21047, 0, 0, 1]

Then I use a decomposeMatrix method (comes from here : https://frederic-wang.fr/decomposition-of-2d-transform-matrices.html) to split the matrix to translation,scale,rotation,skew , I make these values recorded in a new shape class , when I refresh the canvas , this shape instance will invoke a method to calculate its local matrix via these pose values, I thought it will return a almost same matrix with the matrix decomposed before, but not.

From the matrix I got there datas:

rotation: 0.32026899072894127
scale: {x: 3.412432386032404, y: 1.0961547154147515}
skew: {x: -0.16104628632010806, y: 0}
translation: {x: 246.73324584960938, y: 169.21047973632812}

I compared these datas with "https://frederic-wang.fr/decomposition-of-2d-transform-matrices.html" web page , they are same , and the web page demo can get the correct image pose result I expected.

So I tought maybe my matrix multiply method was wrong?

The matrix concat order is :

Local = Translate * Rotate * Skew * Scale

And I tried other concat order , such like T * R * Sc * Sk, but I still can not get correct result.

Dear family , can you help me to resolve this problem? 比心!

Answer 1

Thanks family! I resolve it! skew transform was wrong and the order should be Translate * Rotate * Scale * Skew