您现在的位置：首页 --> JavaScript --> 超级小的web手势库AlloyFinger发布

超级小的web手势库AlloyFinger发布

浏览:969次出处信息

简介

针对多点触控设备编程的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单击

快速上手

独立版使用方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//element为需要监听手势的dom对象
newAlloyFinger(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版使用方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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>
    );
}

官网DEMO

http://alloyteam.github.io/AlloyFinger/

Q&A

1.必须跟transformjs一起用吗？
不必须。也可以在事件回调里根据evt携带的信息使用js去操作CSS3。但是一起用，会让代码更简洁。
2.pinch、rotate事件怎么在chrome浏览器调试的？
一般用真机调试，但是也可以使用chrome浏览器，传送门 http://www.html5rocks.com/en/mobile/touch/#toc-touchdev
3.缩放的origin点设置，这里是想手在图片哪个区域操作就设置哪里为origin进行缩放?
自己去计算就是两个手指的连线的中点的坐标，

比如中点X：

1
2
3
   pinch:function(evt){
        console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2);
    },

然后根据这个坐标和图片的坐标计算图片缩放的origin
4.拖拽位置、缩放大小是否可以限制（始终在屏幕内显示，避免出现缩到很小看不到的情况）
这个不应该有 AlloyFinger 控制。而应该由你的逻辑去控制

Github

https://github.com/AlloyTeam/AlloyFinger

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：用 visibilitychange 事件判断页面可见性 – 使用 PageVisibility API

后一篇：Date对象的那些事儿 >>

文章信息

作者：TAT.dnt 来源：腾讯AlloyTeam
标签： alloyfinger 手势
发布时间：2016-06-06 23:34:30

建议继续学习

近3天十大热文