pixi 视口拖坏工作后 select 一个孩子

Question

When I drag on an empty stage, it moves fine.

But when I do this on my children, it gets annoying.

import { Application, Sprite, Texture } from 'pixijs';
import { Viewport } from 'pixi-viewport'

const app = new Application({
backgroundAlpha: 1,
width: innerWidth, height: innerHeight,
antialias: true,
})
document.body.appendChild(app.view)

const stage = new Viewport({
screenWidth: window.innerWidth,
screenHeight: window.innerHeight,
worldHeight: 1000,
worldWidth: 1000,
})
app.stage.addChild(stage)
stage.drag().pinch().wheel().decelerate().setZoom(0.5).clampZoom({ maxScale: 2, minScale: 0.3 }).interactiveChildren = true

for (let x = 0; x < 25; x++) {
for (let y = 0; y < 25; y++) {
Spawn(x, y)
}
}

function Spawn(x, y) {
const box = Sprite.from(Texture.WHITE)
box.position.set(x * Texture.WHITE.width, y * Texture.WHITE.height)
box.scale.set(0.90)
box.on('click', () => console.log('box clicked!'))
box.interactive = true
stage.addChild(box)
}

Video of the problem

I want to move on the boxes and click on them as well.

Answer 1

You can prevent the propagation of pointerdown events on the boxes. As a result, the viewport dragging will never start since the viewport will not receive said event:

box.on('pointerdown', (e) => {
  e.stopPropagation();
});

This is the related documentation.