大家好，我是前端西瓜哥，今天我們來學(xué) pixijs 如何繪制文字。pixijs 版本為 7.1.2。

使用原生的 WebGL 來繪制文字是非常繁瑣的，pixijs 對此進行了高層級的封裝，提供了 Text 類和 BitMapText 類來繪制文字。

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

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

BitMapText

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

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

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

繪制的結(jié)果為：

將字體的轉(zhuǎn)換為位圖，可以用一個名為 msdf-bmfont-xml 的 npm 庫工具去實現(xiàn)。

結(jié)尾

總結(jié)一下，

如果文本量少，或者字體經(jīng)常發(fā)生樣式的變化，用 Text。

如果字符集有限，字體樣式變化少但內(nèi)容經(jīng)常變化，用 BitMapText。

到此這篇關(guān)于PixiJS學(xué)習(xí)之如何實現(xiàn)文字的繪制的文章就介紹到這了,更多相關(guān)PixiJS繪制文字內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論