PixiJS V5 教學 (13) - Graphics(1)

前言

接下來將會來介紹一點使用 PIXI 繪畫幾何圖形,最後會再來試著整合前面的技巧。

幾何圖形

在很前面章節其實有講過 PixiJS 本身就是使用 Canvas 所開發的一個框架,對已經了解 Canvas 並有一定基礎的人相對是好學的,其中本身 PIXI 也有提供繪畫的 API,而這個幾何圖形的 API 幾乎與 Canvas 一模一樣。

起手式

基本上所有的圖形在起手的時候都一定會實例化 PIXI.Graphics

1
let graphics = new PIXI.Graphics();

首先一開始我們先畫一個簡單的正方形,在圖形中正方形類稱之為矩形,一開始會先使用 PIXI.Graphics 中的一個 API 也就是 lineStyle,這個 API lineStyle 主要有三個參數,分別為 size16 進位 coloralpha,主要用途是給予輪廓,概念有點類似 CSS 的 border

1
2
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);

接下來我們會使用 PIXI.Graphics 的另一個 API drawRect 開始正式繪畫矩形,參數分別為 xywidth 以及 height,注意這邊 xy 起始點是從左上 0 ,0 開始 計算

1
2
3
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.drawRect(200, 200, 50, 50);

最後會畫完畢後要記得輸入關閉的語法,最後再把它加入到我們先前的 container 就好了

1
2
3
4
5
6
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.drawRect(200, 200, 50, 50);
graphics.endFill();

container.addChild(graphics);

寫到現在我發現我少講了一個東西,也就是填滿的,目前矩形雖然有邊框,但可以發現缺少了內容物,而填滿的語法其實很簡單,只需要 graphics.beginFill(0x000000); 就可以了,但是要記住必須在 graphics.drawRect(200, 200, 50, 50); 才有效

最後我們可以搭配前一章節所學來結合也可以

1
2
3
4
5
container.interactive = true;
container.buttonMode = true;
container.click = () => {
alert('你點到我!');
};

參考資料