iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 22
0

前幾篇提到畫漸層填色,這篇來討論使用漸層線段

畫漸層色塊時使用 canvas2d gradient API 方法,繪製漸層線段原理差不多,但有不同的實作方法:
方法1: 繪製漸層,使用遮罩遮住漸層
方法2: 使用漸層遮罩


[ Demo ] 兩種結果不太相同

用純色線段遮罩遮漸層色塊:

  • 被遮物:左方紅色到白色的色塊
  • 遮罩:中間方框
  • 結果:右方紅色到白色的方框

用漸層色塊遮罩遮純色線段:

  • 被遮物:左方紅框
  • 遮罩:中間黑色到白色的色塊
  • 結果:右方紅色到透明的方框

這裡的漸層遮罩,我使用 0x000000 > 0xffffff 的漸層。
PixiJS / WebGL 裡,白色表示黑色
遮罩是上到下白到黑,表示上方為有下方為無

這段敘述也許有點無感,
相同原理如使用過 Photoshop 遮罩 的話,也許就比較有感了

(被遮物是紅色方框,遮罩為上到下的漸層)

前半補充,一些先前寫過的測試文章:


再來聊一個有趣的部分:

把Texture 填入線段

範例 GRAPHICS - Advanced 裡使用:lineTextureStyle() 方法填入材質線段,特性與上篇提到的 beginTextureFill() 差不多。

Demo 另外提到了 arc()弧形方法、beginHole() 挖洞方法、bezierCurveTo()貝茲曲線的方法。
本篇、本系列不會特別提到


數數兒問題:畫在 Graphic 上的不是 textrue

數數兒1:

問題: 剛剛的 Demo 裡,有幾組 Texture / BaseTexture 快取?
答案: 5組,除了左下純色方塊框框,每次使用 漸層 時,皆會產生快取

Code:

function createGradTexture() {
    const canvas = document.createElement('canvas');
    // 中間為填色的 code
    return PIXI.Texture.from(canvas);
};

const gradTexture1_1 = PIXI.Sprite.from(createGradTexture());
const gradTexture1_2 = PIXI.Sprite.from(createGradTexture());
const gradTexture1_3 = PIXI.Sprite.from(createGradTexture());

// 因為每次都繪製新的 Texture 漸層,即使長相相同,也會每次呼叫的時候,都會存成一組 Texture / BaseTexture 快取

數數兒2:

問題: 官方範例 GRAPHICS - Advanced 裡,有幾組 Texture / BaseTexture 快取?
答案: 1個,僅用來填入的 Texture 一組

Code:

// 先讀入一個 Srite,Sprite 實體存有一個 texture 快取
const sprite = PIXI.Sprite.from('assets/bg_rotate.jpg');

// 各種填入線段材質時,重複使用了同一個 texture
// ...
bezier2.lineTextureStyle(10, sprite.texture);
// ...
arc3.lineTextureStyle(20, sprite.texture);
// ...
beatifulRect.lineTextureStyle(20, sprite.texture);

// 因此最後只有一組 Texture / BaseTexture 快取

兩個數數問題都是問使用漸層材質填入 Graphics實體
差異在使用這個材質時,是每次都用新的材質,或者有重複運用

今天的內容除了填材質,提了稍硬一些的材質重複使用,
是優化 PixiJS 效能、避免頁面當掉滿重要的部分


上一篇
[Re:PixiJS - Day21] 畫漸層填色、材質重複填滿會遇到的問題
下一篇
[Re:PixiJS - Day23] 了解 Texture / BaseTexture
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45

尚未有邦友留言

立即登入留言