超級小的web手勢庫AlloyFinger發布

ymyang 發布于2019-08-19 18:24 / 3609人閱讀

摘要：擁有兩個版本，無依賴的獨立版和版本。除了對象，也可監聽內元素的手勢需要引擎內置對象支持綁定相關事件。據不完全統計，目前服務于興趣部落群動漫騰訊學院騰訊等多個部門團隊和項目。也可以在事件回調里根據攜帶的信息使用去操作。

簡介

針對多點觸控設備編程的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 (
        
            你要監聽手勢的Dom!
        
    );
}

官網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

GPU云服務器云服務器 web 手勢控制庫 webrtc AlloyFinger 發布web項目怎么發布web服務

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79557.html

AlloyFinger web 手勢學習

摘要：從長按開始學習手勢在項目開發過程中遇到有虛擬鍵盤開發的需求如下圖，其中刪除鍵需要實現長按刪除輸入框全部內容，由此展開今天要討論的手勢開發內容。所以長按手勢實際上是由三者共同模擬的效果。從 [長按] 開始學習 web 手勢在項目開發過程中遇到有虛擬鍵盤開發的需求（如下圖），其中刪除鍵需要實現長按刪除輸入框全部內容，由此展開今天要討論的 web 手勢開發內容。 showImg(h...

seanlook 2019-08-22 14:51 評論0 收藏0
超小Web手勢庫AlloyFinger原理

摘要：目前作為騰訊手機手勢解決方案，在各大項目中都發揮著作用。因此也入選了騰訊平臺的精品組件除了國內外的項目團隊都在使用，國內外的各大網站也進行了轉載報道，作為超級小的手勢庫，騰訊的項目為什么不選擇而選擇下面從各個角度架構原理上進行一下分析。目前AlloyFinger作為騰訊手機QQ web手勢解決方案，在各大項目中都發揮著作用。感興趣的同學可以去Github看看： https://git...

Karuru 2019-08-20 12:12 評論0 收藏0
基礎觸屏手勢學習

摘要：最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程關鍵就是觸屏手勢用到的技術過渡轉換我就不說了，與是屬于輕量級的觸屏手勢封裝庫，其中水平移動用的是別的功能用的是。最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程：關鍵就是css、觸屏手勢用到的技術：css過...

leo108 2019-08-26 10:21 評論0 收藏0
基礎觸屏手勢學習

摘要：最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程關鍵就是觸屏手勢用到的技術過渡轉換我就不說了，與是屬于輕量級的觸屏手勢封裝庫，其中水平移動用的是別的功能用的是。最近接到一個小的項目，需要實現觸屏滑動，圖片縮放旋轉移動，故而花了三天時間學習并實現了一下，在此記錄一下學習過程：關鍵就是css、觸屏手勢用到的技術：css過...

leanxi 2019-08-30 15:44 評論0 收藏0