Pixi.js: Rechtsbündig ausgerichteter Text kann nicht aktualisiert werden, ohne die Breite des übergeordneten Containers zu erweitern

Erstellt am 1. Aug. 2019  ·  4Kommentare  ·  Quelle: pixijs/pixi.js

Ja, ich habe mir frühere verwandte Probleme angesehen: #4341, #4002, #3476

Ich möchte einen Textabschnitt erstellen, ihn rechts am Bildschirm ausrichten und dann den Text aktualisieren, während er rechts am Bildschirm ausgerichtet bleibt.

Hier ist mein erster Ansatz mit anchor.x = 1 :
https://jsfiddle.net/r63ud8yL/1/

const app = new PIXI.Application({resizeTo: document.body, backgroundColor: 0xFFFFFF})
document.body.append(app.view)

// Forcing app.stage to occupy width of screen
// Is there a better way to do this?
const neCorner = new PIXI.Sprite()
neCorner.x = 0
neCorner.y = 0
const swCorner = new PIXI.Sprite()
swCorner.x = document.body.clientWidth
swCorner.y = document.body.clientHeight
app.stage.addChild(neCorner, swCorner)

const text = new PIXI.Text('first')
app.stage.addChild(text)
text.anchor.x = 1

// Align text to right edge
text.x = app.stage.width

// Replacing text with a longer string
text.text = 'second'
// It extends past the edge of the window; only 'sec' is visible

Hier ist mein zweiter Ansatz mit (stage.width - text.width) , der genau das gleiche Ergebnis hat:
https://jsfiddle.net/r63ud8yL/2/

const app = new PIXI.Application({resizeTo: document.body, backgroundColor: 0xFFFFFF})
document.body.append(app.view)

// Forcing app.stage to occupy width of screen
// Is there a better way to do this?
const neCorner = new PIXI.Sprite()
neCorner.x = 0
neCorner.y = 0
const swCorner = new PIXI.Sprite()
swCorner.x = document.body.clientWidth
swCorner.y = document.body.clientHeight
app.stage.addChild(neCorner, swCorner)

const text = new PIXI.Text('first')
app.stage.addChild(text)

// Align text to right edge
text.x = (app.stage.width - text.width)

// Replacing text with a longer string
// It extends past the edge of the window; only 'sec' is visible
text.text = 'second'

// Attempting to align text to right edge again...
text.x = (app.stage.width - text.width)
// ...but the longer text expanded the width of app.stage
// so still only 'sec' is visible

Ich nehme an, ich könnte die ursprüngliche Breite von app.stage speichern und meinen Text daran ausrichten, aber ich würde es vorziehen, diesen Wert nicht speichern zu müssen. Es scheint mir, dass es eine Möglichkeit geben sollte, einzeiligen Text von einem permanenten Anker von rechts nach links zu "fließen". Fehlt mir ein Schritt?

Umgebung

🤔 Question

Alle 4 Kommentare

Wie wäre es damit? (Wenn die übergeordneten Grenzen statisch sind.)

https://jsfiddle.net/5o0yjusv/

Wenn sich die Grenzen des Elternteils unvorhersehbar ändern, müssen seine Grenzen ohne den Text berechnet werden, denke ich.

https://jsfiddle.net/2xwb9yk8/

Hier ist meine Einstellung: https://jsfiddle.net/b9zp5kuh/

Gehen Sie einfach direkt zur Verwendung der Breite des Renderers selbst.

Danke, @themoonrat . Das hat mich auf den richtigen Weg gebracht. Ich nehme app.screen anstelle von app.renderer . Mein window.devicePixelRatio ist 2, also ist die Breite des Renderers 2x die "tatsächliche" Breite meines Fensters. app.screen ist jedoch 1x.

Ja das macht Sinn! Wenn Sie etwas "anheften", müssen Sie in genau bekannten Pixeln arbeiten, und Containerbreiten / -höhen funktionieren dafür nicht gut, da sie dynamisch für den Bereich ihrer Kinder sind.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen