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

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

前言

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

幾何圖形

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

圓形 drawCircle

圓形的使用方式是 drawCircle()，而它分別有三個參數 x、y 以及 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，參數與矩形非常雷同，一樣是 x、y、width 以及 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 方法來使用，而參數與矩形很類同 x、y、width 以及 height，但是不同的地方在於它多了 cornerRadius，cornerRadius 參數的意思代表著圓角要多圓

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()，參數方面就滿特別的 x、y、points、radius、innerRadius 以及 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();

參考文獻