神刀安全网

超级小的web手势库AlloyFinger发布

针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了。拥有两个版本,无依赖的独立版和react版本。除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件)。

据不完全统计,目前AlloyFinger服务于:兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目。

功能清单

极小的文件大小

简洁的API设计

优秀的性能

丰富的手势支持

双版本(react和独立版)

支持pinch缩放

支持rotate旋转

支持pressMove拖拽

支持doubleTap双击

支持swipe滑动

支持longTap长按

支持tap按

支持singleTap单击

快速上手

独立版使用方式:

//element为需要监听手势的dom对象 new AlloyFinger(element, {     pointStart: function () {         //手指触摸屏幕触发     },     multipointStart: function () {         //一个手指以上触摸屏幕触发     },     rotate: function (evt) {         //evt.angle代表两个手指旋转的角度         console.log(evt.angle);     },     pinch: function (evt) {         //evt.scale代表两个手指缩放的比例         console.log(evt.scale);     },     multipointEnd: function () {         //当手指离开,屏幕只剩一个手指或零个手指触发     },     pressMove: function (evt) {         //evt.deltaX和evt.deltaY代表在屏幕上移动的距离         console.log(evt.deltaX);         console.log(evt.deltaY);     },     tap: function (evt) {         //点按触发     },     doubleTap: function (evt) {         //双击屏幕触发     },     longTap: function (evt) {         //长按屏幕750ms触发     },     swipe: function (evt) {         //evt.direction代表滑动的方向         console.log("swipe" + evt.direction);     },     singleTap: function (evt) {         //单击     } }); 

react版使用方式:

render() {     return (         <AlloyFinger             onTap={this.onTap.bind(this)}             onMultipointStart={this.onMultipointStart.bind(this)}             onLongTap={this.onLongTap.bind(this)}             onSwipe={this.onSwipe.bind(this)}             onPinch={this.onPinch.bind(this)}             onRotate={this.onRotate.bind(this)}             onPressMove={this.onPressMove.bind(this)}             onMultipointEnd={this.onMultipointEnd.bind(this)}             onDoubleTap={this.onDoubleTap.bind(this)}>             <divclassName="test">你要监听手势的Dom!</div>         </AlloyFinger>     ); } 

官网DEMO

http://alloyteam.github.io/AlloyFinger/

1.必须跟transformjs一起用吗?

不必须。也可以在事件回调里根据evt携带的信息使用js去操作CSS3。但是一起用,会让代码更简洁。

2.pinch、rotate事件怎么在chrome浏览器调试的?

一般用真机调试,但是也可以使用chrome浏览器,传送门 http://www.html5rocks.com/en/mobile/touch/#toc-touchdev

3.缩放的origin点设置,这里是想手在图片哪个区域操作就设置哪里为origin进行缩放?

自己去计算就是两个手指的连线的中点的坐标,

比如中点X:

  pinch: function (evt) {          console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2);     }, 

然后根据这个坐标和图片的坐标计算图片缩放的origin

4.拖拽位置、缩放大小是否可以限制(始终在屏幕内显示,避免出现缩到很小看不到的情况)

这个不应该有 AlloyFinger 控制。而应该由你的逻辑去控制

https://github.com/AlloyTeam/AlloyFinger

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 超级小的web手势库AlloyFinger发布

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址