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,
                };
            }          
        }
    
  • 相关阅读:
    Applet
    Tutorial中代码的区别及不同效果
    Session
    代码解析&Filter用户授权例子
    Web的后台运作过程
    XML
    数据库
    spring常用注解
    spring mvc 常用注解
    @requestMapping
  • 原文地址:https://www.cnblogs.com/chencarl/p/10149059.html
Copyright © 2011-2022 走看看