13

PIXI.JS 点击获取当前坐标

 2 years ago
source link: https://www.joynop.com/p/426.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

PIXI.JS 点击获取当前坐标

PIXI Canvas 点击事件如下
​
image.png

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

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

    })
TypeScript

通过监听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
TypeScript

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

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

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

    const container = new PIXI.Container()

    app.stage.addChild(container)
TypeScript

PIXI .DisplayObject

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

Display objects implemented in PixiJS

Display ObjectDescriptionPIXI.ContainerAdds support for children to DisplayObjectPIXI.GraphicsShape-drawing display object similar to the Canvas APIPIXI.SpriteDraws textures (i.e. images)PIXI.TextDraws text using the Canvas API internallyPIXI.BitmapTextMore scaleable solution for text rendering, reusing glyph texturesPIXI.TilingSpriteDraws textures/images in a tiled fashionPIXI.AnimatedSpriteDraws an animation of multiple imagesPIXI.MeshProvides a lower-level API for drawing meshes with custom dataPIXI.NineSlicePlaneMesh-relatedPIXI.SimpleMeshv4-compatibile meshPIXI.SimplePlaneMesh-relatedPIXI.SimpleRopeMesh-related

打赏: , - （付款时请注明赞赏）

标签: API, Canvas, pixi, container, tion


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK