在多点触控的设备上,我们发现一个普通的click会有300ms的延迟。现在AlloyFinger发布了,它能够快速的帮助大家对web程序增加手势支持。针对多点触控设备编程的web手势组件,它有两个版本,拥有两个版本,无依赖的独立版和react版本。除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件)。
AlloyFinger的特点
极小的文件大小
简洁的API设计
优秀的性能
丰富的手势支持
双版本(react和独立版)
AlloyFinger支持的事件
支持pinch缩放
支持rotate旋转
支持pressMove拖拽
支持doubleTap双击
支持swipe滑动
支持longTap长按
支持tap按
支持singleTap单击
AlloyFinger的使用
首先要导入alloy_finger.js文件
<script src="../../alloy_finger.js"></script>
独立版使用方式:
//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)}> <div className="test">你要监听手势的Dom!</div> </AlloyFinger> ); }
AlloyFinger下载地址:https://github.com/AlloyTeam/AlloyFinger
版权声明:本文为博主原创文章,未经博主允许不得转载。
: » 详解基于多点触控的Web手势库AlloyFinger实战
原创文章,作者:wdmbts,如若转载,请注明出处:https://blog.ytso.com/251149.html