很多时候我们给元素设置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轴方向的位移,那么可以很容易的写出匹配代码:

var getTransformByMatrix= function(translateString) {
    var matrix = translateString.match(/matrix(3d)?\((.+?)\)/);
    var is3D = matrix && matrix[1];
    if (matrix) {
        matrix = matrix[2].split(",");
        if (is3D === "3d")
            matrix = matrix.slice(12, 15);
        else {
            matrix.push(0);
            matrix = matrix.slice(4, 7);
        }
    } else {
        matrix = [0, 0, 0];
    }
    var result = {
        x: parseFloat(matrix[0]),
        y: parseFloat(matrix[1]),
        z: parseFloat(matrix[2])
    };
    return result;
};
回到顶部
我要评论

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

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

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字