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

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

前言

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

幾何圖形

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

起手式

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

1
let graphics = new PIXI.Graphics();

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

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

接下來我們會使用 PIXI.Graphics 的另一個 API drawRect 開始正式繪畫矩形，參數分別為 x、y、width 以及 height，注意這邊 x、y 起始點是從左上 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('你點到我！');
};

參考資料