超级小的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) {
//单击
}
});

官网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[].pageX+evt.touch[].pageX)/);
},

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

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

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

https://github.com/AlloyTeam/AlloyFinger

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AlloyFinger</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/main.css">
<script type="text/javascript" src="script/jquery-1.9.1.min.js"></script>
<style>
html, body{width:100%;height:100%;}
.view_page{width:100%;height:100%;max-width:640px;position:relative;margin:0 auto;}
.small_map_box{width:100%;}
.small_map_box img{width:100%;display:block;}
.big_map_box{position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 1);max-width:640px;z-index:100;display:none;
-webkit-transform-origin:50% 20%;transform-origin:50% 20%;}
.big_map_box.active{
-webkit-animation:globalSca 0.4s ease both;
-moz-animation:globalSca 0.4s ease both;
-ms-animation:globalSca 0.4s ease both;
animation:globalSca 0.4s ease both;
}
@-webkit-keyframes globalSca{
0%{-webkit-transform:scale(0);background:rgba(0, 0, 0, 0);}
100%{-webkit-transform:scale(1);background:rgba(0, 0, 0, 1);}
}
@-moz-keyframes globalSca{
0%{-moz-transform:scale(0);background:rgba(0, 0, 0, 0);}
100%{-moz-transform:scale(1);background:rgba(0, 0, 0, 1);}
}
@-ms-keyframes globalSca{
0%{-ms-transform:scale(0);background:rgba(0, 0, 0, 0);}
100%{-ms-transform:scale(1);background:rgba(0, 0, 0, 1);}
}
@keyframes globalSca{
0%{transform:scale(0);background:rgba(0, 0, 0, 0);}
100%{transform:scale(1);background:rgba(0, 0, 0, 1);}
}
.big_map_box.active2{
-webkit-animation:globalScatoZero 0.4s ease both;
-moz-animation:globalScatoZero 0.4s ease both;
-ms-animation:globalScatoZero 0.4s ease both;
animation:globalScatoZero 0.4s ease both;
}
@-webkit-keyframes globalScatoZero{
0%{-webkit-transform:scale(1)}
100%{-webkit-transform:scale(1);opacity:0;}
}
@-moz-keyframes globalScatoZero{
0%{-moz-transform:scale(1)}
100%{-moz-transform:scale(1);opacity:0;}
}
@-ms-keyframes globalScatoZero{
0%{-ms-transform:scale(1)}
100%{-ms-transform:scale(1);opacity:0;}
}
@keyframes globalScatoZero{
0%{transform:scale(1)}
100%{transform:scale(1);opacity:0;}
}
/*@-webkit-keyframes mymove{
0% {-webkit-transform:scale(0);}
100% {-webkit-transform:scale(1);}
} @keyframes mymove{
0% {transform:scale(0);}
100% {transform:scale(1);}
}*/ .big_map_box img{position:absolute;width:100%;left:0;top:50%;}
#result{position:absolute;left:0;top:0;color:#fff;}
</style>
</head>
<body>
<div class="view_page">
<div class="small_map_box" id="small_map_box">
<img src="data:images/map_small.jpg" class="small_map" id="small_map" alt="">
</div>
<div class="big_map_box">
<div id="result">fewfew</div>
<img src="data:images/map_big.jpg" class="big_map" id="big_map" alt="">
</div>
</div>
</body>
</html>
<script type="text/javascript" src="AlloyFinger-master/alloy_finger.js"></script>
<script type="text/javascript" src="AlloyFinger-master/asset/transform.js"></script>

<script type="text/javascript" src="AlloyFinger-master/asset/to.js"></script>
<script type="text/javascript">
!(function(){
var winW = window.innerWidth;
var smallmap = document.getElementById("small_map_box");
var bigmap = document.getElementById("big_map");
smallmap.addEventListener("touchstart", function(){
smallmap.addEventListener("touchend", touchEnd, false);
}, false); smallmap.addEventListener("touchmove", function(){
smallmap.removeEventListener("touchend", touchEnd, false);
}, false); smallmap.addEventListener("touchend", touchEnd, false); function touchEnd(){
$(".big_map_box").css({"display": "block"}).removeClass("active2").addClass("active");
bigmap.style.marginTop = -Math.round((winW * 1.0533333333))/ 2 + "px";
bigmap.style.transform = "perspective(500px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
bigmap.style.webkitTransform = "perspective(500px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)";
}
Transform(bigmap);
var initScale = 1;
var handlerMap = new AlloyFinger(bigmap, {
//一个手指以上触摸屏幕触发
multipointStart: function () {
initScale = this.scaleX;
}, //当手指离开，屏幕只剩一个手指或零个手指触发
multipointEnd: function (evt) {
// bigmap.onclick = function(){
// $(".big_map_box").removeClass("active");
// } // 缩放小于1的动画
if(this.scaleX < 1){
new To(this, "scaleX", 1, 300); // 绽放归位
new To(this, "scaleY", 1, 300); // 绽放归位
new To(this, "translateX", 0, 300); // 位移归位
new To(this, "translateY", 0, 300); // 位移归位
new To(this, "rotateZ", 0, 300); // 旋转归位
// 自己写的动画
// var that = this;
// this.scaleX = this.scaleY = 1;
// this.translateX = 0;
// this.translateY = 0;
// this.style.transition = "all 0.3s";
// setTimeout(function(){
// this.style.transition = "0ms";
// }.bind(this), 300);
}
// 限制最大的尺寸
if(this.scaleX > 3){
// this.scaleX = this.scaleY = 3;
new To(this, "scaleX", 3, 200); // 绽放归位
new To(this, "scaleY", 3, 200); // 绽放归位
}
}, // 旋转
// rotate: function (evt) {
// evt.preventDefault();
// //evt.angle代表两个手指旋转的角度
// this.rotateZ += evt.angle;
// }, // 双指缩放
pinch: function (evt) {
handlerMap.isDoubleTap = true;
this.scaleX = this.scaleY = initScale * evt.zoom;
evt.preventDefault(); },
// 双击放大
// doubleTap: function () {
// handlerMap.isDoubleTap = true;
// if(this.scaleX === 1){
// new To(this, "scaleX", 3, 300);
// new To(this, "scaleY", 3, 300);
// }else if(this.scaleX === 3){
// new To(this, "scaleX", 1, 300);
// new To(this, "scaleY", 1, 300);
// new To(this, "translateX", 0, 300); // 位移归位
// new To(this, "translateY", 0, 300); // 位移归位
// }
// /*else if(this.scaleX > 2){
// new To(this, "scaleX", 2, 300);
// new To(this, "scaleY", 2, 300);
// }*/
// },
singleTap: function (evt) {
if(!handlerMap.isDoubleTap){
$(".big_map_box").removeClass("active").addClass("active2");
setTimeout(function(){
$(".big_map_box").css({"display":"none"});
},400)
}
}, // 移动
pressMove: function (evt) {
// 取消单击事件 handlerMap.isDoubleTap = true;
this.translateX += evt.deltaX;
this.translateY += evt.deltaY; // 边界判断. 不让划出屏幕内
if(this.scaleX === 1){
if(this.translateX !== 0){
// this.scaleX = this.scaleY = 3;
new To(this, "translateX", 0, 200); // 绽放归位
}
this.translateY = 0;
}
evt.preventDefault();
}
}) }());function classList(e){
//CSSClassList是一个模拟DOMTokenList的javascript类
function CSSClassList(e){
//系统偷偷替我们做了：
//var this = new Object();
this.e = e;
} //contains方法
CSSClassList.prototype.contains = function(c){ //权威指南的方法
//检查c是否是合法的类名
if(c.length === 0 || c.indexOf(" ") != -1){
throw new Error("invalid class name:'" + c + "'");
}
//首先是常规检查
var classes = this.e.className;
if(!classes) return false; //e不含有类名
if(classes === c) return true; //e有一个完全匹配的类名 //否则,把c自身看做一个单词,利用正则表达式搜索c
//\b是单词的边界
return classes.search("\\b" + c + "\\b") != -1; //网上正则方法
/*var classname = this.e.className, reg = new RegExp("\\b" + c + "\\b");
return reg.test(classname);*/ } //add()方法
CSSClassList.prototype.add = function(c){
if(this.contains(c)) return; //如果存在,则不添加
var classes = this.e.className; //判断存在class与class类里最后一个类名没有空白格
if(classes && classes[classes.length-1] != " "){
c = " " + c;
this.e.className += c; //将c添加到className中
}
} //remove()方法
CSSClassList.prototype.remove = function(c){
//检查c是否是合法的类名
if(c.length === 0 || c.indexOf(" ") != -1){
throw new Error("invalid class name:'" + c + "'");
}
//将所有作为单词的c和多余的尾随空格全部删除
var pattern = new RegExp("\\b" + c + "\\b\\s*","g");
this.e.className = this.e.className.replace(pattern,"")
} //toggle()方法,添加返回true,删除返回false
CSSClassList.prototype.toggle = function(c){
if(this.contains(c)){ //如果e.className包含c
this.remove(c); //删除它
return false;
}else{
this.add(c); //否则,添加它
return true;
}
} //返回e.className本身
CSSClassList.prototype.toString = function(){
return this.e.className;
}; /*//返回在e.className中的类名 (CSSClassList原生中没有toArray方法)
CSSClassList.prototype.toArray = function(){
return this.e.className.match(/\b\w+\b/g) || {};
}*/ if(e.classList){
return e.classList; //如果classList存在,则返回它
}else{
return new CSSClassList(e); //否则就创建一个
}
}
</script>