欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-30 17:56:16
transform 网上很多都只介绍了还原角度和缩放的参数,但是没有就偏移量的计算,自己还原了一下公式的意义,进行了公式的反推,具体的推到过程就不详叙了,可以参看w3c的矩阵含义。 直接上干货。 ~~~ function getElementCss(e, name) { var st = windo ......

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,
            };
        }          
    }