使用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 ...
随机推荐
- jupyter Notebook环境搭建
1.什么是jupyter notebook jupyter notebook是一种 Web 应用,能让用户将说明文本.数学方程.代码和可视化内容全部组合到一个易于共享的文档中.它可以直接在代码旁写出叙 ...
- git 删除本地分支、远程分支、本地回滚、远程回滚
一. git 删除分支 1. git 删除本地分支 git branch -D branchname 2. git 删除远程分支 git push origin :branchname (origin ...
- 【BZOJ3676】 [Apio2014]回文串(SAM,manacher)
传送门 BZOJ 洛谷 Solution 考虑我们每找到一个回文串就更新一次答案,跑个SAM,这样子复杂度是爆炸的. 接下来的就是优化: 我们可以倍增跳直到跳不了,最后的siz就是出现次数. 没了?没 ...
- solr 高亮springdatasolr
@Autowired private SolrTemplate solrTemplate; @Override public Map<String, Object> search(Map ...
- extern的使用详解(多文件编程)——C语言
extern——关键字 extern是C语言中的一个关键字,一般用在变量名前或函数名前,作用是用来说明“此变量/函数是在别处定义的,要在此处引用”,extern这个关键字大部分读者应该是在变量的存储类 ...
- 上下文无关的GMM-HMM声学模型
一.语音识别基本介绍 (一)统计语音识别的基本等式 X------声学特征向量序列,观测值 W------单词序列 W*------给定观测值下,概率最大的单词序列 应用贝叶斯理论等价于 进而得出统计 ...
- Python函数学习——作用域与嵌套函数
全局与局部变量 在函数中定义的变量称为局部变量,在程序的一开始定义的变量称为全局变量. 全局变量作用域是整个程序,局部变量作用域是定义该变量的函数. 当全局变量与局部变量同名时,在定义局部变量的函数内 ...
- python TypeError: 'int' object is not callable 问题解决
TypeError: 'int' object is not callable 这个错误的原因很简单 看下面的程序: def loss(a,b): return a-b loss = 0 loss = ...
- 从零开始学 Web 之 移动Web(四)实现JD分类页面
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Kafka项目实战-用户日志上报实时统计之编码实践
1.概述 本课程的视频教程地址:<Kafka实战项目之编码实践> 该课程我以用户实时上报日志案例为基础,带着大家去完成各个KPI的编码工作,实现生产模块.消费模块,数据持久化,以及应用调 ...