简介

针对多点触控装备编程的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) {
        //单击
    }
});

react版运用体式格局:

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：

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

然后依据这个坐标和图片的坐标盘算图片缩放的origin
4.拖拽位置、缩放大小是不是能够限定（一直在屏幕内显现，防止涌现缩到很小看不到的状况）
这个不该该有 AlloyFinger 掌握。而应该由你的逻辑去掌握

Github

https://github.com/AlloyTeam/AlloyFinger