Pixi.js: Geben Sie eine Option zum Festlegen fester Grenzen für einen Container an

Erstellt am 23. Sept. 2016  ·  15Kommentare  ·  Quelle: pixijs/pixi.js

Ich habe ein Problem, bei dem ich etwas in einen Container zeichne und die Grenzen dieses Containers sofort neu berechnet werden. Während dieses spezielle Beispiel natürlich ziemlich erfunden ist - in Wirklichkeit würde ich so etwas nur einmal zeichnen, kann ich viele potenzielle Probleme sehen, die von diesem Verhalten herrühren (z. B. sagen wir, ich habe ein Element außerhalb des Bildschirms in den Container gelegt, das das Der Benutzer kann von der Seite nach innen wischen, was die Fanglogik, die ich gerade dort habe, vollständig zerstören würde.

💾 v4.x (Legacy) 🤔 Question

Hilfreichster Kommentar

Hey @megakoresh , ich glaube ich weiß was die Verwirrung hier verursacht. Da der Hauptzweck von pixi darin besteht, 2D-Objekte zu rendern, ist fast die gesamte API auf dieses Ziel ausgerichtet. Grenzen können besonders verwirrend sein.

In Pixi werden die Grenzen eines Sprites durch die Textur definiert. Das heißt, die Größe des Endergebnisses des gerenderten Objekts. Ebenso, da ein Container nicht gezeichnet ist und daher die Grenzen desselben durch die darin enthaltenen untergeordneten Elemente definiert werden. Besonders durch die Grenzen dieser Kinder. Bei einem Grafikobjekt werden die Grenzen durch die Geometrie definiert, die Sie darin zeichnen. Wenn Sie ein anderes Rechteck in einem Grafikobjekt außerhalb der aktuellen Grenzen zeichnen, werden die Grenzen um die neu gezeichnete Geometrie erweitert.

Hoffentlich macht das Sinn und gibt Ihnen einen schnellen Überblick darüber, wie Grenzen in Pixi strukturiert sind.

Speziell für Ihr Beispiel glaube ich, dass Ihr Problem auf dem Missverständnis beruht, wie Grenzen für ein Grafikobjekt funktionieren. Ich denke, Sie vermissen, dass das Zeichnen Ihres Rasters die Grenzen des Grafikobjekts ( desktop1 ) ändert, das das grüne Rechteck ( wonderfulRectangle ) enthält.

Sie können sehen, dass sich Ihr Raster nach dem ersten Zeichnen von der Größe des Ansichtsfensters erstreckt:

image

Dadurch werden die Grenzen des übergeordneten Grafikobjekts ( desktop1 ) um die Geometrie außerhalb des Ansichtsfensters erweitert. Dadurch wird Ihre Breite größer, wodurch Ihre nächste Berechnung des Rasters unterbrochen wird und der Zyklus fortgesetzt wird. Denken Sie daran, dass die Linien dick sind und daher Breite einnehmen.

Es gibt verschiedene Möglichkeiten, dies zu beheben. Da Ihr Raster die gesamte Größe des Ansichtsfensters ausfüllt, verwenden Sie einfach die Größe des Ansichtsfensters und nicht die Größe Ihres übergeordneten Fensters. Das heißt, wenn Sie mehr Geometrie außerhalb des Ansichtsfensters zeichnen, ändern sich Ihre Rasterberechnungen nie. Weil das Rendering-Ansichtsfenster die Größe nicht ändert.

Wenn dies keine Option ist, hat Ihr Rasterbereich beispielsweise nicht die Größe des Ansichtsfensters. Sie können die Berechnungen einfach basierend auf einer "bekannten Größe" der Gitterfläche durchführen. Ich denke, das war es, was Ivan über die Verwendung einer statischen Rectangle -Instanz sagen wollte. Entscheiden Sie sich grundsätzlich für eine Größe von 800 x 600 und führen Sie darauf basierende Berechnungen durch, bei denen die tatsächlich gerenderten Grenzen der Objekte in der Szene ausgeführt werden.

Ich habe den Codepen aktualisiert, um die von mir beschriebene Ansichtsfenster-Methode zu verwenden. Lassen Sie mich wissen, wenn Sie weitere Fragen haben!

http://codepen.io/anon/pen/yarVwm?editors=0010

Alle 15 Kommentare

Container hat keine Fläche und feste Grenzen, es ist nur eine Sammlung von untergeordneten Elementen, und dies ist das Standardverhalten von PIXI. Wenn Sie die Grenzen festlegen möchten, erweitern Sie Ihren eigenen Container und überschreiben Sie die Methode "berechne Grenzen".

Wenn es keinen Bereich und keine festen Grenzen hat und im Wesentlichen nur eine Datenstruktur ist, sollte es das Rendering nicht beeinflussen (ähnlich wie wenn Sie ein zu großes Objekt in einen Iframe einfügen, wird der Iframe nicht größer). . In dem Beispiel ist dies eindeutig der Fall, und ich finde es schwierig, die fehlerhafte Logik des Beispiels dafür verantwortlich zu machen. Vielleicht liegt es nicht an der Wurzel des Problems, keine Option für feste Grenzen zu haben, aber das Problem ist definitiv da.

Wie würden Sie vorschlagen, dass ich "Off-Screen" -Elemente implementiere?

Warum brauchst du überhaupt Grenzen?

Hast du dir das Beispiel angesehen? Das seltsame Verhalten wird durch die Tatsache verursacht, dass jedes Mal, wenn drawDebugLines ausgeführt wird und die Linien im Container des "Symbols" gezeichnet werden, dieser Container größer wird. Dies wiederum bringt die Fangpunkte durcheinander, da diese von den Containerabmessungen (Breite / Spalten, Höhe / Zeilen) abhängen.

Wenn ich den Fang dem Rendering-Element zuordne, treten zwei Probleme auf: Der Renderer hängt von der Bildschirmgröße, der Ausrichtung, der Pixeldichte und den benutzerdefinierten Abmessungen des Zeichenelements ab. Es kann Elemente enthalten, die sowohl größer als es sind (z. B. außerhalb des Bildschirms, die hineingleiten können) als auch kleiner (z. B. wenn ich Desktop 1 und Desktop 2 gleichzeitig sichtbar mache. In all diesen Fällen müssen das Einrasten und andere Einschränkungen beibehalten werden .

lel.width = wonderfulRectangle.width * 0.8;
lel.height = wonderfulRectangle.height * 0.9;

Warum benutzt du es nicht als Konstante? Können Sie einfach so etwas Globales einrichten:

var globalRect = new PIXI.Rectangle(0, 0, renderr.width/renderer.resolution, renderer.height/renderer.resolution);

Aktualisieren Sie diese Korrektur bei jeder Größenänderung und arbeiten Sie damit. Warum brauchen Sie "lel.width" und "lel.height"?

UEG. Das hat nichts mit irgendetwas zu tun, es ist nur ein Sprite, das verschoben werden kann, und ich stelle die Breite und Höhe ein, weil das Originalbild zu groß ist und ich es in ein Rechteck einpassen muss. Wenn Sie sich den Code in ansehen, sehen Sie, dass der Hauptcontainer für dieses "Symbol" desktop1 ist und an dem ich versuche, das Symbol zu fangen. Dieser gehört zum DesktopLayer und der DesktopLayer ist derjenige, den ich auf die Bühne gebracht habe.

Was ich zu emulieren versuche, ist das Verhalten eines Android Launcher-Bildschirms mit mehreren wischbaren Ansichten und einem Symbolraster über einem Desktop-Hintergrund.

return new PIXI.Point(snapPosX.clamp(0, target.parent.width), snapPosY.clamp(0, target.parent.height));

Ich verstehe immer noch nicht, was du willst. PIXI-Containergrenzen funktionieren genau so, wie sie sollen. Sie sind nicht der erste, der diesen Fehler gemacht hat.

Oh Maker's Atem, ich kann das nicht mehr machen. Kann sich jemand das Beispiel ansehen, das Wutgesicht bewegen und mir sagen, warum dieser Mist mit den Zeilen passiert und ob es sich um einen Fehler / eine fehlende Funktion in PIXI handelt oder ob ich einen Fehler im Code habe?

Ich dachte, das liegt daran, dass Ihre Linien tatsächlich die Breite und Höhe des Containers beeinflussen und Sie diese Eigenschaften verwenden, um Linien zu zeichnen.

Auch Codepen funktioniert irgendwie nicht mehr für mich. Irgendwelche Ideen warum?

Ja, es ist auch für mich kaputt, weil ich versehentlich den Init-Aufruf auskommentiert habe, mein schlechtes, sorry, behoben. Ja, Sie haben Recht - das ist, was ich tue, und ich sehe keine andere Möglichkeit für mich, diese Linien zu zeichnen, um das Raster visuell wiederzugeben. Was genau würden Sie mir vorschlagen, um diese Linien zu ziehen? Richten Sie eine Art separates Nur-Meta-Objekt Rectangle , das immer die Abmessungen des zugehörigen gerenderten Containers kopiert und daraus die Fangpunkte und andere Positionen ableitet. Das scheint eine Überentwicklung des Problems zu sein, anstatt es zu lösen. Gibt es einen Grund, warum ein Container nicht wie ein normales DOM-Element "überlaufen" kann?

Ich habe dies als Problem gepostet, nicht weil es keine Lösung gibt, sondern weil ich keine Rechtfertigung für dieses unlogische Verhalten sehe. Insbesondere weil die Linien nicht außerhalb der Containergrenzen liegen, werden sie von Kante zu Kante gezogen. In dem Produkt, das ich erstelle, wird vom Benutzer erwartet, dass er viel mit dem Inhalt interagiert. Ich mache mir Sorgen, dass der Code extrem chaotisch und schwer zu pflegen ist, wenn ich für jedes Objekt in der Szene "Referenzrechtecke" einrichten muss .

Sie haben erwähnt, dass ich einen "Fehler" in meinem Code hatte. Was ist das für ein Fehler? Ich habe sehr gründlich gesucht, kann aber keine fehlerhafte Logik finden.

Verwenden Sie eine globale Variable anstelle von "Breite / Höhe", die sich ändert. Aktualisieren Sie diese Variable bei Bedarf.

var globalRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

Wenn Sie "lokale" Grenzen möchten, erstellen Sie diese, verwenden Sie jedoch nicht dieselben Variablen wie pixi:

container.myRect = new PIXI.Rectangle(0, 0, renderer.width/renderer.resolution, renderer.height/renderer.resolution);

Der Fehler ist, dass es in PIXI überhaupt kein Layout gibt. "Breite" und "Höhe" haben unterschiedliche Bedeutung. Sie können untergeordnete Koordinaten nicht nach der Höhe der übergeordneten Breite klemmen, da sie vom Kind beeinflusst werden.

PIXI kann nicht erkennen, dass Sie die Breite / Höhe eines Rechtecks ​​wünschen, das Sie in Grafiken gezeichnet haben, und nicht ganze Grafikgrenzen (was ist, wenn es auch Kreise gibt?) Und keine untergeordneten Grenzen. Die einzig vernünftige Logik für Grenzen besteht darin, alles in sich aufzunehmen.

Stellen Sie sich vor, wir haben einen Container mit zwei Sprites, jeder hat (w = 10, h = 10), einer ist in (0,0), der zweite ist in (100000, 100000). Welche Breite und Höhe hat der Container? Auch wenn wir Grenzen irgendwie festlegen, was werden sie beeinflussen?

Und was ist, wenn wir Breite und Höhe irgendwie ändern wollen, wie wirkt sich diese Änderung auf Elemente im Container aus?

Ich scherze nicht, es ist wirklich schwierig für mich, mir andere API-Designs vorzustellen. Wenn Sie einige Ideen haben, möglicherweise eine zusätzliche Komponente für das Layout, schreiben Sie es bitte hier. Denken Sie daran, dass es sich um Bühnenrendering und nicht um eine grafische Benutzeroberfläche handelt. Die Leistung ist ein echtes Problem.

Hey @megakoresh , ich glaube ich weiß was die Verwirrung hier verursacht. Da der Hauptzweck von pixi darin besteht, 2D-Objekte zu rendern, ist fast die gesamte API auf dieses Ziel ausgerichtet. Grenzen können besonders verwirrend sein.

In Pixi werden die Grenzen eines Sprites durch die Textur definiert. Das heißt, die Größe des Endergebnisses des gerenderten Objekts. Ebenso, da ein Container nicht gezeichnet ist und daher die Grenzen desselben durch die darin enthaltenen untergeordneten Elemente definiert werden. Besonders durch die Grenzen dieser Kinder. Bei einem Grafikobjekt werden die Grenzen durch die Geometrie definiert, die Sie darin zeichnen. Wenn Sie ein anderes Rechteck in einem Grafikobjekt außerhalb der aktuellen Grenzen zeichnen, werden die Grenzen um die neu gezeichnete Geometrie erweitert.

Hoffentlich macht das Sinn und gibt Ihnen einen schnellen Überblick darüber, wie Grenzen in Pixi strukturiert sind.

Speziell für Ihr Beispiel glaube ich, dass Ihr Problem auf dem Missverständnis beruht, wie Grenzen für ein Grafikobjekt funktionieren. Ich denke, Sie vermissen, dass das Zeichnen Ihres Rasters die Grenzen des Grafikobjekts ( desktop1 ) ändert, das das grüne Rechteck ( wonderfulRectangle ) enthält.

Sie können sehen, dass sich Ihr Raster nach dem ersten Zeichnen von der Größe des Ansichtsfensters erstreckt:

image

Dadurch werden die Grenzen des übergeordneten Grafikobjekts ( desktop1 ) um die Geometrie außerhalb des Ansichtsfensters erweitert. Dadurch wird Ihre Breite größer, wodurch Ihre nächste Berechnung des Rasters unterbrochen wird und der Zyklus fortgesetzt wird. Denken Sie daran, dass die Linien dick sind und daher Breite einnehmen.

Es gibt verschiedene Möglichkeiten, dies zu beheben. Da Ihr Raster die gesamte Größe des Ansichtsfensters ausfüllt, verwenden Sie einfach die Größe des Ansichtsfensters und nicht die Größe Ihres übergeordneten Fensters. Das heißt, wenn Sie mehr Geometrie außerhalb des Ansichtsfensters zeichnen, ändern sich Ihre Rasterberechnungen nie. Weil das Rendering-Ansichtsfenster die Größe nicht ändert.

Wenn dies keine Option ist, hat Ihr Rasterbereich beispielsweise nicht die Größe des Ansichtsfensters. Sie können die Berechnungen einfach basierend auf einer "bekannten Größe" der Gitterfläche durchführen. Ich denke, das war es, was Ivan über die Verwendung einer statischen Rectangle -Instanz sagen wollte. Entscheiden Sie sich grundsätzlich für eine Größe von 800 x 600 und führen Sie darauf basierende Berechnungen durch, bei denen die tatsächlich gerenderten Grenzen der Objekte in der Szene ausgeführt werden.

Ich habe den Codepen aktualisiert, um die von mir beschriebene Ansichtsfenster-Methode zu verwenden. Lassen Sie mich wissen, wenn Sie weitere Fragen haben!

http://codepen.io/anon/pen/yarVwm?editors=0010

LOL k. Mit Ihren gemeinsamen Anstrengungen denke ich, dass ich den Kern des Problems verstehe: Ich denke, wenn die Bibliothek oft mit Canvas-Bibliotheken zusammengestellt wird, habe ich angenommen, dass es dasselbe ist, was es eindeutig nicht ist. Ich denke dann, dass die visuelle Objektgruppierung und Dinge wie Überlauf einfach nicht im Umfang sind (vielleicht kann ich, wenn ich die Bibliothek mehr lerne, ein Plugin dafür erstellen) und ich muss mich selbst um diese Dinge kümmern, während PIXI selbst sich darum kümmert nur Dinge auf dem Bildschirm anzuzeigen. Fall geschlossen, danke.

Dieser Thread wurde automatisch gesperrt, da nach dem Schließen keine aktuellen Aktivitäten stattgefunden haben. Bitte öffnen Sie eine neue Ausgabe für verwandte Fehler.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

finscn picture finscn  ·  3Kommentare

sntiagomoreno picture sntiagomoreno  ·  3Kommentare

Makio64 picture Makio64  ·  3Kommentare

st3v0 picture st3v0  ·  3Kommentare

YuryKuvetski picture YuryKuvetski  ·  3Kommentare