PixiJS V5 教學 (14) - Graphics(2)
前言
前一篇介紹了基本的幾何圖形的繪畫,但是只介紹矩形,其實 PIXI 還有其他幾何圖形的繪畫,所以接下來就來講其他的幾何圖形囉
幾何圖形
在前面有講過,所有圖形的起手式絕對是要先 new PIXI.Graphics();
實例化,所以其他的也是一樣。
圓形 drawCircle
圓形的使用方式是 drawCircle()
,而它分別有三個參數 x
、y
以及 radius
,基本上我們可以透過 第三參數也就是 radius
來控制圓形大小
1 | let graphics = new PIXI.Graphics(); |
橢圓形 drawEllipse
橢圓形的方法是 drawEllipse
,參數與矩形非常雷同,一樣是 x
、y
、width
以及 height
1 | let graphics = new PIXI.Graphics(); |
圓角矩形 drawRoundedRect
此外 PIXI 還有提供另一種矩形,也就是圓角矩形,這是是使用 drawRoundedRect
方法來使用,而參數與矩形很類同 x
、y
、width
以及 height
,但是不同的地方在於它多了 cornerRadius
,cornerRadius
參數的意思代表著圓角要多圓
1 | let graphics = new PIXI.Graphics(); |
多邊形 drawPolygon
多邊形這個是使用 drawPolygon
方法,而 drawPolygon
就稍微有點特別一點了,drawPolygon
採用的是一個陣列來做繪畫
1 | let graphics = new PIXI.Graphics(); |
線 moveTo
接下來講一下跟多邊形類似的,也是最常被使用的線形,線形其主要會使用的方法為 起點 moveTo()
、終點 lineTo()
,通常會線形繪畫完畢後會建議你關閉路徑 closePath();
線的繪畫其實也很特別,可以有多個終點
1 | let graphics = new PIXI.Graphics(); |
星型 drawStar
最後 PIXI 還有提供的幾何圖形,我個人覺得滿特別的,也就是星型 drawStar()
,參數方面就滿特別的 x
、y
、points
、radius
、innerRadius
以及 rotation
1 | let graphics = new PIXI.Graphics(); |