很多时候我们给元素设置transform,但是我们去获取这个transform的时候,返回的却是matrix,你可以通过下面这个demo试试:

有些时候我们只是设置简单的traslate/transate3d来控制一个对象的位移,但是却返回matrix/matrix3d,因此如何从中提取出我们设置的位移就很有必要了。

关键知识点

我们知道transform是通过matrix矩阵变换来达到变形的目的的,matrix能够做很复杂的变换,例如移动,缩放,旋转,斜切等,因此matrix的最终结果也是很复杂的,例如一个div,先旋转了10度,再缩放2倍数,再移动10px,20px,再旋转-20度。你想通过最终matrix的结果来推倒整个变形过程是很困难的。但是如果我们已知某个固定的变形,例如移动,缩放,旋转等,那么还是可以推倒出原先设置的值的。下面我们就讲解最常用最简单的形变:translate/transalte3d,来看看如何通过matrix得到最初设置的数值。

matrix获取translate数值

二纬的形变matrix有6个数,分别用a,b,c,d,e,f表示,即matrix(a,b,c,d,e,f),和原坐标矩阵乘法如下:

background Layer 1 a b 0 0 1 c d e f x y 1 a*x b*x 0 0 1 c*y d*y e f

通过计算我们得到x1=a*x+c*y+e,y1=b*x+d*y+f,这是什么意思呢?假如一个div水平移动了10px,垂直移动了20px,那么x1=x+10,y1=y+20,这样我们可以得到a=1,b=0,c=0,d=1,e=10,f=20,也就是matrix(1,0,0,1,10,20)。

我们可以看到matrix的最后两位表示水平移动距离和垂直移动距离。

matrix3d获取translate3d数值

matrix3d比matrix要复杂,一共有16个参数,它表示的是一个矩阵,数值结果为矩阵的水平排列:

background Layer 1 1 0 2 0 0 1 0 3 0 4 1 0 0 0 5 1 变形矩阵 matrix3d(1,0,2,0,0,1,0,3,0,4,1,0,0,0,5,1) 第一排 第二排 第三排 第四排

它的矩阵乘法形变如下:

background Layer 1 a e i m b f j n c g k o d h l p x y z 1 a*x+b*y+c*z+d e*x+f*y+g*z+h i*x+j*y+k*z+l m*x+n*y+o*z+p =

通过计算得到x1=a*x+b*y+c*z+d,y1=e*x+f*y+g*z+h,z1=i*x+j*y+k*z+l,m*x+n*y+o*z+p=1。例如一个div,水平方向移动了10px,垂直方向移动了20px,z轴方向移动了30px,那么x1=x+10,y1=y+20,z1=z+30,可以得到a=1,b=0,c=0,d=10,e=0,f=1,g=0,h=20,i=0,j=0,k=1,l=30,m=0,n=0,o=0,p=1。那么最后的结果为matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,10,20,30,1),我们可以发现,matrix3d的第13位为水平位移,14位为垂直位移,15位为z轴位移。

总结

通过上面的分析,我们大概可以知道matrix的最后两位表示水平和垂直方向的位移,matrix3d的13,14,15位分别表示水平,垂直,z轴方向的位移,那么可以很容易的写出匹配代码:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字