用TypeScript开发手势库 - (3)统一化Mouse和Touch事件

BigNerdCoding 发布于2019-08-23 16:20 / 2089人阅读

摘要：一个手势库往期目录用开发手势库开发常用手势有哪些用开发手势库开发常用手势有哪些不到行用实现一个简单看下架构实现输入格式统一为了同时支持鼠标和设备我们第一步把种设备产生数据统一化统一化后的数据我们统一叫他个基础个快捷包含个字段个基础字

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, 接下来依次解释.

eventType

eventType可以理解为输入状态, 如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部分源码

GPU云服务器云服务器 mouse事件 touch事件 mouse-hover-事件 web 手势控制库 webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102915.html

用typescript开发手势库 - (1)web开发常用手势有哪些?

这只是个开头说在最前面,本文是一个系列文章的开头, 这个系列里我会讲如何用typescript开发一款支持pc和手机端的手势库any-touch, 以及通过jest让你的代码测试覆盖率100%. showImg(https://segmentfault.com/img/bVbp3B0?w=936&h=246); 目录用TypeScript开发手势库 - (2)tsconfig.json & r...

raise_yang 2019-08-23 16:03 评论0 收藏0
不到30行, 用any-touch实现一个drawer

摘要：一个手势库预览的基本逻辑添加个一个是当隐藏的时候打开隐藏的触发开关一个是本身对把手和进行进行定位到界面的右侧边缘调整和把手的样式这里把手主要是要设置背景色为透明具体样式看下面代码用分别给把手和添加拖拽手势当隐藏时拖拽把手向右通过返回的每 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); ...

source 2019-08-23 16:28 评论0 收藏0
用TypeScript开发手势库 - (2)tsconfig.json & rollup.c

摘要：一个手势库往期目录用开发手势库开发常用手势有哪些用开发手势库统一化和事件不到行用实现一个标题有点长今天的标题有点长但不难讲的都是工具配置和使用就个知识点如何配置如何配置使用运行项目所在的命令注为了阅读体验我把为什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

roundstones 2019-08-23 16:15 评论0 收藏0
用TypeScript开发手势库 - (2)tsconfig.json & rollup.c

摘要：一个手势库往期目录用开发手势库开发常用手势有哪些用开发手势库统一化和事件不到行用实现一个标题有点长今天的标题有点长但不难讲的都是工具配置和使用就个知识点如何配置如何配置使用运行项目所在的命令注为了阅读体验我把为什么不用放在的本文的最 showImg(https://segmentfault.com/img/remote/1460000018610388?w=800&h=210); an...

cod7ce 2019-08-02 16:08 评论0 收藏0