使用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,
};
}
}
使用js从element的matrix推导transform的scale、rotate 和 translate参数的更多相关文章
- 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 ...
- PCL点云库:对点云进行变换(Using a matrix to transform a point cloud)
点云数据可以用ASCII码的形式存储在PCD文件中(关于该格式的描述可以参考链接:The PCD (Point Cloud Data) file format).为了生成三维点云数据,在excel中用 ...
- (vue.js)Vue element tab 每个tab用一个路由来管理?
(vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理 时间:2017/5/13 0:24:01 关键词: 关于网友提出的“ (vue.js) ...
- FastAPI实践项目:SayHello(FastAPI + vue.js + axios + element ui)
目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...
- js实现element中可清空的输入框(2)
接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...
- CSS动画:Transform中使用频繁的scale,rotate,translate动画
动画中,skew只是transform中的一种形式的动画,我们还可以学习scale,rotate,translate.这是目前使用比较频繁的属性动作. 1.scale动画的定义:(单位数值) scal ...
- transform:scale()妙用——当下拉列表,图片无缝拉升 动画效果
遇到问题 昨天在做音乐播放器的时候,遇到了一个这样的界面: 当下拉scroll区域列表的时候,图片会按照比例无缝连接放大,就想下面的效果图一样 分析问题 从上图可一看到,页面主要由两个div组成, ...
- HTML5 CSS3 Transform 笔记 (scale不起作用)
Transform的 scale属性不能作用于 inline元素上,例如span 并且动画 animation 也不能作用于inline元素上 可以给span加display:inline-bloc ...
- js方法用来获取路径传参上所带的参数
//js方法用来获取路径传参上所带的参数 function GetQueryString(param) { var reg = new RegExp("(^|&)" + p ...
随机推荐
- 3.装配Bean 基于XML
一.实例化方式 3种bean实例化方式:默认构造.静态工厂.实例工厂 1.默认构造 <bean id="" class=""> 必须提供默认构造 2 ...
- iOS逆向之iOSOpenDev
上篇谈到使用TheOS进行越狱开发,但是流程相对而言较复杂,本篇我们谈一下iOSOpenDev进行越狱开发.通过使用iOSOpenDev,我们可以使用Xcode进行开发.编译.生成并运行到设备上. 1 ...
- 不修改模板的前提下修改VisualState中的某些值
原文链接:不修改模板的前提下修改VisualState中的某些值 - 超威蓝火 UWP里有一件非常令人不爽的事,大部分控件只提供了Normal状态下的Background,Foreground,Bor ...
- 准备情人节礼物比写代码难?来看看IT直男给女友们的礼物
今天是情人节,据说IT直男在每个这样弥漫着恋爱气息的日子里都能把礼物送成"辣眼睛"现场,为了反(zheng)驳(shi)这个观点,小编特意走访了网易云的架构师.工程师.产品经理.程 ...
- Learning WCF:A Simple Demo
This is a very simple demo which can help you create a wcf applition quickly. Create a Solution Open ...
- Lerning Entity Framework 6 ------ Complex types
Complex types are classes that map to a subset of columns of a table.They don't contains key. They a ...
- ElasticSearch权威指南学习(索引管理)
创建索引 当我们需要确保索引被创建在适当数量的分片上,在索引数据之前设置好分析器和类型映射. 手动创建索引,在请求中加入所有设置和类型映射,如下所示: PUT /my_index { "se ...
- Linux - 查看命令所属的软件包
这里以查看netstat命令所属的软件包为例. CentOS:利用yum provides命令 netstat命令所属的软件包为net-tools [root@CentOS7 ~]# yum prov ...
- 测试工具之RobotFramework界面基本功能使用
安装好RobotFramework后,直接在运行或者命令行中执行ride.py即可启动RF 启动完成后的界面如下: 界面很简洁,然后我们开始点击file并创建project: 接下来右键project ...
- linux中一些简便的命令之tac/comm
tac tac是cat的反写,即反序显示文件内容 如文件a.txt内容如下: 1 2 3 4 5 则tac a.txt打印如下: 54321 我们可以使用awk来实现tac的功能: awk '{arr ...