資訊專欄INFORMATION COLUMN
摘要：擁有兩個版本，無依賴的獨立版和版本。除了對象，也可監(jiān)聽內(nèi)元素的手勢需要引擎內(nèi)置對象支持綁定相關(guān)事件。據(jù)不完全統(tǒng)計，目前服務(wù)于興趣部落群動漫騰訊學(xué)院騰訊等多個部門團隊和項目。也可以在事件回調(diào)里根據(jù)攜帶的信息使用去操作。
簡介
針對多點觸控設(shè)備編程的Web手勢組件，快速幫助你的web程序增加手勢支持，也不用再擔(dān)心click 300ms的延遲了。擁有兩個版本，無依賴的獨立版和react版本。除了Dom對象，也可監(jiān)聽Canvas內(nèi)元素的手勢（需要Canvas引擎內(nèi)置對象支持addEventListener綁定touch相關(guān)事件）。
據(jù)不完全統(tǒng)計，目前AlloyFinger服務(wù)于：興趣部落、QQ群、QQ動漫、騰訊學(xué)院、TEDxTencent、 AlloyTeam、騰訊CDC等多個部門、團隊和項目。
極小的文件大小
簡潔的API設(shè)計
優(yōu)秀的性能
豐富的手勢支持
雙版本（react和獨立版）
支持pinch縮放
支持rotate旋轉(zhuǎn)
支持pressMove拖拽
支持doubleTap雙擊
支持swipe滑動
支持longTap長按
支持tap按
支持singleTap單擊
獨立版使用方式:
//element為需要監(jiān)聽手勢的dom對象
new AlloyFinger(element, {
pointStart: function () {
//手指觸摸屏幕觸發(fā)
},
multipointStart: function () {
//一個手指以上觸摸屏幕觸發(fā)
},
rotate: function (evt) {
//evt.angle代表兩個手指旋轉(zhuǎn)的角度
console.log(evt.angle);
},
pinch: function (evt) {
//evt.scale代表兩個手指縮放的比例
console.log(evt.scale);
},
multipointEnd: function () {
//當(dāng)手指離開，屏幕只剩一個手指或零個手指觸發(fā)
},
pressMove: function (evt) {
//evt.deltaX和evt.deltaY代表在屏幕上移動的距離
console.log(evt.deltaX);
console.log(evt.deltaY);
},
tap: function (evt) {
//點按觸發(fā)
},
doubleTap: function (evt) {
//雙擊屏幕觸發(fā)
},
longTap: function (evt) {
//長按屏幕750ms觸發(fā)
},
swipe: function (evt) {
//evt.direction代表滑動的方向
console.log("swipe" + evt.direction);
},
singleTap: function (evt) {
//單擊
}
});
react版使用方式:
render() {
return (
你要監(jiān)聽手勢的Dom!
);
}
官網(wǎng)DEMO
http://alloyteam.github.io/AlloyFinger/
Q&A1.必須跟transformjs一起用嗎？
不必須。也可以在事件回調(diào)里根據(jù)evt攜帶的信息使用js去操作CSS3。但是一起用，會讓代碼更簡潔。
2.pinch、rotate事件怎么在chrome瀏覽器調(diào)試的？
一般用真機調(diào)試，但是也可以使用chrome瀏覽器，傳送門 http://www.html5rocks.com/en/mobile/touch/#toc-touchdev
3.縮放的origin點設(shè)置，這里是想手在圖片哪個區(qū)域操作就設(shè)置哪里為origin進行縮放?
自己去計算就是兩個手指的連線的中點的坐標(biāo)，
比如中點X：
pinch: function (evt) {
console.log((evt.touch[0].pageX+evt.touch[1].pageX)/2);
},
然后根據(jù)這個坐標(biāo)和圖片的坐標(biāo)計算圖片縮放的origin
4.拖拽位置、縮放大小是否可以限制（始終在屏幕內(nèi)顯示，避免出現(xiàn)縮到很小看不到的情況）
這個不應(yīng)該有 AlloyFinger 控制。而應(yīng)該由你的邏輯去控制
https://github.com/AlloyTeam/AlloyFinger
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79557.html
摘要：從長按開始學(xué)習(xí)手勢在項目開發(fā)過程中遇到有虛擬鍵盤開發(fā)的需求如下圖，其中刪除鍵需要實現(xiàn)長按刪除輸入框全部內(nèi)容，由此展開今天要討論的手勢開發(fā)內(nèi)容。所以長按手勢實際上是由三者共同模擬的效果。 從 [長按] 開始學(xué)習(xí) web 手勢 在項目開發(fā)過程中遇到有虛擬鍵盤開發(fā)的需求（如下圖），其中刪除鍵需要實現(xiàn) 長按 刪除輸入框全部內(nèi)容，由此展開今天要討論的 web 手勢 開發(fā)內(nèi)容。 showImg(h...
摘要：目前作為騰訊手機手勢解決方案，在各大項目中都發(fā)揮著作用。因此也入選了騰訊平臺的精品組件除了國內(nèi)外的項目團隊都在使用，國內(nèi)外的各大網(wǎng)站也進行了轉(zhuǎn)載報道，作為超級小的手勢庫，騰訊的項目為什么不選擇而選擇下面從各個角度架構(gòu)原理上進行一下分析。 目前AlloyFinger作為騰訊手機QQ web手勢解決方案，在各大項目中都發(fā)揮著作用。感興趣的同學(xué)可以去Github看看： https://git...
摘要：最近接到一個小的項目，需要實現(xiàn)觸屏滑動，圖片縮放旋轉(zhuǎn)移動，故而花了三天時間學(xué)習(xí)并實現(xiàn)了一下，在此記錄一下學(xué)習(xí)過程關(guān)鍵就是觸屏手勢用到的技術(shù)過渡轉(zhuǎn)換我就不說了，與是屬于輕量級的觸屏手勢封裝庫，其中水平移動用的是別的功能用的是。 最近接到一個小的項目，需要實現(xiàn)觸屏滑動，圖片縮放旋轉(zhuǎn)移動，故而花了三天時間學(xué)習(xí)并實現(xiàn)了一下，在此記錄一下學(xué)習(xí)過程：關(guān)鍵就是css、 觸屏手勢用到的技術(shù)：css過...
摘要：最近接到一個小的項目，需要實現(xiàn)觸屏滑動，圖片縮放旋轉(zhuǎn)移動，故而花了三天時間學(xué)習(xí)并實現(xiàn)了一下，在此記錄一下學(xué)習(xí)過程關(guān)鍵就是觸屏手勢用到的技術(shù)過渡轉(zhuǎn)換我就不說了，與是屬于輕量級的觸屏手勢封裝庫，其中水平移動用的是別的功能用的是。 最近接到一個小的項目，需要實現(xiàn)觸屏滑動，圖片縮放旋轉(zhuǎn)移動，故而花了三天時間學(xué)習(xí)并實現(xiàn)了一下，在此記錄一下學(xué)習(xí)過程：關(guān)鍵就是css、 觸屏手勢用到的技術(shù)：css過...
閱讀 2878·2023-04-25 22:51
閱讀 2247·2021-10-11 10:58
閱讀 3383·2019-08-30 10:49
閱讀 1944·2019-08-29 17:09
閱讀 3191·2019-08-29 10:55
閱讀 904·2019-08-26 10:34
閱讀 3622·2019-08-23 17:54
閱讀 1044·2019-08-23 16:06
