zoukankan      html  css  js  c++  java
  • 使用js从element的matrix推导transform的scale、rotate 和 translate参数

    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,
                };
            }          
        }
    
  • 相关阅读:
    配置rc.local开机自启动文件的疑问
    linux下使用shell查看apache IP访问量
    linux 查看剩余内存数
    linux ps 命令
    移动端资料大全
    git命令大全
    redis 应用场景
    TP框架中的多种方法代码(C,G,L,T,I,N,D,M,A,R,B,U,W,S,F,E)
    在linux上安装svn
    mysql 分表的实现方式
  • 原文地址:https://www.cnblogs.com/chencarl/p/10149059.html
Copyright © 2011-2022 走看看