# 前端 · 深入理解 transform 函数的计算原理 ②

《前端 · 深入理解 transform 函数的计算原理 ①》

transform="rotate(-10 50 100) translate(-36,45.5) matrix(1,2,3,4,5,6) skewX(40) scale(1 0.5)"

transform="matrix(1.33,1.80,2.38,2.46,-38.19,66.30)"

① 将各个变化函数转化为对应的 matrix 形式
② 将各个 matrix 按顺序连乘，得到最终结果

\begin{aligned} M_{result} &= M_{1}·M_{2} \\ &= \begin{pmatrix} a_{1} & c_{1} & e_{1} \\ b_{1} & d_{1} & f_{1} \\ 0 & 0 & 1 \\ \end{pmatrix} ·\begin{pmatrix} a_{2} & c_{2} & e_{2} \\ b_{2} & d_{2} & f_{2} \\ 0 & 0 & 1 \\ \end{pmatrix} \\ &= \begin{pmatrix} a_{1}*a_{2}+c_{1}*b_{2}+e_{1}*0 & a_{1}*c_{2}+c_{1}*d_{2}+e_{1}*0 & a_{1}*e_{2}+c_{1}*f_{2}+e_{1}*1 \\ b_{1}*a_{2}+d_{1}*b_{2}+f_{1}*0 & b_{1}*c_{2}+d_{1}*d_{2}+f_{1}*0 & b_{1}*e_{2}+d_{1}*f_{2}+f_{1}*1 \\ 0*a_{2}+0*b_{2}+1*0 & 0*c_{2}+0*d_{2}+1*0 & 0*e_{2}+0*f_{2}+1*1 \\ \end{pmatrix} \\ &= \begin{pmatrix} a_{1}*a_{2}+c_{1}*b_{2} & a_{1}*c_{2}+c_{1}*d_{2} & a_{1}*e_{2}+c_{1}*f_{2}+e_{1} \\ b_{1}*a_{2}+d_{1}*b_{2} & b_{1}*c_{2}+d_{1}*d_{2} & b_{1}*e_{2}+d_{1}*f_{2}+f_{1} \\ 0 & 0 & 1 \\ \end{pmatrix} \\ \end{aligned}

python 写，核心就是这一行：

m_result = {'a': m1['a'] * m2['a'] + m1['c'] * m2['b'], 'b': m1['b'] * m2['a'] + m1['d'] * m2['b'],
'c': m1['a'] * m2['c'] + m1['c'] * m2['d'], 'd': m1['b'] * m2['c'] + m1['d'] * m2['d'],
'e': m1['a'] * m2['e'] + m1['c'] * m2['f'] + m1['e'],
'f': m1['b'] * m2['e'] + m1['d'] * m2['f'] + m1['f']}