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,
                };
            }          
        }
    
  • 相关阅读:
    yellow joke 3
    JavaScript下拉菜单(1)
    Java程序员面试三十二问
    Oracle里时间的应用
    ·Java读取properties文件
    Web 窗体用户控件
    怎么解决层被flash挡住的问题?
    自定义控件
    关于mysql中的DDL,DML,DQL和DCL
    自定义一个简单连接池以及常见连接池的使用
  • 原文地址:https://www.cnblogs.com/chencarl/p/10149059.html
Copyright © 2011-2022 走看看