超级小的web手势库AlloyFinger发布-守望者-AIR技术交流

破晓发表于 2016-8-3 11:36:38

超级小的web手势库AlloyFinger发布

<h2 style="margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">来源：http://div.io/topic/1734</h2><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">简介</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">针对多点触控设备编程的Web手势组件，快速帮助你的web程序增加手势支持，也不用再担心click 300ms的延迟了。拥有两个版本，无依赖的独立版和react版本。除了Dom对象，也可监听Canvas内元素的手势（需要Canvas引擎内置对象支持addEventListener绑定touch相关事件）。 据不完全统计，目前AlloyFinger服务于：兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 AlloyTeam、腾讯CDC等多个部门、团队和项目。<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">功能清单</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">极小的文件大小 简洁的API设计 优秀的性能 丰富的手势支持 双版本（react和独立版）<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">事件</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">支持pinch缩放 支持rotate旋转 支持pressMove拖拽 支持doubleTap双击 支持swipe滑动 支持longTap长按 支持tap按 支持singleTap单击<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">快速上手</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">独立版使用方式:<pre class="prettyprint lang-js prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">//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 style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">react版使用方式:<pre class="prettyprint lang-js prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;">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>
);
}</code></pre><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">官网DEMO</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><a href="http://alloyteam.github.io/AlloyFinger/" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">http://alloyteam.github.io/AlloyFinger/</a><h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">Q&A</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">1.必须跟transformjs一起用吗？ 不必须。也可以在事件回调里根据evt携带的信息使用js去操作CSS3。但是一起用，会让代码更简洁。 2.pinch、rotate事件怎么在chrome浏览器调试的？ 一般用真机调试，但是也可以使用chrome浏览器，传送门 <a href="http://www.html5rocks.com/en/mobile/touch/#toc-touchdev" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">http://www.html5rocks.com/en/mobile/touch/#toc-touchdev</a> 3.缩放的origin点设置，这里是想手在图片哪个区域操作就设置哪里为origin进行缩放? 自己去计算就是两个手指的连线的中点的坐标，<p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">比如中点X：<pre class="prettyprint lang-js prettyprinted" style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; padding: 6px 10px; border: 1px solid rgb(221, 221, 221); font-size: 12px; line-height: 18px; overflow: auto; border-radius: 3px; word-break: break-all; color: rgb(51, 51, 51); background-color: rgb(248, 248, 248);"><code style="font-family: consolas, monaco, menlo, "courier new", courier, monospace; display: inline-block; line-height: 1.5; border: 0px none; border-radius: 0px; font-size: inherit; background: none;"> pinch: function (evt) {
 console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2);
},</code></pre><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;">然后根据这个坐标和图片的坐标计算图片缩放的origin 4.拖拽位置、缩放大小是否可以限制（始终在屏幕内显示，避免出现缩到很小看不到的情况） 这个不应该有 AlloyFinger 控制。而应该由你的逻辑去控制<h2 style="font-size: 26px; margin-top: 20px; margin-bottom: 20px; counter-reset: section 0; font-weight: normal; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif;">Github</h2><p style="margin-top: 18px; margin-bottom: 18px; color: rgb(51, 51, 51); font-family: "helvetica neue", tahoma, "hiragino sans gb", stheiti, "wenquanyi micro hei", 微软雅黑, 宋体, sans-serif; font-size: 16px; line-height: 27.2px;"><a href="https://github.com/AlloyTeam/AlloyFinger" target="_blank" style="text-decoration: none; color: rgb(49, 135, 219);">https://github.com/AlloyTeam/AlloyFinger</a>

页: [1]

守望者--AIR技术交流's Archiver

超级小的web手势库AlloyFinger发布