什么是 @pixi/interaction
@pixi/interaction 是一个 pixijs 库的插件,为用户提供丰富的交互能力,例如鼠标悬停、单击、双击、滚动等。
安装 @pixi/interaction
使用 npm 安装:
npm install @pixi/interaction
引入 @pixi/interaction
import * as PIXI from 'pixi.js'; import { InteractionManager } from '@pixi/interaction'; const app = new PIXI.Application({ width: 400, height: 300 }); // 引入 @pixi/interaction const interactionManager = new InteractionManager(app.renderer);
使用 interaction
鼠标悬停
-- -------------------- ---- ------- ----- ------ - ------------------------------ ------------------ - ----- ---------------------- -- -- - ------------ - ---- --- --------------------- -- -- - ------------ - -- --- ---------------------------
单击和双击
-- -------------------- ---- ------- ----- ------ - ------------------------------ ------------------ - ----- ----------------- - ----- ------------------------ ------- -- - -- ----------------- --- -- - -- ---- - ---- -- ----------------- --- -- - -- ---- - --- ---------------------------
滚动
-- -------------------- ---- ------- ----- ------ - ------------------------------ ------------------ - ----- ------------ - ---- ------------- - ---- -- ------- ----- --------- - --- ----------------- --------------------- - ----- --------------- - ------------------- ---------------- - -------------------- ----------------- - --- ----------------- -- ---------------- ------------------ ------------------------------ -- ---- --- ---------- - ------ --- ------------ - --- ------------- --------------------------- ------- -- - ---------- - ----- ------------------------------------- --- --------------------------- ------- -- - -- ------------ - -------------------- -- -------------------- - ---------------- -------------------- -- -------------------- - ---------------- ------------------------------------- - --- ------------------------- -- -- - ---------- - ------ --- -------------------------- -- -- - ---------- - ------ --- ---------------------------
总结
@pixi/interaction 是一个非常有用的 pixijs 插件,可以极大的提升交互体验。本文介绍了如何安装和使用 @pixi/interaction,同时介绍了悬停、单击、双击和滚动的实现方法。希望对初学 pixijs 的前端开发者有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/164500