Pixi.js: Невозможно обновить текст с выравниванием по правому краю без увеличения ширины родительского контейнера

Созданный на 1 авг. 2019  ·  4Комментарии  ·  Источник: pixijs/pixi.js

Да, я просмотрел предыдущие вопросы по теме: # 4341, # 4002, # 3476.

Я хочу создать фрагмент текста, выровнять его по правому краю экрана, а затем обновить текст, сохраняя его выравнивание по правому краю экрана.

Вот мой первый подход с использованием 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

Вот мой второй подход, использующий (stage.width - text.width) , который дает точно такой же результат:
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

Я полагаю, я мог бы сохранить исходную ширину app.stage и выровнять свой текст по нему, но я бы предпочел не хранить это значение. Мне кажется, что должен быть способ заставить однострочный текст «перетекать» справа налево от постоянного якоря. Я пропустил шаг?

Среда

🤔 Question

Все 4 Комментарий

Как насчет этого? (Если родительские границы статичны.)

https://jsfiddle.net/5o0yjusv/

Если границы родительского элемента меняются непредсказуемо, мне кажется, нужно рассчитать его границы без учета текста.

https://jsfiddle.net/2xwb9yk8/

Вот мое мнение: https://jsfiddle.net/b9zp5kuh/

Просто переходите к использованию ширины самого средства визуализации.

Спасибо, @themoonrat . Это привело меня на верный путь. Я собираюсь использовать app.screen вместо app.renderer . Мой window.devicePixelRatio равен 2, поэтому ширина средства визуализации в 2 раза больше "фактической" ширины моего окна. app.screen - это 1x.

Да, это имеет смысл! Когда вы делаете что-то «закрепление», вы должны работать с точно известными пикселями, а ширина / высота контейнера не подходят для этого, потому что они динамичны по отношению к области своих дочерних элементов.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги