PixiJS學習之如何實現(xiàn)文字的繪制

更新時間：2023年02月20日 08:59:22 作者：前端西瓜哥

PixiJS是一個開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項目提供了極快的性能。這篇文章主要帶大家學習一下PixiJS是如何實現(xiàn)文字繪制的，希望對大家有所幫助

Text

最基本的寫法，這里沒有設置樣式：

const app = new PIXI.Application({ width: 640, height: 360, background: 0xffffff });
document.body.appendChild(app.view);

// 創(chuàng)建文本
const text = new PIXI.Text("前端西瓜哥");
text.x = 100;
text.y = 50;
app.stage.addChild(text);

效果：

可以設置文字樣式，需要用 TextStyle 類。

const textStyle = new PIXI.TextStyle({
  fill: "#FF0044",
  fontSize: 32,
  strokeThickness: 1,
  fontWeight: "bold",
});

const text = new PIXI.Text("前端西瓜哥", textStyle);
text.x = 100;
text.y = 50;

也可以通過給 text.style 賦值的方式來設置樣式。

效果：

更多文字樣式，讀者可自行前往官方提供的交互式網(wǎng)頁，嘗試設置不同樣式看看渲染效果：

https://pixijs.io/pixi-text-style/#

通過 Text 類繪制文字，會將文字內(nèi)容從頭到位進行解析并光柵化，如果你要通過 transform 改變文字的大小，會導致一些失真，建議修改字體大小的方式去繪制。

文字內(nèi)容如果比較多，且變化得比較頻繁，可能造成一些性能上的問題。這種情況下，可以考慮能不能用 BitMapText 來優(yōu)化。

BitMapText

BitMap 就是位圖的意思，它會將一些字體的單個字符先預渲染。當然這個預渲染的是指定了特定的樣式的。然后在繪制的時候，pixijs 就可以將一個個預渲染的字符拼接在一起，而不是重新計算繪制點并光柵化，效率很高。

缺點是樣式是固定的，如果樣式一直變，就比較難命中緩存，不太適合使用了。

另外，BitMap 更適合拉丁語系，因為字符集有限，而像是中文這種象形文字，字符集太多了，做緩存性價比不高。

下面是官方示例。

const app = new PIXI.Application({ background: '#1099bb' });
document.body.appendChild(app.view);

PIXI.Assets.load('./desyrel.xml').then(() => {
    const bitmapFontText = new PIXI.BitmapText(
        'bitmap fonts are supported!\nWoo yay!', {
            fontName: 'Desyrel',
            fontSize: 55,
            align: 'left',
        },
    );

    bitmapFontText.x = 50;
    bitmapFontText.y = 200;

    app.stage.addChild(bitmapFontText);
});

pixijs 從 desyrel.xml 文件中提取信息，desyrel.xml 關聯(lián)了一個 png 圖片，里面放了一些位圖字體。感覺有點像 SpriteSheet。