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?
pixi.js
Version : 5.1.0Wie 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.
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.