技术具有"继承性、延展性"

修正为：

技术具有"延续性，延展性"

闲聊js16: 动画、数学与碰撞检测2(实现一个简单的事件分发和处理框架)_第1张图片

写生.jpg

本篇目的:

为什么不能使用DOM内置的事件分发系统
暂时先选择鼠标事件
实现一个简单的鼠标事件分发和处理框架
demo演示与验证

由于动画，数学，碰撞等demo演示，需要进行事件交互。
目前还没有事件分发系统，因此今天我们来实现一个简单的事件分发系统以及事件处理的流程

为什么不能使用DOM内置的冒泡事件系统

很简单，因为DOM事件系统仅能分发到canvas元素。

而我们的2D精灵系统是直接通过canvas2D绘制出来的，并没有并入到DOM文档树中，因此DOM 事件分发到canvas后，就结束了。

所以我们要在事件分发到canvas后，继续进行分发给每个精灵，让他们有机会接受到事件并进行处理。这就是今天的任务！！

暂时先选择鼠标事件

原因:

在手机端，竖屏显示范围太小了，查了一些资料，发现h5目前没有一个通用的进入页面直接横屏的功能，需要研究一下变通的实现方式。
如果一旦实现手机端自动横屏效果，我会将mouse事件更改为touch事件，也就是几句代码的事情
touch/mouse事件最大区别是move事件。只要鼠标移动就会产生mousemove事件。而touchmove事件必须按下移动才产生。后面我一些例子，建立在mousemove基础上
关键原因就是我现在还没实现h5页面自动横屏效果。导致手机演示不是很爽。

实现一个简单的鼠标事件分发和处理系统

需要一个函数，将窗口客户区坐标转换到canvas2D坐标表示,该函数就加在BLFRender2D中去吧:

   ToCanvasCoord(x, y) {
        var bbox = this.context.canvas.getBoundingClientRect();
        return {
            x: x - bbox.left * (this.context.canvas.width / bbox.width),
            y: y - bbox.top * (this.context.canvas.height / bbox.height)
        };
    }

原因和如何使用，等会demo会演示和解释

BLFSprite基类中增加鼠标事件处理方法:

   onMouseDown(x, y) {
        console.log("deal mouseDown event");
        return false;
    }

    onMouseUp(x, y) {
        console.log("deal mouseUp event");
        return false;
    }

    onMouseMove(x, y) {
        console.log("deal mouseMove event");
        return false;
    }

关于返回值true/false，请看下面的代码注释

BLFSpriteManager中增加事件分发函数:

dispatchMouseDownEvent(x, y) {
        //超级简单，用于演示用的事件分发体系
        //事件分发是核心之一
        //目前比较流行的有:dom3 level3事件系统
        //                ios responder 职责链事件系统
        //                android中那个复杂无比，效率底下的事件分发系统(会被骂吗?哈哈)

        for (let i = this.sprites.length - 1; i >= 0; i--) {
            //如果i指向的精灵事件处理完成(true)，就中断事件分发
            if (this.sprites[i].onMouseDown(x, y))
                return;
        }
    }

    dispatchMouseUpEvent(x, y) {
        for (let i = this.sprites.length - 1; i >= 0; i--) {
            //如果i指向的精灵事件处理完成(true)，就中断事件分发
            if (this.sprites[i].onMouseUp(x, y))
                return;
        }
    }

    dispatchMouseMoveEvent(x, y) {
        for (let i = this.sprites.length - 1; i >= 0; i--) {
            //如果i指向的精灵事件处理完成(true)，就中断事件分发
            if (this.sprites[i].onMouseMove(x, y))
                return;
        }
    }

如果循环中当前i指向的精灵事件处理完成(true)，就中断事件分发,退出函数
事件分发循环是从后到前方式(let i = this.sprites.length - 1; i >= 0; i--),这是因为当两个精灵重叠时，肯定是上面的精灵进行事件处理，而不是被遮挡住的精灵（先前景，后背景）
而绘制时，肯定是先背景，后前景(昨天孩子写生油画，老师讲解也强调如此，经典的画家算法)

最后，在BLFEngine2D的构造函数中将DOM 事件转发到各个精灵上:

       canvas.addEventListener("mousedown", (e) => {
            //先将客户区的点转换为相对canvas坐标系的点表示
            let pt = this.render.ToCanvasCoord(e.clientX, e.clientY);
            console.log("e.clientX = " + e.clientX + " e.clientY = " + e.clientY);
            console.log("canvasX = " + pt.x + " canvasY = " + pt.y);
            this.sprMgr.dispatchMouseDownEvent(pt.x, pt.y);
        }, false);

        canvas.addEventListener("mouseup", (e) => {
            //先将客户区的点转换为相对canvas坐标系的点表示
            let pt = this.render.ToCanvasCoord(e.clientX, e.clientY);
            this.sprMgr.dispatchMouseUpEvent(pt.x, pt.y);
        }, false);

        canvas.addEventListener("mousemove", (e) => {
            //先将客户区的点转换为相对canvas坐标系的点表示
            let pt = this.render.ToCanvasCoord(e.clientX, e.clientY);
            this.sprMgr.dispatchMouseMoveEvent(pt.x, pt.y);
        }, false);

关键的一步是将客户区的点转换为相对canvas坐标系的点表示。可能的情况是你的canvs画布的原点和客户区的原点没有重合时，如果不进行坐标变换，会出现非常大的问题
关于DOM3 level3 冒泡事件，我个人是非常喜欢的一种事件分发体系。其实使用中有很多诀窍。本系列中，我会专门抽一章来聊一聊冒泡事件。实际上，我从webkit中抽取了很多超级有用的代码，包括冒泡事件系统(webkit我个人感觉应该是超过100万行代码的庞大c++程序)