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('你點到我!');
};

參考資料

Liker 讚賞 (拍手)

如果這一篇筆記文章對你有幫助,希望可以求點支持或 牡蠣 鼓勵 (ノД`)・゜・。

Liker 是一個按讚(拍手)的讚賞機制,每一篇文章最多可以按五下拍手,過程你只需要登入,如果你願意按個讚,對於創作者來講是一個莫大的鼓勵與支持。

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ