PIXI.JS 点击获取当前坐标

PIXI Canvas 点击事件如下
​

   onMounted(() => {
      console.log('mounted')

      app.renderer.plugins.interaction.on('pointerdown', (event: PIXI.InteractionEvent) => {
        let ax = event.data.getLocalPosition(container)
        console.log(ax)
      })

    })

通过监听pointerdown事件获取点击时的PIXI Event
​

可以获取相关的信息，其中有一个Global.Point 这个坐标是相对的，根据不同的页面大小会显示不同的坐标，并非真是坐标，需要对其加以转换
​

根据文档https://pixijs.io/examples/#/interaction/dragging.js 可知，有getLocalPosition相关API
​

InteractionData.getLocalPosition<PIXI.Point>(displayObject: PIXI.DisplayObject, point?: PIXI.Point | undefined, globalPos?: PIXI.IPointData | undefined): PIXI.Point

getLocalPositio（） 方法需要有对应的DisplayObject
​

若画布中有Graphics、Sprite 或其他类型的DisplayObject 则直接引用即可
​

如无特殊DisplayObject 可以添加一个PIXI.Container 作为容器

    const container = new PIXI.Container()

    app.stage.addChild(container)

PIXI .DisplayObject

在屏幕上呈现的所有对象的基类。
​

Display objects implemented in PixiJS

Display Object	Description
PIXI.Container	Adds support for children to DisplayObject
PIXI.Graphics	Shape-drawing display object similar to the Canvas API
PIXI.Sprite	Draws textures (i.e. images)
PIXI.Text	Draws text using the Canvas API internally
PIXI.BitmapText	More scaleable solution for text rendering, reusing glyph textures
PIXI.TilingSprite	Draws textures/images in a tiled fashion
PIXI.AnimatedSprite	Draws an animation of multiple images
PIXI.Mesh	Provides a lower-level API for drawing meshes with custom data
PIXI.NineSlicePlane	Mesh-related
PIXI.SimpleMesh	v4-compatibile mesh
PIXI.SimplePlane	Mesh-related
PIXI.SimpleRope	Mesh-related

​