簡(jiǎn)介

針對(duì)多點(diǎn)觸控設(shè)備編程的Web手勢(shì)組件，快速幫助你的web程序增加手勢(shì)支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個(gè)版本，無(wú)依賴的獨(dú)立版和react版本。除了Dom對(duì)象，也可監(jiān)聽(tīng)Canvas內(nèi)元素的手勢(shì)（需要Canvas引擎內(nèi)置對(duì)象支持addEventListener綁定touch相關(guān)事件）。
據(jù)不完全統(tǒng)計(jì)，目前AlloyFinger服務(wù)于：興趣部落、QQ群、QQ動(dòng)漫、騰訊學(xué)院、TEDxTencent、 AlloyTeam、騰訊CDC等多個(gè)部門、團(tuán)隊(duì)和項(xiàng)目。

功能清單

極小的文件大小
簡(jiǎn)潔的API設(shè)計(jì)
優(yōu)秀的性能
豐富的手勢(shì)支持
雙版本（react和獨(dú)立版）

事件

支持pinch縮放
支持rotate旋轉(zhuǎn)
支持pressMove拖拽
支持doubleTap雙擊
支持swipe滑動(dòng)
支持longTap長(zhǎng)按
支持tap按
支持singleTap單擊

快速上手

獨(dú)立版使用方式:

//element為需要監(jiān)聽(tīng)手勢(shì)的dom對(duì)象
new AlloyFinger(element, {
    pointStart: function () {
        //手指觸摸屏幕觸發(fā)
    },
    multipointStart: function () {
        //一個(gè)手指以上觸摸屏幕觸發(fā)
    },
    rotate: function (evt) {
        //evt.angle代表兩個(gè)手指旋轉(zhuǎn)的角度
        console.log(evt.angle);
    },
    pinch: function (evt) {
        //evt.scale代表兩個(gè)手指縮放的比例
        console.log(evt.scale);
    },
    multipointEnd: function () {
        //當(dāng)手指離開(kāi)，屏幕只剩一個(gè)手指或零個(gè)手指觸發(fā)
    },
    pressMove: function (evt) {
        //evt.deltaX和evt.deltaY代表在屏幕上移動(dòng)的距離
        console.log(evt.deltaX);
        console.log(evt.deltaY);
    },
    tap: function (evt) {
        //點(diǎn)按觸發(fā)
    },
    doubleTap: function (evt) {
        //雙擊屏幕觸發(fā)
    },
    longTap: function (evt) {
        //長(zhǎng)按屏幕750ms觸發(fā)
    },
    swipe: function (evt) {
        //evt.direction代表滑動(dòng)的方向
        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">你要監(jiān)聽(tīng)手勢(shì)的Dom!</div>
        </AlloyFinger>
    );
}

官網(wǎng)DEMO

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

Q&A

1.必須跟transformjs一起用嗎？
不必須。也可以在事件回調(diào)里根據(jù)evt攜帶的信息使用js去操作CSS3。但是一起用，會(huì)讓代碼更簡(jiǎn)潔。
2.pinch、rotate事件怎么在chrome瀏覽器調(diào)試的？
一般用真機(jī)調(diào)試，但是也可以使用chrome瀏覽器，傳送門 http://www.html5rocks.com/en/mobile/touch/#toc-touchdev
3.縮放的origin點(diǎn)設(shè)置，這里是想手在圖片哪個(gè)區(qū)域操作就設(shè)置哪里為origin進(jìn)行縮放?
自己去計(jì)算就是兩個(gè)手指的連線的中點(diǎn)的坐標(biāo)，

比如中點(diǎn)X：

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

然后根據(jù)這個(gè)坐標(biāo)和圖片的坐標(biāo)計(jì)算圖片縮放的origin
4.拖拽位置、縮放大小是否可以限制（始終在屏幕內(nèi)顯示，避免出現(xiàn)縮到很小看不到的情況）
這個(gè)不應(yīng)該有 AlloyFinger 控制。而應(yīng)該由你的邏輯去控制

Github

https://github.com/AlloyTeam/AlloyFinger