PIXI.js源码解析(5)之事件管理器——InteractionManager
来源:互联网 发布:淘宝联盟佣金怎么获得 编辑:程序博客网 时间:2024/05/14 18:35
在基本上所有的渲染框架中,都会提供原始事件的分发功能,比如监听某个对象的鼠标按下弹起,触控,等等。而且不单单是渲染引擎,原始事件的监听和分发几乎是所有gui框架的构建基础。
pixi中的原始事件分发主要是由InteractionManager完成的,InteractionManager首先捕获到原始事件,之后需要确定事件的触发对象,之后使用事件流逐层传递,事件在传递过程中一共会经过三个阶段,不清楚的可以搜索事件流,百度有很多详细的文章讲解,这里就不多说了。
首先我们要明确原始事件是怎么来的,对于pixi来说,他的底层就是浏览器,所以原始事件其实是浏览器中的鼠标,键盘事件,浏览器不断追溯下去,总会到达操作系统的事件处理,熟悉winapi的朋友应该比较清楚了,winapi对于鼠标,按键信息的处理。
总而言之,InteractionManager捕获到了原始事件,但是这个事件并不能直接使用,因为该事件的上下文是浏览器,而不是渲染引擎,该事件所包含的鼠标坐标全是在浏览器坐标系中的,还需要经过转换。
所以InteractionManager做的第二件事就是确定该事件真正的触发对象,这里需要经过一系列的矩阵运算,简单来说就是从根对象开始,进行点和bound的碰撞,然后不断递进到子对象,直到最后一个真正触发该事件的子对象为止。
获得子对象以后,要做的事情就很明确了,对原始事件进行包装,然后使用子对象将其发射出去,之后子对象就会发送该事件,这里就不管InteractionManager什么事了,接下来就是事件系统的处理。这一点要明确一下,事件系统是和InteractionManager分离的,事件系统只是起到事件的发送和监听的功能,而InteractionManager是对原始事件的捕获,然后借用事件系统将其发送出去,除了原始事件之外,事件系统还可以发送自定义事件等等。
前面也说了,这种原始事件的处理不单单出现在渲染框架中,几乎所有的gui框架也都是这种思路,捕获原始事件,然后确定触发对象(根据点和包围框的碰撞测试),之后使用事件系统发送。
- PIXI.js源码解析(5)之事件管理器——InteractionManager
- PIXI.js源码解析(1)——DisplayObject
- PIXI.js源码解析(2)——Transform
- PIXI.js源码解析(3)——Container
- PIXI.js源码解析(4)——Texture
- Pixi.js
- 前端动画渲染引擎pixi.js系列(4)如何实现鼠标交互事件
- Hololens API解析Input-InteractionManager
- 前端动画渲染引擎pixi.js系列(10)骨骼动画实现之DragonBones
- 前端动画渲染引擎pixi.js系列(5)Text文本和Graphics画笔工具
- H5 2D渲染引擎—Pixi.js简介及小demo
- H5 2D渲染引擎—Pixi.js 渲染器、舞台和精灵的创建
- H5 2D渲染引擎—Pixi.js 精灵的位置、大小、旋转、移动
- 风一样的HTML5 2D渲染引擎Pixi.js——真正意义的跨平台开发工具
- cocos2dx-js 鼠标事件管理器
- RxBinding详解之clicks事件源码解析
- Etherlab源码解析----同步管理器SM配置(过程数据)
- Etherlab源码解析----同步管理器SM配置(邮箱通信)
- 欢迎使用CSDN-markdown编辑器
- 占楼
- DNS服务原理与基础
- Log4cpp介绍及使用
- 浅复制and深复制
- PIXI.js源码解析(5)之事件管理器——InteractionManager
- 虚拟机的安装
- 打乱数组排序
- 206. Reverse Linked List
- PHP的环境搭建(艰辛搭配经历,最后终于搭建好了。HTTP Error 404. The requested resource is not found.解决方法之一)
- java鬼混笔记:lucene 1、简单的创建索引和查询
- Memcached, Redis, MongoDB区别
- PageBean
- 总结-2017/9/24