当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用js从element的matrix推导transform的scale、rotate 和 translate参数

使用js从element的matrix推导transform的scale、rotate 和 translate参数

2018年12月20日  | 移动技术网IT编程  | 我要评论

transform

网上很多都只介绍了还原角度和缩放的参数，但是没有就偏移量的计算，自己还原了一下公式的意义，进行了公式的反推，具体的推到过程就不详叙了，可以参看w3c的矩阵含义。

直接上干货。

    function getelementcss(e, name)
    {
        var st = window.getcomputedstyle(e, null);
        return st.getpropertyvalue(name);
    }
    function gettransformpara(elem)
    {
        // var elem = document.getelementbyid(id);
        var tr = getelementcss(elem, "-webkit-transform");  
        if(tr!="none")
        {
            var values = tr.split("(")[1].split(")")[0].split(",");
            var a = values[0];
            var b = values[1];
            var c = values[2];
            var d = values[3];
            var e = values[4];
            var f = values[5];
            var scale1 = math.sqrt(a * a + b * b);
            var scale2 = math.sqrt(c * c + d * d);
            var angle = math.atan2(b, a) * (180.0 / math.pi);
            e = parsefloat(e);
            f = parsefloat(f);              
            var radian = -math.pi/180.0*angle;
            var lastx = math.cos(radian)*e - math.sin(radian)*f;
            var lasty = math.sin(radian)*e + math.cos(radian)*f; 
            return {
                scalex: scale1,
                scaley: scale2,
                angle: angle,
                movx: lastx,
                movy: lasty,
            };
        }
        else
        {
            return {
                scalex: 1,
                scaley: 1,
                angle: 0,
                movx: 0,
                movy: 0,
            };
        }          
    }

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网