超级小的web手势库AlloyFinger发布

   <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>