Pixi.js: Interaktionsereignisse auf Viewport-Ebene

Erstellt am 19. Mai 2015  ·  19Kommentare  ·  Quelle: pixijs/pixi.js

Momentan besteht die einzige Möglichkeit, Interaktionsereignisse auf Ansichtsfensterebene zu erhalten, darin, ein Dummy-DO ​​zu erstellen und seine Breite auf die Ansichtsfenstergröße zu erzwingen.

Der Interaktionsmanager sollte dies besser handhaben.

Hilfreichster Kommentar

Gibt es Informationen zur Funktionsweise?

Ich scheine eine grundlegende Implementierung zu haben, die durch Hinzufügen von .on('mousedown'.. zu einer Bühne) funktioniert, aber sie wird nur ausgelöst, wenn die Maus auf eine Grafik innerhalb der Bühne bewegt wird, wenn sie irgendwo auf der Bühne ausgelöst werden soll.

Liegt dies daran, dass eine Bühne keine echte grafische Darstellung hat und wenn Sie also nicht auf eines der Bühnen-/Container-Objekte klicken, klicken Sie nicht wirklich auf die Bühne und ich sollte tun, was ivanpopelyshev vorschlägt?

BEARBEITEN: Kratzen Sie das, die richtige Lösung besteht darin, einen neuen Interaktionsmanager zu erstellen, der den Renderer wie folgt übergibt:

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

Alle 19 Kommentare

:+1: das steht auf meiner todo

Hallo Leute! Ich möchte Ihnen dabei helfen. Die Idee hier ist, die Berechnung von Ereignissen außerhalb des Ansichtsfensters zu vermeiden?

Nein, die Idee dahinter ist, dass Sie derzeit Interaktionsereignisse nicht im gesamten Ansichtsfenster verarbeiten können. In v2 konnten Sie Ereignisse auf der Bühne anhören und alle Ereignisse im gesamten Ansichtsfenster zurückgeben, unabhängig davon, ob mit etwas interagiert werden sollte oder nicht. Derzeit in v3 ist das unmöglich.

Im Zusammenhang mit #2071

:+1:

Ist das bei Version 4 noch so?

Ja, es ist immer noch so. Im Moment ist der beste Weg, ein Rechteck zu erstellen und es bei der Größenänderung zu aktualisieren

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

Globale Interaktionsereignisse sind im InteractionManager über #2658 verfügbar. Dies ist in 4.0.0-rc3

Gibt es Informationen zur Funktionsweise?

Ich scheine eine grundlegende Implementierung zu haben, die durch Hinzufügen von .on('mousedown'.. zu einer Bühne) funktioniert, aber sie wird nur ausgelöst, wenn die Maus auf eine Grafik innerhalb der Bühne bewegt wird, wenn sie irgendwo auf der Bühne ausgelöst werden soll.

Liegt dies daran, dass eine Bühne keine echte grafische Darstellung hat und wenn Sie also nicht auf eines der Bühnen-/Container-Objekte klicken, klicken Sie nicht wirklich auf die Bühne und ich sollte tun, was ivanpopelyshev vorschlägt?

BEARBEITEN: Kratzen Sie das, die richtige Lösung besteht darin, einen neuen Interaktionsmanager zu erstellen, der den Renderer wie folgt übergibt:

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

@SamStonehouse : Hilft das?

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

// add backdrop to scene graph...

interactive = false haben, könnte das Problem mit der Bühne gewesen sein, ich konnte es nicht überprüfen, aber es spielt jetzt keine Rolle, da der Interaktionsmanager zu tun scheint, was ich brauche, das einzige Problem, das ich jetzt habe, ist, dass es richtig ist Klicks werden nicht erfasst, weil sie stattdessen ein Kontextmenü öffnen, aber das hat nichts mit dieser PR zu tun.

@SamStonehouse etwa so:

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

Beachten Sie auch, dass #2658 nur eine Teilmenge von Ereignissen ausgibt, die ansonsten von InteractionManager bereitgestellt werden (zB nicht rightdown ).

Interessanter @bigtimebuddy , der auch funktioniert, ich weiß nicht, welcher der richtige Weg wäre.

renderer.plugins oder über new PIXI.interaction.InteractionManager eine Idee?

@akbr Ich ging davon aus, dass links/rechts/Mitte vom gleichen Mousedown-Ereignis behandelt würde, die mittlere Taste scheint es zu sein

@SamStonehouse Während beide funktionieren, würde ich renderer.plugins empfehlen, da es bereits erstellt wurde.

@bigtimebuddy Super danke

Ich habe auch das Problem mit dem Rechtsklick gelöst, es ist tatsächlich ein weiteres Mausereignis (was ich als intuitiv bezeichnen würde).

Danke an alle

Hallo, das funktioniert ziemlich fantastisch, um die Schwenk-/Zoom-Funktionalität mit Pixi v4 zu implementieren. Allerdings scheint e.stopPropagation für Sprites im Viewport nicht mehr zu funktionieren. Gibt es eine Möglichkeit, Viewport-Ereignisse mit Ereigniskurzschlüssen zum Laufen zu bringen?

Gibt es alternativ eine Möglichkeit, eine Drag-and-Pan-Funktionalität zu implementieren, ohne renderer.plugins.interaction ? Zuvor hatte ich meinen Bühnencontainer mit Mausereignissen und einem PIXI.Rectangle hitArea und versuchte, die Bühne jedes Mal mit einem neuen zu versehen, wenn der Benutzer schwenkt, aber das scheint aus irgendeinem Grund nicht zu funktionieren - Ich kann nicht außerhalb des Bereichs schwenken, in dem die erste hitArea definiert wurde, und gelegentlich wird das mouseup Ereignis nicht registriert.

BEARBEITEN: Ich konnte meine vorherige Methode zum Laufen bringen, es stellte sich heraus, dass ich den falschen Offset auf meine neu erstellten HitArea-Rechtecke angewendet habe, aber ich bin immer noch neugierig, wie man Ereignisse abfängt, die renderer.plugins.interaction treffen würden

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen in letzter Zeit keine Aktivität stattgefunden hat. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

softshape picture softshape  ·  3Kommentare

Darker picture Darker  ·  3Kommentare

courtneyvigo picture courtneyvigo  ·  3Kommentare

st3v0 picture st3v0  ·  3Kommentare

madroneropaulo picture madroneropaulo  ·  3Kommentare