添加到容器时添加到 Pixi Sprites 的鼠标按下事件不起作用

Question

使用 PIXI.js 我将 PIXI.Sprites 的网格添加到 PIXI.container。所有 Sprites 都被标记为交互式，并附加了鼠标按下事件来调用方法 selectTile。此方法应更改选定的 Sprites tint 和 alpha 但它没有这样做：

Sprite创建和事件函数的代码摘录：

注意：为简洁起见，此处省略了这些片段中任何未声明的变量。

createGrid() {
let piecesGroup = new PIXI.Container();
let piecesIndex = 0;

container.addChild(piecesGroup);
stage.addChild(container);

for (let row = 0; row < rowSize; row++) {
  for (let col = 0; col < colSize; col++) {

    xPos = col * 256;
    yPos = row * 256;

    imgTile = new PIXI.Sprite(this.imageFrame(tileSheetTexture, xPos, yPos, currentTileSize, currentTileSize));
    imgTile.buttonMode = true;
    imgTile.interactive = true;
    imgTile.x = xPos;
    imgTile.y = yPos;
    imgTile.name = `imgTile${row.toString()}x${col.toString()}`;
    imgTile.currentIndex = piecesIndex;
    imgTile.targetIndex = shuffledIndexArray[piecesIndex];
    imgTile.alpha = this.get('currentGame.TILE_ALPHA');
    imgTile.row = row;
    imgTile.col = col;
    imgTile.isSelected = false;
    imgTile.isLocked = false;
    imgTile
      .on('mousedown', this.selectTile)
      .on('touchstart', this.selectTile);

    piecesGroup.addChild(imgTile);

    piecesIndex++;
  }
}
renderer.render(stage);

},

selectTile(e) {
  const tile = this; //e.target;

  console.log(`tile: ${tile.name}`);

if (!tile.isSelected) {
  tile.alpha = 0.2;
  tile.tint = 0x000000;
} else {
  tile.alpha = 1;
  tile.tint = 0xFFFFFF;
}
tile.isSelected = !tile.isSelected;

console.log(
  `typeof e: ${typeof e},
      isSelected: ${tile.isSelected},
      selectTile: {name: ${tile.name},
      index: ${tile.currentIndex},
      target: ${tile.targetIndex}}`
);

},

selectTile 方法正在记录所选 Sprite 的正确属性。所以我认为这与添加到 PIXI.Container?

的精灵有关

Answer 1

更改对象的属性后需要重新渲染。

做到这一点的一个好方法是只包含一个将持续更新的函数，以便在下次刷新时自动显示任何更改。

function update(){
    requestAnimFrame(update);
    renderer.render(stage);
};
update();

添加到容器时添加到 Pixi Sprites 的鼠标按下事件不起作用

Mousedown events added to Pixi Sprites when added to container not working

pixi.js