快捷導(dǎo)航

PixiJS學(xué)習(xí)之如何實(shí)現(xiàn)文字的繪制

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

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

Text

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

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

效果：

可以設(shè)置文字樣式，需要用 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 賦值的方式來設(shè)置樣式。

效果：

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

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

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

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

BitMapText

BitMap 就是位圖的意思，它會(huì)將一些字體的單個(gè)字符先預(yù)渲染。當(dāng)然這個(gè)預(yù)渲染的是指定了特定的樣式的。然后在繪制的時(shí)候，pixijs 就可以將一個(gè)個(gè)預(yù)渲染的字符拼接在一起，而不是重新計(jì)算繪制點(diǎn)并光柵化，效率很高。

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

另外，BitMap 更適合拉丁語系，因?yàn)樽址邢?，而像是中文這種象形文字，字符集太多了，做緩存性價(jià)比不高。

下面是官方示例。

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 關(guān)聯(lián)了一個(gè) png 圖片，里面放了一些位圖字體。感覺有點(diǎn)像 SpriteSheet。