如何让 wordWrap 在 PIXIjs BitmapText 中工作答案

【问题标题】：How to get wordWrap to work in PIXIjs BitmapText如何让 wordWrap 在 PIXIjs BitmapText 中工作
【发布时间】：2021-09-02 01:29:55
【问题描述】：

目标

我们正在尝试让 wordWrap 与 PIXIjs (v3) PIXI.extras.BitmapText 一起工作，但我们无法让它以与标准文本相同的方式工作。

所需的输出： [按预期包装文本]

var someText = new window.PIXI.Text('blah blah blah',
                {
                    font: '32px Arial',
                    fill: 0x939393,
                    align: 'center',
                    wordWrap: true,
                    wordWrapWidth: me.width * (0.9 / window.devicePixelRatio)
                });

问题： [没有按预期换行]

var someOtherText = new window.PIXI.BitmapText('blah blah blah',
                {
                    font: 'santana-grey-20',
                    align: 'center',
                    wordWrap: true,
                    wordWrapWidth: me.width * (0.9 / window.devicePixelRatio)
                });

以前有没有人这样做过或对尝试什么有任何建议？

【问题讨论】：

标签： javascript pixi.js

【解决方案1】：

与 PIXI.Text 不同，PIXI BitmapText 没有内置的自动换行支持。

您唯一的选择是将文本拆分为多个 PIXI BitmapTexts。

【讨论】：

感谢您抽出宝贵时间
为什么要使用多个 BitmapTexts？你可以只写 \n 来换行。

【解决方案2】：

在bitmapText中，你必须将样式的maxWidth属性设置为换行符见here

var someOtherText = new window.PIXI.BitmapText('blah blah blah',
                {
                    font: 'santana-grey-20',
                    align: 'center',
                    maxWidth: 200
// The max width of the text before line wrapping.
                });

【讨论】：