Pixi.js: BitmapText-Breite nach Textänderung

Erstellt am 22. Sept. 2020  ·  3Kommentare  ·  Quelle: pixijs/pixi.js

Erwartetes Verhalten

Aktuelles Verhalten

Erstellen Sie eine PIXI.BitmapText-Instanz mit diesem Text "1111111111111111111111111". Merken Sie sich die Breite, ändern Sie den Text in "1" und überprüfen Sie die Breite erneut. Sie wird gleich sein.

Mögliche Lösung

Dieses Problem tritt auf, wenn die PIXI.BitmapText-Instanz die PIXI.Mesh-Instanz als untergeordnete Instanz mit mehr als 199 Scheitelpunkten hat

Schritte zum Reproduzieren

https://pixijs.io/examples/#/text/bitmap -text.js
Fügen Sie diesen Code ein:

const app = new PIXI.Application({ backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

app.loader
    .add('desyrel', 'examples/assets/bitmap-font/desyrel.xml')
    .load(onAssetsLoaded);

function onAssetsLoaded() {
    const bitmapFontText = new PIXI.BitmapText('11111111111111111111111111111111111111111111111', { font: '55px Desyrel'});
    console.log(bitmapFontText.width);
    bitmapFontText.x = 50;
    bitmapFontText.y = 200;
    bitmapFontText.text = '1';
    console.log(bitmapFontText.width);
    app.stage.addChild(bitmapFontText);
}

Umgebung

  • pixi.js Version : 5.3.2
  • Browser & Version : Chrome 85
  • Betriebssystem und Version : Windows 10
🕷 Bug

Hilfreichster Kommentar

Hier ist eine JSFiddle-Version:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

Soweit ich weiß, tritt dieses Problem auf, weil wir den Scheitelpunktpuffer nicht bereinigen, wenn neuer Text kleiner als der vorherige ist.
Überprüfen Sie, wie dieser Zustand funktioniert
image

Alle 3 Kommentare

Hier ist eine JSFiddle-Version:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

Hier ist eine JSFiddle-Version:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

Soweit ich weiß, tritt dieses Problem auf, weil wir den Scheitelpunktpuffer nicht bereinigen, wenn neuer Text kleiner als der vorherige ist.
Überprüfen Sie, wie dieser Zustand funktioniert
image

Wahrscheinlich würde das Nullstellen des Scheitelpunktpuffers dieses Problem beheben, wenn er nicht neu erstellt würde.

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

readygosports picture readygosports  ·  3Kommentare

sntiagomoreno picture sntiagomoreno  ·  3Kommentare

Makio64 picture Makio64  ·  3Kommentare

courtneyvigo picture courtneyvigo  ·  3Kommentare

finscn picture finscn  ·  3Kommentare