PixiJS怎么繪制常見圖形

這篇文章主要介紹“PixiJS怎么繪制常見圖形”，在日常操作中，相信很多人在PixiJS怎么繪制常見圖形問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”PixiJS怎么繪制常見圖形”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

pixijs 是一個強大的 Web Canvas 2D 庫，以其強大性能而著稱。其底層使用了 WebGL 實現了硬件加速，當然如果不支持的話，也能回退為 Canvas。

本文使用的 pixijs 版本為 7.1.2。

Application

Application 代表一個 pixijs 應用，對應一個 Canvas。

創建一個 Application 實例：

const app = new PIXI.Application({ width: 640, height: 360 });

支持的構造參數很多，這里列舉一些常用選項：

• width / height：設置 Canvas 的寬高；

• background：背景色，可以是數字或字符串，默認為 0x000000，即黑色；

• view：指定要應用的 Cavans 元素，可以不提供，pixijs 會給你創建一個新的，你將它添加到 body 元素下就好；

• resizeTo：跟隨某個容器元素的尺寸變化進行自適應，比如 window。設置后 width / height 配置項目失效；

更多高階配置看 官方 API 文檔。

這里我沒有提供 view，所以我們要將 pixijs 給我們生成的 Canvas 元素掛到頁面上：

document.body.appendChild(app.view);

下面我們開始繪制圖形。

Graphics

Graphics 類常用于繪制一些比較基礎的圖形，比如矩形、圓形、線段等。除了繪制圖形，還可以用它來設置遮罩（mask）或點擊區域（hitArea）。

在一個 Graphics 下，不只是只能畫一個圖形，也可以畫多個圖形。

繪制矩形

繪制紅色填充色的矩形。

const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 設置填充色
rect.lineStyle(5, 0xFFFFFF); // 設置描邊線寬和顏色
rect.drawRect(100, 100, 200, 100); // 參數分別為 x, y, width, height
// 添加到 stage 下
app.stage.addChild(rect);

app.stage 是放置圖形的地方，也就是 “舞臺”。這里我們要通過 addChild 將創建的圖形加入進去，之后 pixijs 的渲染器會讀取到這個圖形進行繪制。

drawRect 是一種舊的寫法，看起來是直接在畫布上繪制矩形，但其實底層是創建一個 Rect 對象添加到圖形樹上，先不繪制，然后在圖形樹準備好之后的渲染階段，再讀取該對象的數據并且繪制。這和 CanvasRenderingContext2D.fillRect 屬于不同的繪制機制，后者不會維護圖形樹狀態。

Graphics 本質并不是繪制工具，而是構建樹的工具，繪制的實現在其他地方。

另一種寫法，首先創建 PIXI.Rectangle 實例，這個實例只是描述一個矩形的屬性，本身并不能直接添加到 stage 上，需要通過 Graphics 的 drawShape 添加到 Graphics 上。

const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 設置填充色
rect.lineStyle(5, 0xFFFFFF); // 設置描邊線寬和顏色
const s = new PIXI.Rectangle(100, 100, 200, 100);
rect.drawShape(s);
// 記得添加到 stage 下
app.stage.addChild(rect);

繪制圓形

繪制圓形同理：

const circle = new PIXI.Graphics();
circle.beginFill(0x00FF44);
circle.lineStyle(5, 0xFFFFFF);
// 參數：cx（中點）, cy, radius
circle.drawCircle(100, 100, 50);

app.stage.addChild(circle);

效果：

有種嚴重的鋸齒感，這是因為 pixijs 默認是不開抗鋸齒的，因為抗鋸齒處理要消耗額外的性能。

可以開啟全局的抗鋸齒能力：

const app = new PIXI.Application({ antialias: true, /* 其他配置項 */ });

開啟抗鋸齒后的圓形，肉眼可見地圓潤了：

繪制圓角矩形

代碼：

const roundedRect = new PIXI.Graphics();
roundedRect.beginFill(0xff0044);
roundedRect.lineStyle(5, 0xffffff);
// 參數為：x, y, width, height, radius
roundedRect.drawRoundedRect(100, 100, 200, 100, 16);
// 添加到 stage 下
app.stage.addChild(roundedRect);

效果：

繪制橢圓

代碼：

const ellipse = new PIXI.Graphics();
ellipse.beginFill(0xff0044);
ellipse.lineStyle(5, 0xffffff);
// 參數：cx, cy, width, height
ellipse.drawEllipse(100, 100, 80, 40);
// 添加到 stage 下
app.stage.addChild(ellipse);

效果：

繪制線條

代碼：

const line = new PIXI.Graphics();
line.lineStyle(5, 0xffffff);
line.moveTo(100, 100);
line.lineTo(300, 250);
// 添加到 stage 下
app.stage.addChild(line);

效果：

繪制多邊形

代碼：

const polygon = new PIXI.Graphics();
polygon.beginFill(0xff0044);
polygon.lineStyle(5, 0xffffff);
// x1, y1, x2, y2, ...
polygon.drawPolygon(100, 100, 300, 250, 350, 50);
// 添加到 stage 下
app.stage.addChild(polygon);

效果：

繪制三階貝塞爾曲線

代碼：

const curve = new PIXI.Graphics();
curve.beginFill(0xff0044);
curve.lineStyle(5, 0xffffff);
curve.moveTo(100, 180)
// cpX, cpY, cpX2, cpY2, toX, toY 
curve.bezierCurveTo(90, 100, 210, 100, 300, 180)
// 添加到 stage 下
app.stage.addChild(curve);

效果：

到此，關于“PixiJS怎么繪制常見圖形”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！