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
主要有三個參數,分別為 size
、16 進位 color
、alpha
,主要用途是給予輪廓,概念有點類似 CSS 的 border
1 | let graphics = new PIXI.Graphics(); |
接下來我們會使用 PIXI.Graphics
的另一個 API drawRect
開始正式繪畫矩形,參數分別為 x
、y
、width
以及 height
,注意這邊 x
、y
起始點是從左上 0 ,0 開始 計算
1 | let graphics = new PIXI.Graphics(); |
最後會畫完畢後要記得輸入關閉的語法,最後再把它加入到我們先前的 container 就好了
1 | let graphics = new PIXI.Graphics(); |
寫到現在我發現我少講了一個東西,也就是填滿的,目前矩形雖然有邊框,但可以發現缺少了內容物,而填滿的語法其實很簡單,只需要 graphics.beginFill(0x000000);
就可以了,但是要記住必須在 graphics.drawRect(200, 200, 50, 50);
才有效
最後我們可以搭配前一章節所學來結合也可以
1 | container.interactive = true; |