成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用TypeScript開發(fā)手勢庫 - (3)統(tǒng)一化Mouse和Touch事件

BigNerdCoding / 2123人閱讀

摘要：一個(gè)手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫開發(fā)常用手勢有哪些不到行用實(shí)現(xiàn)一個(gè)簡單看下架構(gòu)實(shí)現(xiàn)輸入格式統(tǒng)一為了同時(shí)支持鼠標(biāo)和設(shè)備我們第一步把種設(shè)備產(chǎn)生數(shù)據(jù)統(tǒng)一化統(tǒng)一化后的數(shù)據(jù)我們統(tǒng)一叫他個(gè)基礎(chǔ)個(gè)快捷包含個(gè)字段個(gè)基礎(chǔ)字

any-touch 一個(gè)手勢庫

往期目錄

用 TypeScript 開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?

用 TypeScript 開發(fā)手勢庫 - (2)web開發(fā)常用手勢有哪些?

不到30行, 用any-touch實(shí)現(xiàn)一個(gè)drawer

簡單看下架構(gòu)

實(shí)現(xiàn)輸入格式統(tǒng)一(input)

為了同時(shí)支持鼠標(biāo)和touch設(shè)備, 我們第一步把2種設(shè)備產(chǎn)生數(shù)據(jù)統(tǒng)一化, 統(tǒng)一化后的數(shù)據(jù)我們統(tǒng)一叫他input.

4個(gè)基礎(chǔ),7個(gè)快捷

input包含11個(gè)字段,4個(gè)基礎(chǔ)字段,7個(gè)快捷字段, 這些都是為下一步進(jìn)行計(jì)算處理(computed)使用.

4個(gè)基礎(chǔ)字段

input包含4個(gè)基礎(chǔ)字段:eventType / point / changedPoints / nativeEvent, 接下來依次解釋.

eventType

eventType可以理解為輸入狀態(tài), 如touchstart/mousedown對應(yīng)start, touchmove/mousemove對應(yīng)move, touchend/mouseleave對應(yīng)end, touchcancel對應(yīng)cancel, 總計(jì)4種狀態(tài).

point

觸點(diǎn)信息, 存儲當(dāng)前觸點(diǎn)相對瀏覽器窗口左上角的坐標(biāo)(clientX, clientY), point是個(gè)數(shù)組, 存儲當(dāng)前的所有觸點(diǎn).

changedPoints

發(fā)生變化的觸點(diǎn)信息, 是個(gè)數(shù)組, 存儲著上一次觸點(diǎn)相對當(dāng)前觸點(diǎn)發(fā)生變化的觸點(diǎn)(初看有些繞, 如不明可留言.).

nativeEvent

如果是touch設(shè)備, 那么對應(yīng)touchEvent, 鼠標(biāo)對應(yīng)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;
// 默認(rèn)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個(gè)快捷字段

快捷字段均由基礎(chǔ)字段簡單衍生而來, 僅為了使用方便而直接放在這.

pointLength

對應(yīng)point數(shù)組的長度.

changedPointLength

對應(yīng)changedPoints的長度.

timestamp

當(dāng)前時(shí)間戳.

target

綁定事件的元素.

currentTarget

觸發(fā)事件所在元素.

center

觸點(diǎn)坐標(biāo), 如果是多點(diǎn), 那么對應(yīng)多點(diǎn)的中心坐標(biāo)(getCenter函數(shù)源碼).

x/y

對應(yīng)center.x和center.y

isFirst

是否本輪識別周期的開始, 如果當(dāng)前的eventType為start階段, pointLength和changedPointLength的長度相等, 那么可以判定, 當(dāng)前為開始.

isFinal

是否本輪識別周期的結(jié)束, 如果當(dāng)前的eventType為end或者cancel階段, 且所有觸點(diǎn)均離開, 那么判定為結(jié)束.

擴(kuò)展字段的源碼比較長, 請移步至倉庫.

下期預(yù)告

下期我們會講解computed, 計(jì)算階段比較復(fù)雜, 設(shè)計(jì)到input的開始/前一個(gè)/當(dāng)前狀態(tài)的計(jì)算, 大家可以提前預(yù)熱.

compute部分源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102915.html

相關(guān)文章

  • 用typescript開發(fā)手勢庫 - (1)web開發(fā)常用手勢有哪些?

    這只是個(gè)開頭 說在最前面,本文是一個(gè)系列文章的開頭, 這個(gè)系列里我會講如何用typescript開發(fā)一款支持pc和手機(jī)端的手勢庫any-touch, 以及通過jest讓你的代碼測試覆蓋率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目錄 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & r...

    raise_yang 評論0 收藏0

  • 不到30行, 用any-touch實(shí)現(xiàn)一個(gè)drawer

    摘要：一個(gè)手勢庫預(yù)覽的基本邏輯添加個(gè)一個(gè)是當(dāng)隱藏的時(shí)候打開隱藏的觸發(fā)開關(guān)一個(gè)是本身對把手和進(jìn)行進(jìn)行定位到界面的右側(cè)邊緣調(diào)整和把手的樣式這里把手主要是要設(shè)置背景色為透明具體樣式看下面代碼用分別給把手和添加拖拽手勢當(dāng)隱藏時(shí)拖拽把手向右通過返回的每 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); ...

    source 評論0 收藏0

  • 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

    摘要：一個(gè)手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個(gè)標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個(gè)知識點(diǎn)如何配置如何配置使用運(yùn)行項(xiàng)目所在的命令注為了閱讀體驗(yàn)我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    roundstones 評論0 收藏0

  • 用TypeScript開發(fā)手勢庫 - (2)tsconfig.json & rollup.c

    摘要：一個(gè)手勢庫往期目錄用開發(fā)手勢庫開發(fā)常用手勢有哪些用開發(fā)手勢庫統(tǒng)一化和事件不到行用實(shí)現(xiàn)一個(gè)標(biāo)題有點(diǎn)長今天的標(biāo)題有點(diǎn)長但不難講的都是工具配置和使用就個(gè)知識點(diǎn)如何配置如何配置使用運(yùn)行項(xiàng)目所在的命令注為了閱讀體驗(yàn)我把為什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

    cod7ce 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<