はい、以前の関連する問題を調べました:#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)
を使用した2番目のアプローチで、まったく同じ結果になります。
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
の元の幅を保存して、テキストをそれに揃えることができると思いますが、その値を保存する必要はありません。 永続的なアンカーから1行のテキストを右から左に「フロー」させる方法があるはずだと私には思えます。 私は一歩を逃していますか?
pixi.js
バージョン:5.1.0これが私の見解です: https :
レンダラー自体の幅を使用するだけです。
ありがとう、 @ themoonrat 。 これは私を正しい軌道に乗せました。 app.screen
代わりにapp.renderer
app.screen
使用します。 私のwindow.devicePixelRatio
は2なので、レンダラーの幅はウィンドウの「実際の」幅の2倍です。 ただし、 app.screen
は1倍です。
うん、それは理にかなっている! 「ピン留め」を行うときは、正確に既知のピクセルで作業する必要があります。コンテナの幅/高さは、子の領域に対して動的であるため、うまく機能しません。