資訊專欄INFORMATION COLUMN
摘要：一個手勢庫往期目錄用開發手勢庫開發常用手勢有哪些用開發手勢庫開發常用手勢有哪些不到行用實現一個簡單看下架構實現輸入格式統一為了同時支持鼠標和設備我們第一步把種設備產生數據統一化統一化后的數據我們統一叫他個基礎個快捷包含個字段個基礎字
any-touch 一個手勢庫
往期目錄用 TypeScript 開發手勢庫 - (1)web開發常用手勢有哪些?
用 TypeScript 開發手勢庫 - (2)web開發常用手勢有哪些?
不到30行, 用any-touch實現一個drawer
簡單看下架構 實現輸入格式統一(input)為了同時支持鼠標和touch設備, 我們第一步把2種設備產生數據統一化, 統一化后的數據我們統一叫他input.
4個基礎,7個快捷input包含11個字段,4個基礎字段,7個快捷字段, 這些都是為下一步進行計算處理(computed)使用.
4個基礎字段input包含4個基礎字段:eventType / point / changedPoints / nativeEvent, 接下來依次解釋.
eventTypeeventType可以理解為輸入狀態, 如touchstart/mousedown對應start, touchmove/mousemove對應move, touchend/mouseleave對應end, touchcancel對應cancel, 總計4種狀態.
point觸點信息, 存儲當前觸點相對瀏覽器窗口左上角的坐標(clientX, clientY), point是個數組, 存儲當前的所有觸點.
changedPoints發生變化的觸點信息, 是個數組, 存儲著上一次觸點相對當前觸點發生變化的觸點(初看有些繞, 如不明可留言.).
nativeEvent如果是touch設備, 那么對應touchEvent, 鼠標對應MouseEvent.
處理touchEvent
export default (event: TouchEvent): any => {
const point = Array.from(event.touches).map(({clientX,clientY})=>({clientX,clientY}));
const changedPoints = Array.from(event.changedTouches).map(({clientX,clientY})=>({clientX,clientY}));
const eventType = event.type.replace("touch", "");
return {
eventType,
changedPoints,
point,
nativeEvent: event,
};
};
處理mouseEvent
let prevPoints: { clientX: number, clientY: number }[];
let isPressed = false;
// 默認MouseEvent中對type聲明僅為string
export default (event: MouseEvent): BaseInput | void => {
let { clientX, clientY, type, button } = event;
const changedPoints = prevPoints || [{ clientX, clientY }];
let points = [{ clientX, clientY }];
prevPoints = [{ clientX, clientY }];
// 必須左鍵
if ("mousedown" === type) {
if (0 === button) {
isPressed = true;
} else {
return;
}
}
if ("mousemove" === type) {
if (!isPressed) return;
} else if ("mouseup" === type) {
if (isPressed) {
points = [];
} else {
return;
};
isPressed = false;
}
const MAP = {
mousedown: "start",
mousemove: "move",
mouseup: "end"
};
return {
eventType: MAP[<"mousedown" | "mousemove" | "mouseup">type],
changedPoints,
points,
nativeEvent: event
};
};
源碼
7個快捷字段快捷字段均由基礎字段簡單衍生而來, 僅為了使用方便而直接放在這.
pointLength對應point數組的長度.
changedPointLength對應changedPoints的長度.
timestamp當前時間戳.
target綁定事件的元素.
currentTarget觸發事件所在元素.
center觸點坐標, 如果是多點, 那么對應多點的中心坐標(getCenter函數源碼).
x/y對應center.x和center.y
isFirst是否本輪識別周期的開始, 如果當前的eventType為start階段, pointLength和changedPointLength的長度相等, 那么可以判定, 當前為開始.
isFinal是否本輪識別周期的結束, 如果當前的eventType為end或者cancel階段, 且所有觸點均離開, 那么判定為結束.
擴展字段的源碼比較長, 請移步至倉庫.
下期預告下期我們會講解computed, 計算階段比較復雜, 設計到input的開始/前一個/當前狀態的計算, 大家可以提前預熱.
compute部分源碼
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102915.html
這只是個開頭 說在最前面,本文是一個系列文章的開頭, 這個系列里我會講如何用typescript開發一款支持pc和手機端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發手勢庫 - (2)tsconfig.json & r...
摘要：一個手勢庫預覽的基本邏輯添加個一個是當隱藏的時候打開隱藏的觸發開關一個是本身對把手和進行進行定位到界面的右側邊緣調整和把手的樣式這里把手主要是要設置背景色為透明具體樣式看下面代碼用分別給把手和添加拖拽手勢當隱藏時拖拽把手向右通過返回的每 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); ...
摘要：一個手勢庫往期目錄用開發手勢庫開發常用手勢有哪些用開發手勢庫統一化和事件不到行用實現一個標題有點長今天的標題有點長但不難講的都是工具配置和使用就個知識點如何配置如何配置使用運行項目所在的命令注為了閱讀體驗我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...
摘要：一個手勢庫往期目錄用開發手勢庫開發常用手勢有哪些用開發手勢庫統一化和事件不到行用實現一個標題有點長今天的標題有點長但不難講的都是工具配置和使用就個知識點如何配置如何配置使用運行項目所在的命令注為了閱讀體驗我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...
閱讀 930·2021-11-23 09:51
閱讀 993·2021-11-18 10:02
閱讀 1909·2021-09-10 11:27
閱讀 3140·2021-09-10 10:51
閱讀 779·2019-08-29 15:13
閱讀 2064·2019-08-29 11:32
閱讀 2502·2019-08-29 11:25
閱讀 3045·2019-08-26 11:46
