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

    设置transform返回的是matrix    

    有些时候我们只是设置简单的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),和原坐标矩阵乘法如下:

       

    通过计算我们得到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个参数,它表示的是一个矩阵,数值结果为矩阵的水平排列:

       

    它的矩阵乘法形变如下:    

       

    通过计算得到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轴方向的位移,那么可以很容易的写出匹配代码:

    1. var getTransformByMatrix= function(translateString) {
    2.     var matrix = translateString.match(/matrix(3d)?\((.+?)\)/);
    3.     var is3D = matrix && matrix[1];
    4.     if (matrix) {
    5.         matrix = matrix[2].split(",");
    6.         if (is3D === "3d")
    7.             matrix = matrix.slice(12, 15);
    8.         else {
    9.             matrix.push(0);
    10.             matrix = matrix.slice(4, 7);
    11.         }
    12.     } else {
    13.         matrix = [0, 0, 0];
    14.     }
    15.     var result = {
    16.         x: parseFloat(matrix[0]),
    17.         y: parseFloat(matrix[1]),
    18.         z: parseFloat(matrix[2])
    19.     };
    20.     return result;
    21. };
    回到顶部
    我要评论

    所有评论

      相关文章