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. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  2. zookeeper常用指令

    zk服务 bin 目录下常用的脚本解释 zkCleanup 清理 Zookeeper 历史数据,包括日志文件和快照数据文件 zkCli Zookeeper 的一个简易客户端 zkEnv 设置 Zook ...

  3. Python函数学习——初步认识

    函数使用背景 假设老板让你写一个监控程序,24小时全年无休的监控你们公司网站服务器的系统状况, 当cpu\memory\disk等指标的使用量超过阀值时即发邮件报警, 你掏空了所有的知识量,写出了以下 ...

  4. MongoDB索引管理-索引的创建、查看、删除

    索引是提高查询查询效率最有效的手段.索引是一种特殊的数据结构,索引以易于遍历的形式存储了数据的部分内容(如:一个特定的字段或一组字段值),索引会按一定规则对存储值进行排序,而且索引的存储位置在内存中, ...

  5. HDU 5113--Black And White(搜索+剪枝)

    题目链接 Problem Description In mathematics, the four color theorem, or the four color map theorem, stat ...

  6. python之斐波那契数列递归推导在性能方面的反思

    在各种语言中,谈到递归首当其冲的是斐波那契数列,太典型了,简直就是标杆 一开始本人在学习递归也是如此,因为太符合逻辑了 后台在工作和学习中,不断反思递归真的就好嘛? 首先递归需要从后往前推导,所有数据 ...

  7. c++ vector的内存释放

    c++中vector的一个特点是: 内存空间只会增长,不会减小.即为了支持快速的随机访问,vector容器的元素以连续方式存放,每一个元素都挨着前一个元素存储.设想,如果每次vector添加一个新元素 ...

  8. spring cloud(断路器——初学五)

    Feign使用Hystrix 因为feign已经依赖了hystrix,所以可以直接使用,无需添加再次添加依赖. 1.使用@FeignClient注解中的fallback属性指定回调类 package ...

  9. RecyclerView的简单使用

    使用 RecyclerView 要做下面这些操作, 1.在build.gradle添加 RecyclerView的依赖,因为RecyclerView不是内置在android系统中的,请注意版本要一致 ...

  10. 让Java线程池实现任务阻塞执行的一种可行方案

    Java的线程池一般是基于concurrent包下的ThreadPoolExecutor类实现的, 不过当我们基于spring框架开发程序时, 通常会使用其包装类ThreadPoolTaskExecu ...