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

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

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

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

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

hammer内部:

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

替换

注意一个的问题就是:

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

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

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

时间: 2024-10-24 10:58:17

让hammer完美支持Pixi.js - 2D webG库的相关文章

变态版大鱼吃小鱼-基于pixi.js 2D游戏引擎

之前用CSS3画了一条??,那还是一年前的事情了,这次我用一天的时间去研究了一下pixi.js,一个基于webgl的2D游戏引擎,然后用它做了一个demo出来,变态版大鱼吃小鱼. 试玩地址:变态版大鱼吃小鱼 这是一个h5游戏排名,我最看好pixi,刚开始也试过create.js,不过它不支持webgl,这是一个硬伤,然后又了解了一下Phaser,基于pixi开发的,功能肯定比pixi强大,不过我觉得它太重了,好像是500多K,不适合做小游戏,而pixi只有90K,并且支持webgl,所以就选它了

让IE完美支持HTML5(css3)解决办法

貌似以前与大家分享过此类问题,HTML5/CSS3那些炫丽实用的效果,真得让人很眼谗,但悲催的IE浏览器,只有IE9才支持HTML5,这让我们很失望啊,但真的就没有一点办法了吗?其实补救方法还是有的,下面介绍的几种方法,可让客户端浏览器完美支持CSS3.HTML5: 第一种方法:IE9以下版本的IE将创建HTML5标签, 非IE浏览器会忽略这段代码,因此不会发生http请求,也就不影响网页执行效率. <!--[if lt IE9]> <script> (function() { i

让nginx完美支持Thinkphp的配置

习惯了用apache后,当第一次用nginx时,把原来的项目(thinkphp框架)部署在新服务器上的时候,惊呆了! 所有的URL模式下都不能正常运行,甚至连css,js文件都不能正常加载. 原因是ngibx不支持pathinfo 主要是需要配置nginx location / { root D:/wnmp/www; index index.html index.htm; #访问路径的文件不存在则重写URL转交给ThinkPHP处理 if ( !-e $request_filename ) {

Ionic 整合 pixi.js

最近做了个app,上线google play不大顺利,说是有假冒行为,然后改了下icon和名字以及描述,但是没啥信息去上,于是暂时放下搞点别的. 因为近期看到个比较有趣的绘图创意, 于是想通过ionic整合pixi来实现, 整合途径来自这里: Integrate pixijs - typescript in Ionic 2 with npm 为啥是pixi呢?因为pixi目前来讲是地球上效率最好的js 2d渲染框架. 基于pixi的游戏框架phaser更是霸气十足. 以下是在ionic中使用pi

pixi.js tools

Awesome pixi.js tools A list of useful libs/resources/tools for renowned html5 rendering framework Websites and forums github organization. -pixi相关的git github main repository - pixi git pixijs.com – 官网. docs – 官方文档 examples – 官方例子 html5gamedev forum

pixi.js 总结

1:pixi.js的优点 代码简单,性能高效,扩展性强. PixiJS的优势在于速度. 在2D渲染方面,PixiJS是最快的.(官网上说的) PixiJS有着"简单"的代码, 友好的API, 让PixiJS能够在您专注于创造令人难以置信的多平台体验 PixiJS易扩展.通过装一些插件,可以更方便的实现一些功能. 2 核心 Sprite Sprite对象是渲染到屏幕的所有纹理对象的基础 原文地址:https://www.cnblogs.com/honghong87/p/9942768.h

VCL时代最强大的控件DevExpress 2014最新版实测完美支持XE6

要说VCL时代最优秀最强大的控件非DevExpress莫属,因为有了太多的惊喜,也有了太多的方便让人不用大费周折去为一些界面层的东西挖空心思. DevExpress是 Developer Express的缩写,DevExpress是一家全球知名的控件开发公司. DevExpress 也特指此公司出品的控件集合或某系列控件或其中某控件.DevExpress 开发的控件有很强的实力,不仅功能丰富,应用简便,而且界面华丽,更可方便定制.对于编程人员来说是个不错的选择. 这是一个互联网的时代,我们应遵循

利用pixi.js制作精灵动画

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊. 关于实现精灵动画的方式有很多种,我自己实践过的主要有三种: 1: 把动作分解成一系列连续的编号的图片,如img0.jpg,img1.jpg,img2.jpg...,然后利用setIntval等定时器不断的去更换图片地址. 2: 把动作按照一定的间距排列在一张图片上,利用css3的动画帧,做出动画

OkHttpUtils-2.0.0 升级后改名 OkGo,全新完美支持 RxJava,比 Retrofit 更简单易用。

okhttp-OkGo 项目地址:jeasonlzy/okhttp-OkGo 简介:OkHttpUtils-2.0.0 升级后改名 OkGo,全新完美支持 RxJava,比 Retrofit 更简单易用.该库是封装了 okhttp 的网络框架,支持大文件上传下载,上传进度回调,下载进度回调,表单上传(多文件和多参数一起上传),链式调用,可以自定义返回对象,支持 Https 和自签名证书,支持 cookie 的持久化和自动管理,支持四种缓存模式缓存网络数据,支持 301 和 302 重定向,扩展了