iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

再談 PixiJS,那些先前不一定有提到的部分與地雷系列 第 20

[Re:PixiJS - Day20] 用 tint() 方法填色時,原物件需為白色或灰階

  • 分享至 

  • xImage
  •  

實務上,通常會使用 白色或灰階 的PNG圖片、
PIXI.TextPIXI.Graphics,配合 tint 的方法,填入想要的顏色


實作了 tint 方法的類別:


繼承自 Container 類別 的各個類別皆實作了 tint 的方法 (但不包含 Container 類別本身)


tint 的用法:讓可視物件加上 tint 效果,預設為 0xFFFFFF

tint 預設 0xFFFFFF,有點類似於 alpha:1 的概念

  • 原色為白色,tint 0xFFFFFF 時,結果為白色
  • 原色為白色,tint 各個顏色時,結果為 tint的顏色
  • 原色為灰色,tint 各個顏色時,結果介於 tint的顏色黑色
  • 原色為黑色,tint 各個顏色時,結果為 黑色

[ Demo ]


有透明的情形時:

  • 透明不另外影響結果

[ Demo ]


各種顏色遇到 tint 各種顏色時:

  • 原色為 彩色 時,tint 各個顏色 的結果 較難預期

但也許也能直接用特樣的特性,做出特別的 濾鏡效果
[ Demo ]


今日小結

  • 純白色使用 tint 時,結果為 tint 的顏色;
  • 為避免 tint 產生意外的顏色,可先將圖片 轉灰階後 再使用 tint

上一篇
[Re:PixiJS - Day19] PIXI.Text / SVG 不是向量的
下一篇
[Re:PixiJS - Day21] 畫漸層填色、材質重複填滿會遇到的問題
系列文
再談 PixiJS,那些先前不一定有提到的部分與地雷45
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言