超級小的web手勢庫AlloyFinger釋出

【當耐特】發表於2016-05-26
Web

簡介

針對多點觸控裝置程式設計的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

相關文章