// 经由过程 transform 直接操作元素； 

 

set($drag,dragTrans);  

初始地位

保护外部的┞封个地位数据，如不雅初始值像上述那样直接取0，则碰到应用css设置了transform属性的元素便无法精确辨认了，会导致操作元素开端时刹时跳回(0,0)的点，是以我们须要初始去获取一个元素真实的地位值，再进行保护与操作。此时，便须要用到膳绫擎我们提到的getComputedStyle办法与matrixTo函数：

// 获取css transform属性，此时获得的是一个矩阵数据； 
 
// transform:matrix(1.41421,1.41421,-1.41421,1.41421,-50,-50); 
 
let style = window.getComputedStyle(el,null); 
 
let cssTrans = style.transform || style.webkitTransform; 
 
  
 
// 按规矩进行转换，获得： 
 
let initTrans = _.matrixTo(cssTrans); 
 
  
 
// {x:-50,y:-50,scale:2,rotate:45}; 
 
// 即该元素设置了：transform:translate(-50px,-50px) scale(2) rotate(45deg);  

至此，信赖大年夜家敌手势的道理已经有基本的懂得，基于这些道理，我们可以再封装出更多的手势，例如双击，长按，扫动，甚至更酷炫的三指、四指操作等，让应用拥有更多人道化的特质。

基于以上道理，我封装了几个常见的对象：(求star -.-)

Tips: 因为只针对移动端，需在移动设备中打开demo，或者pc端开启mobile调试模式!

1. mtouch.js : 移动端的手势库，封装了上述的五种手势，精简的api设计，涵盖了常见的手势交互，基于此也可以很便利的进行扩大。
2. touchkit.js : 基于mtouch所封装的一层更切近营业的对象包，可用于制造多种手势操作营业，一键开启，一站式办事。
3. mcanvas.js : 基于canvas 开放极简的api实现图片 一键导出等。

申谢

• 张鑫旭： 获取元素CSS值之getComputedStyle办法熟悉
• 张鑫旭：懂得CSS3 transform中的Matrix(矩阵)
• AlloyTeam团队的AlloyFinger
• hcysunyangd： 大年夜矩阵与空间操作的关系懂得CSS3的transform
• 线性代数的懂得 学完再看认为自谷旦爆了

【编辑推荐】

1. 若何监听页面 DOM 更改并高效响应
2. 若何实现一个基于DOM的模板引擎
3. 巧思见匠心 白鹭引擎5.0演绎业界首个双核H5引擎
4. 我用Python做了六百万字的歌词分析，告诉你中国Rapper都在唱些啥
5. 八年双11，交易额增长 200 倍，交易峰值袈漩长 400 多倍，阿里技巧经历了什么？

【义务编辑：庞桂玉 TEL：（010）68476606】

　　推荐阅读

　　机械键盘到底怎么选？300块钱买把真值吗？

国外的Techpowerup网站针对网友做了一项问卷查询拜访，标题是你愿意购买若干钱的键盘，至8月1日投票截止共获得8689张投票。在问卷查询拜访的5个选项中，50美元以下的选项占据了最多，然则>>>详细阅读

本文标题：HTML5中手势原理分析与数学知识的实践

地址：http://www.17bianji.com/lsqh/36718.html

 1/2    1