Pixi js - нужно сделать фон кликабельным

Question

Мне нужно щелкнуть по фону и получить позицию щелчка.

Я попытался добавить прослушиватель событий на сцену, как это

app.stage.interactive = true;
app.stage.on('click', function(){
    console.log('hello');
})

, но это работает, только если я нажимаю на элемент внутри сцены, а не на сам фон.

Мне нужно сделать спрайт в качестве фона, если да, как мне установить цвет фона и убедиться, что он остается под всеми другими элементами?

Answer 1

Этап - это PIXI.Container, что означает, что в основном это пустой узел, который может содержать потомков. У него нет собственных размеров, поэтому, когда диспетчер взаимодействия отправляется на проверку нажатия, он не обнаруживается.

Ваше предложение добавить фоновый спрайт, вероятно, является самым простым решением. Вы можете добавить его так:

// Create the background sprite with a basic white texture
let bg = new PIXI.Sprite(PIXI.Texture.WHITE);
// Set it to fill the screen
bg.width = app.screen.width;
bg.height = app.screen.height;
// Tint it to whatever color you want, here red
bg.tint = 0xff0000;
// Add a click handler
bg.interactive = true;
bg.on('click', function(){
  console.log('hello');
});
// Add it to the stage as the first object
app.stage.addChild(bg);

// Now add anything else you want on your stage
...

Pixi JS отображает объекты по порядку, поэтому, если вы добавите фоновый спрайт в качестве первого дочернего элемента стадии приложения, он будет отображаться позади всего остального содержимого. При проверке нажатия на щелчок это будет последний проверенный объект, поэтому щелчок будет улавливаться на фоне сцены. Обратите внимание, что для «блокирования» щелчков другим объектам необходимо установить значение interactive = true, даже если к ним не прикреплен обработчик щелчков!

Answer 2

Возможное решение - добавить событие в представление приложения.

app.renderer.view.addEventListener('click', function(e) {
  console.log(e);
});