文字
無論是高分或圖表標籤，文字通常是傳達專案中資訊的最佳方式。令人驚訝的是，使用 WebGL 在螢幕上繪製文字是一個非常複雜的過程，它根本沒有內建支援。PixiJS 提供的值之一是隱藏此複雜性，讓你可以使用幾行程式碼以不同的樣式、字體和顏色繪製文字。此外，這些文字片段就像精靈一樣是場景物件，你可以為文字加上色調、旋轉它、為它加上 alpha 混合，並像對待任何其他圖形物件一樣對待它。
讓我們深入探討一下這個運作方式。
有三種文字
由於在 WebGL 中使用文字時面臨的挑戰，PixiJS 提供了三種截然不同的解決方案。在本指南中，我們將詳細介紹這兩種方法，協助你為專案需求做出正確選擇。選擇錯誤的文字類型可能會對專案的效能和外觀產生很大的負面影響。
文字物件
要將文字繪製到螢幕上，請使用 文字 物件。在表面下，這個類別會使用瀏覽器正常的文字呈現來繪製到螢幕外緩衝區，然後再使用那個螢幕外緩衝區作為繪製文字物件的來源。這意味著，每當你建立或變更文字時，PixiJS 就會建立那個文字新的光柵化影像，然後將它視為精靈。這種方法允許真正豐富的文字呈現，同時保持高呈現速度。
因此，在使用文字物件時，有兩組選項：位置、旋轉等標準顯示物件選項，這些選項會在文字內部光柵化後運作；還有用於在光柵化時使用的文字樣式選項。由於文字呈像後基本上只是一個精靈，因此無需檢閱標準選項。相反，讓我們專注於文字的樣式。
檢視 文字範例程式碼。
文字樣式
有許多的文字樣式選項可用 (請參閱 文字樣式)，但它們可細分為 5 個主要群組
字型：fontFamily 來選擇要使用的網頁字型、fontSize 來指定要繪製的文字大小，以及用於字重、樣式和變體的選項。
外觀：以 fill 設定色彩或新增 stroke 輪廓，包含漸層填色的選項。
投射陰影：以 dropShadow 設定投射陰影，使用許多相關選項來指定位移、模糊、不透明度等。
版面：使用 wordWrap 和 wordWrapWidth 來啟用，然後自訂 lineHeight 和 align 或 letterSpacing
公用程式：新增 padding 或 trim 額外空白來處理不規則的字型系列（如有需要）。
想互動式地測試文字樣式的功能，請查看此工具。
載入和使用字型
為了讓 PixiJS 建立文字物件，您需要確認想要使用的字型已載入到瀏覽器中。這可以透過我們的好朋友 資源輕鬆完成
// load the fonts
await Assets.load('short-stack.woff2');
// now they can be used!
const text = new Text({
text:'hello',
style:{
fontFamily:'short-stack'
}
})
注意事項和陷阱
雖然 PixiJS 的確讓處理文字很簡單，但也有一些事項需要多加注意。
首先，修改現有的文字字串需要重新產生該文字的內部呈現，這是一個會影響效能的緩慢運算，特別是在您每幀都修改許多文字物件時。如果您的專案需要大量同時在畫面中頻繁變更文字，請考慮使用位元圖片文字物件 (如下說明)，它使用固定位元圖片字型，在文字變更時不需要重新產生。
其次，縮放文字時要小心。將文字物件的縮放設定為 > 1.0 會導致模糊/像素化的顯示，這是因為文字並未以所需的較高解析度重新呈現以看起來銳利 - 仍是產生時的相同解析度。為了解決此問題，您可以使用更高的初始大小來呈現並縮小縮放。這將使用更多的記憶體，但讓您的文字始終保持清晰鮮明。
位元圖片文字
除了使用標準文字的方式將文字新增到您的專案，PixiJS 也支援位元圖片字型。位元圖片字型與 TrueType 或其他一般用途的字型非常不同，因為它們包含單一影像，其中包含您要使用的每個字母的預先呈現版本。在使用位元圖片字型繪製文字時，PixiJS 不需要將字型字形呈現到暫存緩衝區 - 它可以僅從主字型影像複製並蓋上字串的每個字元。
此方法的主要優點是速度 - 頻繁變更文字會便宜許多，且每個額外的文字呈現速度都會因為共享來源紋理而加快許多。
查看 位元圖片文字範例程式碼。
位元圖片字型
- 第三方解決方案
- 自動產生位元圖片字型
選擇正確的方法
文字
- 靜態文字
- 少數文字物件
- 高傳真文字呈現（字距調整等）
- 文字配置（行距與字距）
點陣文字
- 動態文字
- 大量的文字物件
- 低記憶體
HTML文字
- 靜態文字
- 需要 HTML 格式