超級小的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) {
        //單擊
    }
});

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