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

使用js从element的matrix推导transform的scale、rotate 和 translate参数的更多相关文章

  1. How to get the MouseEvent coordinates for an element that has CSS3 Transform?

    I want to detect where a MouseEvent has occurred, in coordinates relative to the clicked element. Wh ...

  2. PCL点云库:对点云进行变换(Using a matrix to transform a point cloud)

    点云数据可以用ASCII码的形式存储在PCD文件中(关于该格式的描述可以参考链接:The PCD (Point Cloud Data) file format).为了生成三维点云数据,在excel中用 ...

  3. (vue.js)Vue element tab 每个tab用一个路由来管理?

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  4. FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  5. js实现element中可清空的输入框(2)

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

  6. CSS动画:Transform中使用频繁的scale,rotate,translate动画

    动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...

  7. transform:scale()妙用——当下拉列表,图片无缝拉升 动画效果

      遇到问题 昨天在做音乐播放器的时候,遇到了一个这样的界面: 当下拉scroll区域列表的时候,图片会按照比例无缝连接放大,就想下面的效果图一样 分析问题 从上图可一看到,页面主要由两个div组成, ...

  8. HTML5 CSS3 Transform 笔记 (scale不起作用)

    Transform的 scale属性不能作用于 inline元素上,例如span 并且动画 animation  也不能作用于inline元素上 可以给span加display:inline-bloc ...

  9. js方法用来获取路径传参上所带的参数

    //js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...

随机推荐

  1. UBUNTU14.0.4安装eclipse

    jdk工具下载地址 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 点击这个下载 ...

  2. Spring AOP的实现及源码解析

    在介绍AOP之前,想必很多人都听说AOP是基于动态代理和反射来实现的,那么在看AOP之前,你需要弄懂什么是动态代理和反射及它们又是如何实现的. 想了解JDK的动态代理及反射的实现和源码分析,请参见下面 ...

  3. CURL超时时间设置

    一次完整的http请求,一般包含三个步骤: 通过DNS把域名解析成IP 通过IP地址连接到目标主机 获取目标主机数据(1.给目标主机输出http请求头,以\r\n\r\n结尾:2.获取目标主机传过来的 ...

  4. 使用 maven-assembly-plugin 打包项目

    此种方式可避免resource节点对compile阶段的影响,compile阶段会读取resource节点的信息但是不会读取assembly的配置文件 1. pom文件 <?xml versio ...

  5. python中使用for循环,while循环,一条命令打印99乘法表

    用for循环打印九九乘法表: 1 2 3 4 5 6 for i in range (1,10):     for j in range(1,10):         print(j,"x& ...

  6. [视频]K8软件破解脱壳入门教程

    [视频]K8软件破解脱壳入门教程 链接:https://pan.baidu.com/s/1aV9485MmtRedU6pzyr--Vw 提取码:vbak C:\Users\K8team\Desktop ...

  7. python中合并数组的方法

    一.数组纵向合并 1.使用np.vstack()函数 [code] #数组 a = [[1,2,3],[4,5,6]] b = [[1,1,1],[2,2,2]] #纵向合并 c = np.vstac ...

  8. 树莓派安装vnc server并设置自启动

    在SSH终端输入sudo raspi-config, 这里需要打开几个选项: expand_rootfs – 将根分区扩展到整张SD卡; change_pass – 默认的用户名是pi,密码是rasp ...

  9. U盘上安装Ubuntu系统 便捷式系统 - 赖大大

    简单介绍: U盘可以作为电脑的磁盘使用,在U盘上安装Ubuntu系统,只要有电脑,就可以轻松打开自己的系统, 方便又快捷,非常适合出差工作,学习使用. 另外,插入U盘后,需要我们就入电脑的Blos模式 ...

  10. LearnOpenGL学习笔记(六)——纹理单元

    #version 330 core out vec4 FragColor; in vec3 ourColor; in vec2 TexCoord; uniform sampler2D ourTextu ...