快捷導(dǎo)航

PixiJS學(xué)習(xí)之常見圖形的繪制詳解

更新時(shí)間：2023年02月20日 09:03:51 作者：前端西瓜哥

pixijs 是一個(gè)強(qiáng)大的 Web Canvas 2D 庫，以其強(qiáng)大性能而著稱。這篇文章主要帶大家學(xué)習(xí)一下PixiJS是如何實(shí)現(xiàn)常見圖形繪制的，希望對大家有所幫助

Application

Application 代表一個(gè) pixijs 應(yīng)用，對應(yīng)一個(gè) Canvas。

創(chuàng)建一個(gè) Application 實(shí)例：

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

支持的構(gòu)造參數(shù)很多，這里列舉一些常用選項(xiàng)：

width / height：設(shè)置 Canvas 的寬高；
background：背景色，可以是數(shù)字或字符串，默認(rèn)為 0x000000，即黑色；
view：指定要應(yīng)用的 Cavans 元素，可以不提供，pixijs 會給你創(chuàng)建一個(gè)新的，你將它添加到 body 元素下就好；
resizeTo：跟隨某個(gè)容器元素的尺寸變化進(jìn)行自適應(yīng)，比如 window。設(shè)置后 width / height 配置項(xiàng)目失效；

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

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

document.body.appendChild(app.view);

下面我們開始繪制圖形。

Graphics

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

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

繪制矩形

繪制紅色填充色的矩形。

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

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

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

Graphics 本質(zhì)并不是繪制工具，而是構(gòu)建樹的工具，繪制的實(shí)現(xiàn)在其他地方。

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

const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 設(shè)置填充色
rect.lineStyle(5, 0xFFFFFF); // 設(shè)置描邊線寬和顏色
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);
// 參數(shù)：cx（中點(diǎn)）, cy, radius
circle.drawCircle(100, 100, 50);

app.stage.addChild(circle);

效果：

有種嚴(yán)重的鋸齒感，這是因?yàn)?pixijs 默認(rèn)是不開抗鋸齒的，因?yàn)榭逛忼X處理要消耗額外的性能。

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

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

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

繪制圓角矩形

代碼：

const roundedRect = new PIXI.Graphics();
roundedRect.beginFill(0xff0044);
roundedRect.lineStyle(5, 0xffffff);
// 參數(shù)為：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);
// 參數(shù)：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);

效果：