iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
2
Modern Web

PixiJS,方便好用的 WebGL 內容產生工具系列 第 8

[PixiJS - Day-08] PIXI.Graphics 與繪圖

  • 分享至 

  • xImage
  •  

PIXI.Graphics 官方文件:
http://pixijs.download/dev/docs/PIXI.Graphics.html


PixiJS.Graphics 是我常使用的方法,除了畫出圖像外,也使用此類別畫出來的圖像來做遮罩
例一:萬花筒
alt
每片六邊形由六個三角形組成,
每片三角形各自畫了三角形的遮罩,三角形內則是物件本身做動態

例二:按鈕
alt
為避免粒子效果超出按鈕範圍,畫了梯形範圍做遮罩


PIXI.Graphics 繼承自 PixiJS.Container,因此也會有前一篇提到的各個特性,可以在畫完後再調整整個 PIXI.Graphics 實體的 alpha、旋轉、座標等。

雖然可以使用 PIXI.Container 的特性,但我習慣讓 PIXI.Graphics 類別專心處理繪圖,用來互動與容器的功能還是交給 PIXI.Container 的物件處理


PIXI.Graphics 的繪圖,每次畫完一個形狀時,會放在 PIXI.Graphics 實體的 graphicsData 裡

每一個形狀, 則分為外框(line)、填滿(fill)與路徑
想法上很接近 photoshop 裡的形狀工具 alt

// 畫實心方塊的情形:
var testGraphics = new PIXI.Graphics();
testGraphics.beginFill(0xff0000);
testGraphics.drawRect(0, 0, 100, 100); //畫一個紅色方塊
testGraphics.endFill();
console.log(testGraphics.graphicsData); // [t]

testGraphics.beginFill(0xff9900);
testGraphics.drawRect(0, 110, 100, 100); //畫另一個橘色方塊
testGraphics.endFill();
console.log(testGraphics.graphicsData); // (2)[t, t]
// 這次不指定填色
var testGraphics = new PIXI.Graphics();
testGraphics.drawRect(0, 0, 100, 100);
console.log(testGraphics.graphicsData); // [t]

testGraphics.drawRect(0, 110, 100, 100);
console.log(testGraphics.graphicsData);
// (2)[t, t],繪製的路徑有放進 graphicsData裡

直接繪製形狀的方式有幾個:
drawCircledrawEllipsedrawPolygondrawRectdrawRoundedRectdrawShape
很像 photoshop 裡形狀工具裡的各種功能
alt

另外的方法則是 moveTo 到起始點,然後使用 lineTo、bezierCurveTo等方法一筆一筆畫出形狀
對,就是 photoshop 裡鋼筆工具的感覺alt

beginFill 與 endFill:
beginFill(color, alpha):指定填滿的顏色與透明度,
在最後呼叫 endFill() 前的線段與形狀會套用填滿的顏色與透明度

lineStyle:
lineStyle(lineWidth, color, alpha):
指定線段的寬度、顏色、透明度

clear:
清除掉該 PIXI.Graphics 實體上繪製的 graphicsData,但不影響本身的 children

// 畫一個方塊
var testGraphics = new PIXI.Graphics();
testGraphics.beginFill(0xff0000);
testGraphics.drawRect(0, 0, 100, 100);
testGraphics.endFill();
app.stage.addChild(testGraphics);

console.log(testGraphics.graphicsData); // [t]
console.log(testGraphics.children); // [] 繪製的物件不算 children 的成員

// 這是一隻兔子
var bunny = PIXI.Sprite.fromImage('assets/basics/bunny.png');
testGraphics.addChild(bunny);

console.log(testGraphics.children); // [e] 兔子在 children 陣列裡了

testGraphics.clear(); // 方塊不見, 兔子還在
console.log(testGraphics.graphicsData); // [] graphicsData 的內容被清除了
console.log(testGraphics.children); // [e] 清除繪製的物件不會移除 children 陣列

clone:
有時的情境是需要複數個一模一樣的物件,我會用 clone() 的方法複製
需注意的是:clone() 會複製該 PIXI.Graphics 實體繪製出來的 graphicsData,但不包含本身的children

// 這是一隻兔子
var bunny = PIXI.Sprite.fromImage('assets/basics/bunny.png');

// 畫一個方塊
var testGraphics = new PIXI.Graphics();
testGraphics.beginFill(0xff0000);
testGraphics.drawRect(0, 0, 100, 100);
testGraphics.endFill();
app.stage.addChild(testGraphics);

// 把兔子放進方塊裡
testGraphics.addChild(bunny);
console.log(testGraphics.graphicsData); // [t] 有一個方塊
console.log(testGraphics.children); // [e] 方塊裡有隻兔子

// 複製放了兔子的方塊
var testGraphics2 = testGraphics.clone();
app.stage.addChild(testGraphics2);

console.log(testGraphics2.graphicsData); // [t] clone 的 PIXI.Graphics 也有一個方塊
console.log(testGraphics2.children); // [] 複製出來的方塊沒有兔子,但有方塊

另外需注意的是,目前沒有填滿漸層的方法。


PIXI.Graphics 完整的繪圖方法還是以 PIXI.Graphics 官網 為主

我目前使用過 PIXI.Graphics 的 moveTo、lineTo、bezierCurveTo;beginFill、endFill 等方法
使用起來與其他語言或是 canvas 繪製圖形的感覺沒有太大差異


上一篇
[PixiJS - Day-07] stage、PIXI.Container 與父子結構
下一篇
[PixiJS - Day-09] 遮罩
系列文
PixiJS,方便好用的 WebGL 內容產生工具31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言