Pixi.js: 親コンテナの幅を拡張せずに右揃えのテキストを更新することはできません

作成日 2019年08月01日  ·  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)を使用した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
  • ブラウザとバージョン:75.0.3770.142
  • OSとバージョン:Macbook Pro、OS 10.13.6
  • 実行例https//jsfiddle.net/r63ud8yL/2/
🤔 Question

全てのコメント4件

これはどう? (親の境界が静的である場合。)

https://jsfiddle.net/5o0yjusv/

親の境界が予期せず変化する場合は、テキストを除いてその境界を計算する必要があると思います。

https://jsfiddle.net/2xwb9yk8/

これが私の見解です: https

レンダラー自体の幅を使用するだけです。

ありがとう、 @ themoonrat 。 これは私を正しい軌道に乗せました。 app.screen代わりにapp.renderer app.screen使用します。 私のwindow.devicePixelRatioは2なので、レンダラーの幅はウィンドウの「実際の」幅の2倍です。 ただし、 app.screenは1倍です。

うん、それは理にかなっている! 「ピン留め」を行うときは、正確に既知のピクセルで作業する必要があります。コンテナの幅/高さは、子の領域に対して動的であるため、うまく機能しません。

このページは役に立ちましたか?
0 / 5 - 0 評価

関連する問題

zcr1 picture zcr1  ·  3コメント

samueller picture samueller  ·  3コメント

lucap86 picture lucap86  ·  3コメント

madroneropaulo picture madroneropaulo  ·  3コメント

readygosports picture readygosports  ·  3コメント