Pixi.js: Eventos de interação no nível da janela de visualização

Criado em 19 mai. 2015  ·  19Comentários  ·  Fonte: pixijs/pixi.js

No momento, a única maneira de obter eventos de interação no nível da janela de visualização é criar um DO fictício e forçar sua largura para o tamanho da janela de visualização.

O gerenciador de interação deve lidar melhor com isso.

Comentários muito úteis

Existe alguma informação sobre como isso funciona?

Parece que tenho uma implementação básica funcionando ao adicionar .on ('mousedown' .. a um palco, mas ele só dispara quando o mouse é exibido em um gráfico dentro do palco quando eu quero que ele dispare em qualquer lugar do palco.

É porque um palco não tem representação gráfica real e, portanto, se você não clicar em um dos objetos de palco / contêineres, você não está realmente clicando no palco e devo fazer o que ivanpopelyshev está sugerindo?

EDITAR: elimine isso, a solução correta é criar um novo gerenciador de interação passando no renderizador, assim:

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

Todos 19 comentários

: +1: isso está na minha lista de tarefas

Ei pessoal! Eu gostaria de te ajudar com isso. A ideia aqui é evitar o cálculo de eventos fora da janela de visualização?

Não, a ideia é que agora você não pode manipular eventos de interação em toda a janela de visualização. Na v2, você pode ouvir eventos no palco e retornar todos os eventos em toda a janela de visualização, independentemente de haver algo para interagir ou não. Atualmente na v3 isso é impossível.

Relacionado a # 2071

: +1:

Este ainda é o caso com a versão 4?

Sim, ainda é o caso. No momento, a melhor maneira é criar um retângulo e atualizá-lo ao redimensionar

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

Os eventos de interação global estão disponíveis no InteractionManager via # 2658. Isso está em 4.0.0-rc3

Existe alguma informação sobre como isso funciona?

Parece que tenho uma implementação básica funcionando ao adicionar .on ('mousedown' .. a um palco, mas ele só dispara quando o mouse é exibido em um gráfico dentro do palco quando eu quero que ele dispare em qualquer lugar do palco.

É porque um palco não tem representação gráfica real e, portanto, se você não clicar em um dos objetos de palco / contêineres, você não está realmente clicando no palco e devo fazer o que ivanpopelyshev está sugerindo?

EDITAR: elimine isso, a solução correta é criar um novo gerenciador de interação passando no renderizador, assim:

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

@SamStonehouse : Isso ajuda?

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

// add backdrop to scene graph...

Ter interactive = false pode muito bem ter sido o problema com o estágio, não pude verificar, mas isso não importa agora, pois o gerenciador de interação parece fazer o que eu preciso, o único problema que tenho agora é esse direito os cliques não estão sendo captados porque, em vez disso, abrem um menu de contexto, mas isso não está relacionado a este PR.

@SamStonehouse algo assim:

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

Observe também que # 2658 apenas emite um subconjunto de eventos de outra forma fornecidos por InteractionManager (por exemplo, não rightdown ).

@Bigtimebuddy interessante que funciona também, não sei qual seria o jeito correto.

renderer.plugins ou por meio de new PIXI.interaction.InteractionManager alguma ideia?

@akbr Presumi que esquerda / direita / meio seriam tratadas pelo mesmo evento mousedown, o botão do meio parece ser

@SamStonehouse Embora ambos funcionem, eu recomendaria renderer.plugins pois já está criado.

@bigtimebuddy Ótimo, obrigado

Também resolvi o problema do clique com o botão direito, na verdade é outro evento do mouse (que eu diria que é intuitivo).

Obrigado a todos

Olá, isso está funcionando de maneira fantástica para implementar a funcionalidade de panorâmica / zoom com o Pixi v4. No entanto, e.stopPropagation não parece estar mais funcionando para sprites dentro da janela de visualização. Existe uma maneira de fazer com que os eventos da janela de visualização funcionem com curto-circuito?

Como alternativa, existe uma maneira de implementar uma funcionalidade de arrastar e deslocar sem usar o renderer.plugins.interaction ? Anteriormente, eu tinha meu contêiner de palco configurado com eventos de mouse e um PIXI.Rectangle hitArea e estava tentando fornecer ao palco um novo cada vez que o usuário fazia movimentos panorâmicos, mas isso parece não estar funcionando por algum motivo - Não consigo deslocar para fora da área em que o primeiro hitArea foi definido e, ocasionalmente, o evento mouseup não é registrado.

EDIT: Consegui fazer meu método anterior funcionar, descobri que estava aplicando o deslocamento incorreto ao meu recém-criado hitArea Rectangles, mas ainda estou curioso para saber como interceptar eventos que atingiriam renderer.plugins.interaction visto que parece um método muito mais limpo. Obrigado por uma ótima biblioteca!

Este tópico foi bloqueado automaticamente, pois não houve nenhuma atividade recente depois que ele foi fechado. Abra um novo problema para bugs relacionados.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

madroneropaulo picture madroneropaulo  ·  3Comentários

Darker picture Darker  ·  3Comentários

MRVDH picture MRVDH  ·  3Comentários

gigamesh picture gigamesh  ·  3Comentários

YuryKuvetski picture YuryKuvetski  ·  3Comentários