让hammer完美支持Pixi.js - 2D webG库

简介:

由于项目改造,采用2D webG的pixi库,那么基于canvas的结构上,事件就是最大的一个问题了

改造的原理很简单,把hammer里面的addEventListeners事件绑定给第三方库代替,事件的绑定由第三方控制即可

hammer是负责接收事件消息即可。

image

传递一个pixi引用,即每个canvas内部的精灵对象的引用,因为要给每一个对象绑定事件

 

hammer内部: 

image

hammer的addEventListeners事件绑定由第三方绑定替换

image

替换

image

 

注意一个的问题就是:

hammer给的ev是经过包装的对象,所以需要取ev.originalEvent,事件对象

image

 

最后一个修改touchAction类,canvas是没有,所以在涉及调用touchAction的时候,需要判断下取消

image

 

至此,hammer库很完美的支持了Pixi.js - 2D webG/canvas库。。。。


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/4059637.html,如需转载请自行联系原作者

相关文章
|
2月前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
118 1
用python执行js代码:PyExecJS库
|
20天前
|
JavaScript 前端开发 搜索推荐
Moment.js、Day.js、Miment,日期时间库怎么选?
【10月更文挑战第29天】如果你需要一个功能强大、插件丰富的日期时间库,并且对性能要求不是特别苛刻,Moment.js是一个不错的选择;如果你追求极致的轻量级和高性能,那么Day.js可能更适合你;而如果你有一些特定的日期时间处理需求,并且希望在性能和功能之间取得平衡,Miment也是可以考虑的。
|
24天前
|
存储 JavaScript 前端开发
decimal.js库的安装和使用方法
【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
43 3
|
2月前
|
JavaScript 前端开发
常用的 JavaScript 框架和库
常用的 JavaScript 框架和库
127 6
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
15 0
|
2月前
|
移动开发 JavaScript 数据可视化
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 库
JavaScript 库
20 0
|
3月前
|
JavaScript 前端开发 数据可视化
图像裁剪库Cropper.js的学习使用
图像裁剪库Cropper.js的学习使用
60 4
|
3月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
89 4
下一篇
无影云桌面