LoginSignup
0
1

More than 3 years have passed since last update.

PixiJS touchoverとtouchoutを実現する

Last updated at Posted at 2020-07-10

PixiJS で、touchover、touchout イベントを取得したい場合があった際に、
mouseover, mouseout イベントを取っておけば勝手に動くとおもっていたが、Touch環境で動作せず、また、touchover、touchout イベントがPixiJSにそもそも無く困ったので調査したメモ。

作成した、PIXI.Renderer の plugins.interaction.hitTest 関数に、
タッチ座標を渡してあげると、当たっているオブジェクトが返ってくるので
これを使って実現する。

動作コード(Codepen)

注) touch環境のみにて確認できるコード

See the Pen PixiJS emurate touchenter and touchout. by quqjp (@quqjp) on CodePen.

コード概要

touchover,touchout イベントを取りたいオブジェクトに、touchover、touchout メソッドを実装。
touchover,touchout イベントを取りたいオブジェクトを内包するオブジェクトを、interactive = true にたうえで、
touchstart,touchmove,touchendイベントを取る。

イベントのハンドラー内で、plugins.interaction.hitTest を用いて当たっているオブジェクトを取得。
渡ってくるオブジェクトの変化を判定しtouchover、touchoutを呼び出す。

plugins.interaction.hitTest の判定は、対象のオブジェクトのhitArea設定にも有効であるようなので、
hitAreaにpolygonが設定された複雑なhitAreaでも動作できそう。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1