Pixi.js: Não é possível atualizar o texto alinhado à direita sem expandir a largura do contêiner pai

Criado em 1 ago. 2019  ·  4Comentários  ·  Fonte: pixijs/pixi.js

Sim, examinei problemas relacionados anteriores: # 4341, # 4002, # 3476

Gostaria de criar um pedaço de texto, alinhá-lo à direita da tela e, em seguida, atualizar o texto, mantendo-o alinhado à direita da tela.

Esta é minha primeira abordagem, 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

Esta é minha segunda abordagem, usando (stage.width - text.width) , que tem exatamente o mesmo 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

Suponho que posso armazenar a largura original de app.stage e alinhar meu texto a ela, mas preferiria não precisar armazenar esse valor. Parece-me que deveria haver uma maneira de fazer o texto de uma linha "fluir" da direita para a esquerda a partir de uma âncora permanente. Estou perdendo uma etapa?

Meio Ambiente

🤔 Question

Todos 4 comentários

Que tal agora? (Se os limites do pai forem estáticos.)

https://jsfiddle.net/5o0yjusv/

Se os limites do pai mudarem de forma imprevisível, acho que preciso calcular seus limites excluindo o texto.

https://jsfiddle.net/2xwb9yk8/

Aqui está minha opinião: https://jsfiddle.net/b9zp5kuh/

Vá direto para a largura do próprio renderizador.

Obrigado, @themoonrat . Isso me colocou no caminho certo. Vou usar app.screen vez de app.renderer . Meu window.devicePixelRatio é 2, então a largura do renderizador é 2x a largura "real" da minha janela. app.screen é 1x, no entanto.

Sim, isso faz sentido! Ao fazer qualquer coisa 'fixando', você tem que trabalhar em pixels conhecidos exatos, e larguras / alturas de contêiner não funcionam bem para isso porque eles são dinâmicos para a área de seus filhos.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

madroneropaulo picture madroneropaulo  ·  3Comentários

samueller picture samueller  ·  3Comentários

Makio64 picture Makio64  ·  3Comentários

sntiagomoreno picture sntiagomoreno  ·  3Comentários

distinctdan picture distinctdan  ·  3Comentários