Pixi.js: Tidak dapat memperbarui teks rata kanan tanpa memperluas lebar wadah induk

Dibuat pada 1 Agu 2019  ·  4Komentar  ·  Sumber: pixijs/pixi.js

Ya, saya melihat masalah terkait sebelumnya: #4341, #4002, #3476

Saya ingin membuat sepotong teks, menyelaraskannya ke kanan layar, lalu memperbarui teks, sambil tetap menyelaraskannya ke kanan layar.

Inilah pendekatan pertama saya, menggunakan 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

Inilah pendekatan kedua saya, menggunakan (stage.width - text.width) , yang memiliki hasil yang sama persis:
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

Saya kira saya bisa menyimpan lebar asli app.stage dan menyelaraskan teks saya dengan itu, tetapi saya lebih suka tidak perlu menyimpan nilai itu. Tampaknya bagi saya bahwa harus ada cara untuk membuat teks satu baris "mengalir" dari kanan ke kiri dari jangkar permanen. Apakah saya melewatkan satu langkah?

Lingkungan Hidup

🤔 Question

Semua 4 komentar

Bagaimana dengan ini? (Jika batas induknya statis.)

https://jsfiddle.net/5o0yjusv/

Jika batas-batas induk berubah tak terduga, perlu menghitung batas-batasnya tidak termasuk teks, saya pikir.

https://jsfiddle.net/2xwb9yk8/

Inilah pendapat saya: https://jsfiddle.net/b9zp5kuh/

Langsung saja menggunakan lebar penyaji itu sendiri.

Terima kasih, @themoonrat . Ini membuat saya berada di jalur yang benar. Saya akan menggunakan app.screen alih-alih app.renderer . window.devicePixelRatio adalah 2, jadi lebar penyaji adalah 2x lebar "sebenarnya" dari jendela saya. app.screen adalah 1x, meskipun.

Ya, itu masuk akal! Saat melakukan sesuatu 'menyematkan', Anda harus bekerja dalam piksel yang diketahui persis, dan lebar/tinggi wadah tidak berfungsi dengan baik untuk itu karena mereka dinamis ke area anak-anak mereka.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat