PixiJS学习（10）事件机制

2024-05-09 12:57:01

简介

事件机制是人机交互的前提，用户在进行操作（点击）之后，页面对于事件的反馈和相应。针对 Pixi 的事件机制，主要还是比较常规的一些事件：鼠标事件、触摸事件。

例如：点击事件（tap：移动端，click：pc端）、触摸事件（touchstart：开始触摸，touchmove：触摸移动，touchend：结束触摸）

事件绑定/解除

在 PixiJs 中对于事件的绑定比较简单，首先将对象的 interactive 设置为 true ，然后是 on 进行绑定，使用 off 进行解绑操作。

let texture = PIXI.Texture.fromImage('../images/2/1_01.png');
let myImg = new PIXI.Sprite(texture);
myImg.scale.set(0.5);
myImg.alpha = 0.5;
// 设置是否可以交互
myImg.interactive = true;
// 绑定点击事件以及回调方法
myImg.on('tap', e => {console.log(e.type);console.log(e.currentTarget);
});// 事件函数
function imgTap(e){console.log('这是一个函数');console.log(e.type);
}// 增加绑定事件
// myImg.on('tap', imgTap);
// 解除绑定事件
// myImg.off('tap', imgTap);

关于事件回调方法的参数，主要有 type （类型：上述代码的类型就是 tap）、currentTarget （当前对象）。

在 PixiJs 中，事件机制相对比较简单，就是设置对应交互的回调方法即可，特别要注意的就是需要设置操作对象的属性 interactive = true。

但是在实际生产过程中，页面的人机交互没有这么简单，不会只是简单的点击。可能会有拖拽、旋转、缩放……在这个过程中，我需要使用第三方拖拽库去实现复杂的效果，推荐一个库（Hammer.JS - Hammer.js）。

PixiJs 中的事件绑定就可以做选中状态。

注意事项：

必须设置操作对象的属性
灵活使用第三方的库

PixiJS学习（10）事件机制相关推荐

【JavaScript】JS事件机制学习
常用的事件通过事件机制,达到与用户的交互,与java的swing交互类似. 主要是结合js的函数使用. 当你添加一个事件之后没有达到想要的效果时,就要检查一下是不是给HTML标签添加了合适的事件,以 ...
10.QT事件机制源码时序分析（中）
接上一篇文章https://blog.csdn.net/Master_Cui/article/details/109162220,上篇文章已经说过,在Ubuntu18.04,QT的事件机制实际上是采用 ...
【初窥javascript奥秘之事件机制】论“点透”与“鬼点击”
前言最近好好的研究了一番移动设备的点击响应速度,期间不断的被自己坑,最后搞得焦头烂额,就是现在可能还有一些问题,但是过程中感觉自己成长不少, 最后居然感觉对javascript事件机制有了更好的认识 ...
我也来说说js的事件机制
原文链接:http://www.w3cfuns.com/notes/17398/8062de2558ef495ce6cb7679f940ae5c.html 学js,不懂事件机制,基本可以说学了js,就 ...
python 线程安全的数据类型_详解python多线程、锁、event事件机制的简单使用
详解python多线程.锁.event事件机制的简单使用发布时间:2020-09-25 02:04:12 来源:脚本之家阅读:117 作者:君惜线程和进程 1.线程共享创建它的进程的地址空间,进 ...
android 事件机制总结
http://www.cnblogs.com/sunzn/archive/2013/05/10/3064129.html http://www.cnblogs.com/sunzn/archive/20 ...
手写Spring-第十章-让我看看！基于观察者模式的事件机制
前言解耦,是我们一直以来都很重视的事情.而事件,就是我们实现解耦的一大利器.通过观察者模式,我们可以实现事件的发布和订阅之间的解耦.而且在日常开发中,事件的使用场景也是很常见的.比如用户注册完成,可 ...
jQuery中的事件机制深入浅出
昨天呢,我们大家一起分享了jQuery中的样式选择器,那么今天我们就来看一下jQuery中的事件机制,其实,jQuery中的事件机制与JavaScript中的事件机制区别是不大的,只是,JavaScr ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...

最新文章

热门文章