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

时间：2020-12-23 13:08:04

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,

            };

        }

    }

相关文章