Pixi.js: События взаимодействия на уровне области просмотра

: +1: это моя задача

Эй, ребята! Я хотел бы помочь вам в этом. Идея здесь в том, чтобы избежать вычисления событий вне области просмотра?

Нет, идея в том, что прямо сейчас вы не можете обрабатывать события взаимодействия во всем окне просмотра. В версии 2 вы могли прослушивать события на сцене, и он возвращал все события по всему окну просмотра, независимо от того, было ли что-то там, с чем нужно взаимодействовать, или нет. В настоящее время в v3 это невозможно.

Относится к # 2071

: +1:

Это все еще так с версией 4?

Да, это все еще так. Прямо сейчас лучший способ - создать прямоугольник и обновлять его при изменении размера.

stage.hitArea = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

События глобального взаимодействия доступны в InteractionManager через # 2658. Это в 4.0.0-rc3

Есть какая-нибудь информация о том, как это работает?

Кажется, у меня есть базовая реализация, добавляющая .on ('mousedown' .. в сцену, но она срабатывает только при наведении указателя мыши на графику внутри сцены, когда я хочу, чтобы он запускался в любом месте сцены.

Это потому, что этап не имеет реального графического представления, и поэтому, если вы не нажимаете на один из объектов этапов / контейнеров, вы на самом деле не нажимаете на этап, и я должен сделать то, что предлагает ivanpopelyshev?

РЕДАКТИРОВАТЬ: Поцарапайте это, правильное решение - создать новый диспетчер взаимодействия, передаваемый в рендерер, например:

const interactionManager = new PIXI.interaction.InteractionManager(renderer);
interactionManager
    on('mousedown', _onMouseDown)
    on('mouseup', _onMouseUp)
    on('mouseupoutside', _onMouseUp);

@SamStonehouse : Это помогает?

let backdrop = new PIXI.Container();
backdrop.interactive = true;
backdrop.containsPoint = () => true;

// add backdrop to scene graph...

Наличие interactive = false вполне могло быть проблемой со сценой, я не мог это проверить, но сейчас это не имеет значения, поскольку диспетчер взаимодействия, кажется, делает то, что мне нужно, единственная проблема, которая у меня сейчас есть, - это право клики не собираются, потому что вместо этого они открывают контекстное меню, но это не связано с этим PR.

@SamStonehouse примерно так:

var renderer = new PIXI.autoDetectRenderer();
renderer.plugins.interaction.on('mousedown', function(){
    console.log("Mouse is down");
});

Также обратите внимание, что # 2658 испускает только подмножество событий, иначе предоставляемых InteractionManager (например, не rightdown ).

Интересный @bigtimebuddy, который тоже работает, я не знаю, какой из них будет правильным.

renderer.plugins или через new PIXI.interaction.InteractionManager есть идеи?

@akbr Я предполагал, что левый / правый / средний будет обрабатываться одним и тем же событием mousedown, средняя кнопка кажется

@SamStonehouse Хотя оба работают, я бы порекомендовал renderer.plugins поскольку он уже создан.

@bigtimebuddy Большое спасибо

Я также решил проблему щелчка правой кнопкой мыши, это действительно еще одно событие мыши (которое, я бы сказал, интуитивно понятно).

Спасибо всем

Привет, это фантастически работает для реализации функций панорамирования / масштабирования в Pixi v4. Однако e.stopPropagation , похоже, больше не работает для спрайтов внутри области просмотра. Есть ли способ заставить события окна просмотра работать с коротким замыканием события?

В качестве альтернативы, есть ли способ реализовать функцию перетаскивания без использования renderer.plugins.interaction ? Раньше у меня был контейнер сцены, настроенный с помощью событий мыши и PIXI.Rectangle hitArea и я пытался предоставить сцене новый каждый раз, когда пользователь панорамирует, но это, похоже, не работает по какой-то причине - Я не могу панорамировать за пределами области, в которой была определена первая hitArea, и иногда событие mouseup не регистрируется.

РЕДАКТИРОВАТЬ: Мне удалось заставить свой прежний метод работать, оказалось, что я применял неправильное смещение к своим недавно созданным прямоугольникам hitArea, но мне все еще любопытно узнать, как перехватывать события, которые попадут в renderer.plugins.interaction поскольку этот метод кажется более чистым. Спасибо за отличную библиотеку!

Этот поток был автоматически заблокирован, поскольку после его закрытия в последнее время не было никаких действий. Пожалуйста, откройте новую проблему для связанных ошибок.