Pixi.js: No se puede actualizar el texto alineado a la derecha sin expandir el ancho del contenedor principal

Creado en 1 ago. 2019  ·  4Comentarios  ·  Fuente: pixijs/pixi.js

Sí, miré problemas anteriores relacionados: # 4341, # 4002, # 3476

Me gustaría crear un fragmento de texto, alinearlo a la derecha de la pantalla, luego actualizar el texto, manteniéndolo alineado a la derecha de la pantalla.

Aquí está mi primer enfoque, usando 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

Aquí está mi segundo enfoque, usando (stage.width - text.width) , que tiene exactamente el mismo resultado:
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

Supongo que podría almacenar el ancho original de app.stage y alinear mi texto con eso, pero preferiría no tener que almacenar ese valor. Me parece que debería haber una manera de hacer que el texto de una sola línea "fluya" de derecha a izquierda desde un ancla permanente. ¿Me estoy perdiendo un paso?

Ambiente

🤔 Question

Todos 4 comentarios

¿Qué tal esto? (Si los límites principales son estáticos).

https://jsfiddle.net/5o0yjusv/

Si los límites del padre cambian de manera impredecible, creo que es necesario calcular sus límites excluyendo el texto.

https://jsfiddle.net/2xwb9yk8/

Aquí está mi opinión: https://jsfiddle.net/b9zp5kuh/

Simplemente vaya directamente a usar el ancho del propio renderizador.

Gracias, @themoonrat . Esto me puso en el camino correcto. Voy a ir con app.screen lugar de app.renderer . Mi window.devicePixelRatio es 2, por lo que el ancho del renderizador es 2x el ancho "real" de mi ventana. app.screen embargo,

¡Sí, eso tiene sentido! Al hacer algo de 'fijación', debe trabajar en píxeles conocidos exactos, y los anchos / alturas de los contenedores no funcionan bien para eso porque son dinámicos para el área de sus hijos.

¿Fue útil esta página
0 / 5 - 0 calificaciones