PixiJS V5 教學 (14) - Graphics(2)

前言

前一篇介紹了基本的幾何圖形的繪畫,但是只介紹矩形,其實 PIXI 還有其他幾何圖形的繪畫,所以接下來就來講其他的幾何圖形囉

幾何圖形

在前面有講過,所有圖形的起手式絕對是要先 new PIXI.Graphics(); 實例化,所以其他的也是一樣。

圓形 drawCircle

圓形的使用方式是 drawCircle(),而它分別有三個參數 xy 以及 radius,基本上我們可以透過 第三參數也就是 radius 來控制圓形大小

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

橢圓形 drawEllipse

橢圓形的方法是 drawEllipse,參數與矩形非常雷同,一樣是 xywidth 以及 height

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

圓角矩形 drawRoundedRect

此外 PIXI 還有提供另一種矩形,也就是圓角矩形,這是是使用 drawRoundedRect 方法來使用,而參數與矩形很類同 xywidth 以及 height,但是不同的地方在於它多了 cornerRadiuscornerRadius 參數的意思代表著圓角要多圓

1
2
3
4
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.drawRoundedRect(0, 0, 90, 50, 15);
graphics.endFill();

多邊形 drawPolygon

多邊形這個是使用 drawPolygon 方法,而 drawPolygon 就稍微有點特別一點了,drawPolygon 採用的是一個陣列來做繪畫

1
2
3
4
5
6
7
8
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.drawPolygon([
100,100,
0,100,
0,10
]);
graphics.endFill();

線 moveTo

接下來講一下跟多邊形類似的,也是最常被使用的線形,線形其主要會使用的方法為 起點 moveTo()、終點 lineTo(),通常會線形繪畫完畢後會建議你關閉路徑 closePath();

線的繪畫其實也很特別,可以有多個終點

1
2
3
4
5
6
7
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.moveTo(200, 200);
graphics.lineTo(10, 200);
graphics.lineTo(50, 150);
graphics.closePath();
graphics.endFill();

星型 drawStar

最後 PIXI 還有提供的幾何圖形,我個人覺得滿特別的,也就是星型 drawStar(),參數方面就滿特別的 xypointsradiusinnerRadius 以及 rotation

1
2
3
4
5
let graphics = new PIXI.Graphics();
graphics.lineStyle(5, 0x000000, 1);
graphics.drawStar(0, 0, 7, 50);
graphics.drawStar(100, 100, 4, 50);
graphics.endFill();

參考文獻

0%