Pixi.js: 更改文字后的BitmapText宽度

创建于 2020-09-22  ·  3评论  ·  资料来源: pixijs/pixi.js

预期行为

当前行为

使用此文本“ 1111111111111111111111111111”创建一个PIXI.BitmapText实例。 记住其宽度,然后将文本更改为“ 1”,然后再次检查宽度,它将保持不变。

可能的解决方案

当PIXI.BitmapText实例具有PIXI.Mesh实例作为具有199个以上顶点的子级时,会出现此问题

重现步骤

https://pixijs.io/examples/#/text/bitmap -text.js
粘贴以下代码:

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);
}

环境

  • pixi.js版本:5.3.2
  • 浏览器和版本:Chrome 85
  • 操作系统和版本:Windows 10
🕷 Bug

最有用的评论

这是一个JSFiddle版本:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

据我了解,出现此问题的原因是,当新文本小于以前的文本时,我们不清除顶点缓冲区。
检查这种情况如何运作
image

所有3条评论

这是一个JSFiddle版本:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

这是一个JSFiddle版本:
https://jsfiddle.net/bigtimebuddy/syt6gdpb/

据我了解,出现此问题的原因是,当新文本小于以前的文本时,我们不清除顶点缓冲区。
检查这种情况如何运作
image

如果顶点缓冲区不是新创建的,则将顶点缓冲区清零可能会解决此问题。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

zcr1 picture zcr1  ·  3评论

finscn picture finscn  ·  3评论

madroneropaulo picture madroneropaulo  ·  3评论

gaccob picture gaccob  ·  3评论

neciszhang picture neciszhang  ·  3评论