超级小的web手势库AlloyFinger发布
alp56l74
9年前
<p>针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了。拥有两个版本,无依赖的独立版和react版本。除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相关事件)。</p> <p>据不完全统计,目前AlloyFinger服务于:兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目。</p> <h2>功能清单</h2> <p>极小的文件大小</p> <p>简洁的API设计</p> <p>优秀的性能</p> <p>丰富的手势支持</p> <p>双版本(react和独立版)</p> <p>支持pinch缩放</p> <p>支持rotate旋转</p> <p>支持pressMove拖拽</p> <p>支持doubleTap双击</p> <p>支持swipe滑动</p> <p>支持longTap长按</p> <p>支持tap按</p> <p>支持singleTap单击</p> <h2>快速上手</h2> <p>独立版使用方式:</p> <pre> <code class="language-javascript">//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) { //单击 } }); </code></pre> <p>react版使用方式:</p> <pre> <code class="language-javascript">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> ); } </code></pre> <h2>官网DEMO</h2> <p><a href="/misc/goto?guid=4959673798842575435" rel="nofollow,noindex">http://alloyteam.github.io/AlloyFinger/</a></p> <p>1.必须跟transformjs一起用吗?</p> <p>不必须。也可以在事件回调里根据evt携带的信息使用js去操作CSS3。但是一起用,会让代码更简洁。</p> <p>2.pinch、rotate事件怎么在chrome浏览器调试的?</p> <p>一般用真机调试,但是也可以使用chrome浏览器,传送门 <a href="/misc/goto?guid=4959673798925062623" rel="nofollow,noindex">http://www.html5rocks.com/en/mobile/touch/#toc-touchdev</a></p> <p>3.缩放的origin点设置,这里是想手在图片哪个区域操作就设置哪里为origin进行缩放?</p> <p>自己去计算就是两个手指的连线的中点的坐标,</p> <p>比如中点X:</p> <pre> <code class="language-javascript"> pinch: function (evt) { console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2); }, </code></pre> <p>然后根据这个坐标和图片的坐标计算图片缩放的origin</p> <p>4.拖拽位置、缩放大小是否可以限制(始终在屏幕内显示,避免出现缩到很小看不到的情况)</p> <p>这个不应该有 AlloyFinger 控制。而应该由你的逻辑去控制</p> <p><a href="/misc/goto?guid=4959673799007818031" rel="nofollow,noindex">https://github.com/AlloyTeam/AlloyFinger</a></p> <p> </p> <p>来自: <a href="/misc/goto?guid=4959673799097230284" rel="nofollow">http://www.alloyteam.com/2016/05/super-small-web-gesture-library-alloyfinger-released/</a></p> <p> </p>