Pixi.js: Pivot beeinflusst die Objektposition

Dies gelang mir, indem ich den Drehpunkt und die Position der Grafik in die Mitte stellte und dann die Grafik um diesen Punkt zeichnete.

Ich habe Ihre Frage zu Stackoverflow hier mit einem Codebeispiel beantwortet: http://stackoverflow.com/questions/17505169/pixi-js-pivot-affects-object-position/18007977#18007977

@GoodBoyDigital Beeinflusst der Pivot die Position, und wenn ja, ist das eine schnelle Lösung?

Ich war tatsächlich verwirrt über pivot und anchor . Können diese zusammengeführt werden?

Nun, pivot und anchor sind unterschiedlich (konzeptionell). Der Drehpunkt beeinflusst den Drehpunkt, während der Anker der Ursprung (Punkt der Position) ist. Ich bin mir nicht sicher, ob Pivot richtig verwendet wird.

Es klingt so, als ob dies als der gleiche Punkt verwendet werden kann. Ich habe diese beim Rendern noch nie getrennt gesehen (CSS-Transformationsursprung, Flash-Registrierung). Gab es einen Anwendungsfall, der dafür verantwortlich war? Wenn ja, kann alles standardmäßig auf eine Sache eingestellt sein und dann eine andere verwenden, wenn diese festgelegt ist?

Vielleicht standardmäßig überall verankern, einschließlich Rotation, es sei denn, Pivot ist ein Punkt, verwenden Sie dies für die Rotation?

UPDATE : Oder umgekehrt, obwohl ich mich zu _anchor = default_ und _pivot = rotation neige und IMO besser benenne.

anchor und pivot sind in Rendering-Engines ziemlich häufig. Es gibt viele Anwendungsfälle, in denen Sie sich um die Mitte drehen möchten, die Position jedoch oben links festgelegt ist. Das sollten wir nicht nur unterstützen, sondern auch unterstützen.

Grüß dich, schau dir jetzt dieses Problem an. Zur Verdeutlichung ist das anchor eine Sprite-spezifische Sache. Es wird verwendet, um die Textur auszurichten. Ich fand die Funktion unglaublich nützlich, als ich damals Sachen mit cocos2d machte, also wollte ich sie unbedingt zu pixi hinzufügen. Das pivot gehört zu allen Anzeigeobjekten und ist im Wesentlichen der Drehpunkt.

Wenn Sie dies als gelöst schließen, funktionieren Pivot / Anker wie vorgesehen.

Es tut mir leid, dass ich das angesprochen habe, aber ich habe dieses Repo durchsucht / gelesen und bin mir immer noch nicht sicher, wie ich einen DisplayObjectContainer von der Mitte aus drehen soll. Die Verwendung von Pivot ermöglicht es meinem Container nicht, von der Mitte zu kippen, ohne sich an eine andere Stelle zu bewegen. Irgendwelche Ideen? Ich habe # 93 gesehen und dachte, das wäre die Antwort, aber vielleicht verstehe ich es nicht richtig. Jede Hilfe wäre dankbar. Vielen Dank!

Bearbeiten: Ich dachte, es wäre hilfreich zu erwähnen, dass sich mein Objekt über den Bildschirm bewegt und sich während der Bewegung dreht. Ich benutze auch die Skala, um das "Umdrehen" zu machen.

@ mparker11 Um einen Punkt zu scale ) ist anders. pivot wirkt sich auf den Wert in rotation . Ich bin mir nicht sicher, ob Sie richtig beeinflussen können, wie ein Container mit der Skalierung kippt ...

Gedanken @GoodBoyDigital?

@englercj Danke für die Antwort. Ich habe einen Artikel über die Verwendung der Matrixmultiplikation gelesen, um dies zu erreichen. Ich sehe, dass @GoodBoyDigital in seiner PIXI.DisplayObject.prototype.updateTransform -Funktion verwendet wurde, aber für mein Leben kann ich nicht wirklich verstehen, wie ich es ändern kann, um es skalieren zu lassen das Zentrum, wenn ich es überhaupt ändern muss.

Hmmm ... Verstehe definitiv nicht, wie man den Pivot benutzt.

Ich habe die Position eines Sprites an einer bestimmten Position festgelegt. Dann möchte ich, dass es sich in der Mitte dreht, also setze ich den Drehpunkt in die Mitte meines Sprites (sprite.width / 2, sprite.height / 2). Dies führt dazu, dass mein Sprite verschoben wird und die Drehung bei 0,0 liegt.

Äh? Habe ich etwas verpasst?

@tleunen Ich glaube, Sie müssen Anker verwenden, da Sie Sprites verwenden.

Wird dieses Verhalten in Version 4 behoben?

Ich beschloss, Pixi auszuprobieren und traf sofort diesen "Bug".
Nach ein paar Stunden googeln verstehe ich immer noch nicht, wie das funktionieren soll.
Die meisten Leute in Foren sagen nur "Pivot-Verhalten ist kaputt". Nicht sehr hilfreich.

Ich fürchte, Ihr Kommentar ist auch nicht. So geht pixi mit Pivot um.
Wenn dieser 'Bug' zu viel ist, um ihn zu entblößen, geben Sie bitte einen PR an oder joggen Sie weiter.

Am Donnerstag, den 10. März 2016, schrieb Ivan Kleshnin [email protected] :

Wird dieses Verhalten in Version 4 behoben?

Ich beschloss, Pixi auszuprobieren und traf sofort diesen "Bug".
Nach ein paar Stunden googeln verstehe ich immer noch nicht, wie das sein soll
Arbeit.
Die meisten Leute in Foren sagen nur "Pivot-Verhalten ist kaputt". Nicht sehr
hilfreich.

- -
Antworte direkt auf diese E-Mail oder sieh sie dir auf GitHub an
https://github.com/pixijs/pixi.js/issues/190#issuecomment -194833811.

Mat Groves

Technischer Partner

Telefon: 07708 114496 :: www.goodboydigital.com
Erster Stock, Einheit 9B, Queens Yard, White Post Lane, London, E9 5EN
goodboy ©. Alle Rechte vorbehalten.

Ich fürchte, Ihr Kommentar ist auch nicht

Bitte nehmen Sie "Nicht sehr hilfreich" nicht persönlich.
Es sollte meinen emotionalen Zustand beschreiben, nicht beleidigen.

Wenn dieser 'Bug' zu viel ist, um ihn zu entblößen, geben Sie bitte einen PR an oder joggen Sie weiter.

Ich weiß nicht, ob es ein Fehler ist oder nicht, weil ich ein Neuling in dieser Branche bin.
Deshalb habe ich oben ein "Bug" -Wort in Anführungszeichen gesetzt. Einige Leute halten es für richtig. Einige - es ist nicht.
Ich habe gerade meine Erfahrungen geteilt und nach Änderungen in Version 4 gefragt. Ich wollte unbedingt Pixi lernen, aber dieser hat mich runtergebracht.

Das Hauptproblem: Nachdem ich> 10 verwandte Themen (hier und im Internet) gelesen habe, verstehe ich immer noch nicht, wie ich dieses Verhalten umgehen und einen Container zwingen kann, sich in einem definierten Raumpunkt um sein Zentrum zu drehen.
Und ich bin nicht besonders dumm.

Hallo!

Keine Sorge, Mann, tut mir leid, wenn ich ein bisschen klein war, du hast mich am Ende eines langen Tages erwischt!

Pivot soll sich wie ein nicht normalisierter Ankerpunkt verhalten.

Der einfachste Weg, dies zu beheben, besteht darin, das Objekt in einen Container zu legen und den Container zu drehen, während das Objekt intern bewegt wird.

Hoffentlich hilft das!

Kein Problem. Danke. Ich werde versuchen, Ihren Rat zu verwenden.

Meiner Meinung nach ist der einfachste Weg, eine Grafik (oder einen Container) um ihren Mittelpunkt zu drehen, das Speichern der Mittelpunktskoordinaten, an denen eine Grafik gezeichnet wurde. Stellen Sie dann die Position und den Drehpunkt der Grafik auf den Mittelpunkt ein.
Hier ist ein Beispiel:

Wenn Sie beispielsweise ein Grafikobjekt erstellen, können Sie damit beginnen, Grundelemente darauf zu zeichnen.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
Das Grundelement wird immer relativ zur Position des Grafikobjekts gezeichnet (standardmäßig 0).
Daher müssen wir die neue Position des Grafikobjekts auf 200 setzen, da dies der aktuelle Mittelpunkt unseres Grundelements ist.
test.position.x = 200; test.position.y = 200;
Jetzt können wir sehen, dass das Grundelement gerade verschoben wurde, daher müssen wir den Drehpunkt auf dieselbe Koordinate setzen und er bleibt an derselben Position, an der wir ihn gezeichnet haben.
test.pivot.x = 200; test.pivot.y = 200;

Die Pivot-Eigenschaft ist nicht fehlerhaft, es ist nur ein wenig verwirrend zu verstehen, wie sie funktioniert und warum sie "die Objektposition beeinflusst". Das Objekt dreht sich immer um die eigene Position und der Drehpunkt hilft uns, einen neuen Punkt festzulegen, von dem aus es sich dreht.

Hallo Leute! Kann ich den Drehpunkt mit Winkeln verwenden? Ich versuche, den Winkel eines Sprites zu ändern (indem ich die Drehposition mit dem Drehpunkt ändere), um der Maus zu folgen, aber ich kann nicht, können Sie mir bitte helfen?

Überprüfen Sie mein Codepen-Beispiel => http://codepen.io/jdnichollsc/pen/KgdRvV?editors=0010
Und der Fehler => http://screencast.com/t/hSSaaTO4j0

Vielen Dank im Voraus, Nicholls

Getan! Nur mit pivot.y oder pivot.x hahaha! Vielen Dank für das gesamte Pixi-Team! : +1:

Meiner Meinung nach ist der einfachste Weg, eine Grafik (oder einen Container) um ihren Mittelpunkt zu drehen, das Speichern der Mittelpunktskoordinaten, an denen eine Grafik gezeichnet wurde. Stellen Sie dann die Position und den Drehpunkt der Grafik auf den Mittelpunkt ein.
Hier ist ein Beispiel:

Wenn Sie beispielsweise ein Grafikobjekt erstellen, können Sie damit beginnen, Grundelemente darauf zu zeichnen.
var test = new PIXI.Graphics(); test.drawRoundedRect(100, 100, 200, 200,12);
Das Grundelement wird immer relativ zur Position des Grafikobjekts gezeichnet (standardmäßig 0).
Daher müssen wir die neue Position des Grafikobjekts auf 200 setzen, da dies der aktuelle Mittelpunkt unseres Grundelements ist.
test.position.x = 200; test.position.y = 200;
Jetzt können wir sehen, dass das Grundelement gerade verschoben wurde, daher müssen wir den Drehpunkt auf dieselbe Koordinate setzen und er bleibt an derselben Position, an der wir ihn gezeichnet haben.
test.pivot.x = 200; test.pivot.y = 200;

Die Pivot-Eigenschaft ist nicht fehlerhaft, es ist nur ein wenig verwirrend zu verstehen, wie sie funktioniert und warum sie "die Objektposition beeinflusst". Das Objekt dreht sich immer um die eigene Position und der Drehpunkt hilft uns, einen neuen Punkt festzulegen, von dem aus es sich dreht.

Hey Mann, ich denke das war ein Hack, weil es einen Nebeneffekt hat: Die Position wurde geändert.

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.