Pixi.js: Impossible de mettre à jour le texte aligné à droite sans étendre la largeur du conteneur parent

Créé le 1 août 2019  ·  4Commentaires  ·  Source: pixijs/pixi.js

Oui, j'ai consulté les précédents problèmes liés : #4341, #4002, #3476

J'aimerais créer un morceau de texte, l'aligner à droite de l'écran, puis mettre à jour le texte, tout en le gardant aligné à droite de l'écran.

Voici ma première approche, en utilisant 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

Voici ma deuxième approche, en utilisant (stage.width - text.width) , qui a exactement le même résultat :
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

Je suppose que je pourrais stocker la largeur d'origine de app.stage et aligner mon texte sur celle-ci, mais je préférerais ne pas avoir besoin de stocker cette valeur. Il me semble qu'il devrait y avoir un moyen de faire "fluer" du texte sur une seule ligne de droite à gauche à partir d'une ancre permanente. Est-ce que je manque une étape ?

Environnement

🤔 Question

Tous les 4 commentaires

Que dis-tu de ça? (Si les limites parentes sont statiques.)

https://jsfiddle.net/5o0yjusv/

Si les limites du parent changent de manière imprévisible, il faut calculer ses limites en excluant le texte, je pense.

https://jsfiddle.net/2xwb9yk8/

Voici mon avis : https://jsfiddle.net/b9zp5kuh/

Utilisez simplement la largeur du moteur de rendu lui-même.

Merci @themoonrat . Cela m'a mis sur la bonne voie. Je vais utiliser app.screen au lieu de app.renderer . Mon window.devicePixelRatio est 2, donc la largeur du moteur de rendu est 2x la largeur "réelle" de ma fenêtre. app.screen est 1x, cependant.

Oui c'est logique ! Lorsque vous effectuez quelque chose « épingler », vous devez travailler avec des pixels connus exacts, et les largeurs / hauteurs de conteneurs ne fonctionnent pas bien pour cela car elles sont dynamiques par rapport à la zone de leurs enfants.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

samueller picture samueller  ·  3Commentaires

st3v0 picture st3v0  ·  3Commentaires

madroneropaulo picture madroneropaulo  ·  3Commentaires

zcr1 picture zcr1  ·  3Commentaires

lucap86 picture lucap86  ·  3Commentaires