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. Word中带圈数字

    写论文时常常要求输入带圈数字,先在Word中输入代码,选中代码后按Alt+X(然后再粘贴到Excel中) 符号 代码⓪ 24ea① 2460② 2461③ 2462④ 2463⑤ 2464⑥ 2465 ...

  2. CentOS添加明细路由

    网络架构图   根据最近为客户设计的网络架构,简单的梳理一个网路架构图,当然实际上的网络架构要比这个架构图复杂的多,咱们这边只是用这个图作为一个简单的示例. 拓扑分析   我们要实现专线两端不同网段的 ...

  3. Internetworking

    1 Introduction 所谓的InternetWorking就是将很多网络连接起来,那么在这种连接的网络下我们该如何传送封包呢? 2 IP and Routers 1 IP Datagram H ...

  4. 踩了的Dockerfile的坑

    1.Dockerfile VOLUME的目录,RUN命令操作该目录无效 VOLUME $APP_HOME RUN mkdir -p $APP_HOME && mkdir -p $APP ...

  5. 在 Linux 上如何挂载 qcow2 磁盘镜像

    1.下载qemu-nbd工具 sudo apt-get install qemu-utils 或者 sudo yum install qemu-img 2.加载nbd模块,然后挂载 sudo modp ...

  6. java后端导入excel模板和导入excel文件去读数据

    模板转载地址:https://www.cnblogs.com/zhangyangtao/p/9802948.html 直接上代码(我是基于ssm写的demo,导入文件目前只能读取.xls后缀的exce ...

  7. 疫苗:JAVA HASHMAP的死循环

    在淘宝内网里看到同事发了贴说了一个CPU被100%的线上故障,并且这个事发生了很多次,原因是在Java语言在并发情况下使用HashMap造成Race Condition,从而导致死循环.这个事情我4. ...

  8. javascript的hashCode实现

    hashCode = function(str){ var hash = 0; if (str.length == 0) return hash; for (i = 0; i < str.len ...

  9. 函数调用的区别:_cdecl以及_stdcall

    一.概念1)_stdcall调用   _stdcall是Pascal程序的缺省调用方式,参数采用从右到左的压栈方式,由调用者完成压栈操作,被调函数自身在返回前清空堆栈.   WIN32 Api都采用_ ...

  10. php 图像裁剪(自定义裁剪图片大小)

    <?php /** * 图像裁剪 * @param $title string 原图路径 * @param $content string 需要裁剪的宽 * @param $encode str ...