Edited at

【PixiJS】ポインター・マウス座標取得【相対・絶対】


1. 相対座標取得

HTML, CSS でキャンバスのサイズを拡大縮小したときに、相対的な座標を取得する方法です。

特定の PIXI.DisplayObject に対する相対位置を知りたいときにも有効です。


1.1. event から取得

.on('click', listener) などのイベントリスナー内で使うことを仮定。

const listener = (event) => {

const position = event.data.getLocalPosition(event.currentTarget);
};

event.currentTarget の代わりに具体的な PIXI.DisplayObject を指定することも可。

参考「[pixi.js] MagicLight (4) ~Sprite, TouchEvent~ | にゃあプロジェクト


1.2. event を使わずに取得

Ticker で取得するときなどに使用?

// app: PIXI.Application

// displayObject: PIXI.DisplayObject

const position = app.renderer.plugins.interaction.mouse.getLocalPosition(displayObject);

renderer.plugins.interaction.mouse の中身は event.data と同じく PIXI.interaction.InteractionData です。

参考「PIXI.interaction.InteractionData - PixiJS API Documentation

参考「PIXI.CanvasRenderer - PixiJS API Documentation

参考「PIXI.WebGLRenderer - PixiJS API Documentation


2. 絶対位置を取得

キャンバスの拡大縮小に関わらない座標が取得できます。

// app: PIXI.Application

app.renderer.plugins.interaction.mouse.global.x
app.renderer.plugins.interaction.mouse.global.y

参考「Pixi.jsでマウスクリックなどのインタラクティブ性をつける - code snippets


3. 廃止

最新バージョンでは廃止されて使えない方法なのですが、検索すると出てくるので一応書いておきます。

// stage: PIXI.Stage

stage.getMousePosition()

参考「簡単アニメーション!Pixi.jsを触ってみる!(6)インタラクションに挑戦!(のつづき) - Qiita

v3 で廃止されたようです。