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 で廃止されたようです。