PixiJS 是一個強大的 2D WebGL 渲染引擎，廣泛應用于游戲開發、數據可視化、交互式應用等領域。它提供了豐富的 API 來繪制各種圖形，包括矩形、圓形、多邊形、線條等。本文將詳細介紹如何使用 PixiJS 繪制常見圖形，并附上代碼示例。
在開始繪制圖形之前，首先需要設置 PixiJS 環境。確保你已經安裝了 PixiJS，并創建了一個基本的 HTML 文件來加載 PixiJS 庫。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PixiJS 繪制常見圖形</title>
<script src="https://pixijs.download/v7.2.4/pixi.min.js"></script>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
在 main.js 文件中，我們將編寫繪制圖形的代碼。
首先，我們需要創建一個 PixiJS 應用實例，并設置畫布的大小和背景顏色。
const app = new PIXI.Application({
width: 800,
height: 600,
backgroundColor: 0x1099bb,
resolution: window.devicePixelRatio || 1,
});
document.body.appendChild(app.view);
這段代碼創建了一個 800x600 像素的畫布，背景顏色為淺藍色，并將其添加到頁面的 body 中。
PixiJS 提供了 PIXI.Graphics 類來繪制圖形。我們可以使用 drawRect 方法來繪制矩形。
const rectangle = new PIXI.Graphics();
rectangle.beginFill(0xFF0000); // 設置填充顏色為紅色
rectangle.drawRect(50, 50, 200, 100); // 繪制矩形 (x, y, width, height)
rectangle.endFill();
app.stage.addChild(rectangle);
這段代碼在畫布的 (50, 50) 位置繪制了一個 200x100 像素的紅色矩形。
使用 drawCircle 方法可以繪制圓形。
const circle = new PIXI.Graphics();
circle.beginFill(0x00FF00); // 設置填充顏色為綠色
circle.drawCircle(400, 300, 50); // 繪制圓形 (x, y, radius)
circle.endFill();
app.stage.addChild(circle);
這段代碼在畫布的 (400, 300) 位置繪制了一個半徑為 50 像素的綠色圓形。
PixiJS 沒有直接繪制橢圓的方法，但我們可以通過繪制一個旋轉的矩形來模擬橢圓。
const ellipse = new PIXI.Graphics();
ellipse.beginFill(0x0000FF); // 設置填充顏色為藍色
ellipse.drawEllipse(600, 100, 80, 40); // 繪制橢圓 (x, y, width, height)
ellipse.endFill();
app.stage.addChild(ellipse);
這段代碼在畫布的 (600, 100) 位置繪制了一個寬度為 160 像素、高度為 80 像素的藍色橢圓。
使用 drawPolygon 方法可以繪制多邊形。多邊形的頂點坐標需要以數組的形式傳遞。
const polygon = new PIXI.Graphics();
polygon.beginFill(0xFFFF00); // 設置填充顏色為黃色
polygon.drawPolygon([
100, 300, // 第一個頂點
200, 400, // 第二個頂點
300, 300, // 第三個頂點
200, 200 // 第四個頂點
]);
polygon.endFill();
app.stage.addChild(polygon);
這段代碼繪制了一個黃色的四邊形，頂點分別為 (100, 300)、(200, 400)、(300, 300) 和 (200, 200)。
使用 lineTo 方法可以繪制線條。首先需要調用 moveTo 方法設置起點，然后調用 lineTo 方法繪制線條。
const line = new PIXI.Graphics();
line.lineStyle(5, 0xFF00FF); // 設置線條樣式 (width, color)
line.moveTo(400, 400); // 設置起點
line.lineTo(600, 500); // 繪制線條到 (600, 500)
app.stage.addChild(line);
這段代碼繪制了一條從 (400, 400) 到 (600, 500) 的紫色線條，線條寬度為 5 像素。
PixiJS 允許你組合多個圖形來創建更復雜的形狀。例如，我們可以繪制一個帶有圓角的矩形。
const roundedRect = new PIXI.Graphics();
roundedRect.beginFill(0xFFA500); // 設置填充顏色為橙色
roundedRect.drawRoundedRect(500, 400, 150, 100, 20); // 繪制圓角矩形 (x, y, width, height, radius)
roundedRect.endFill();
app.stage.addChild(roundedRect);
這段代碼在畫布的 (500, 400) 位置繪制了一個 150x100 像素的橙色圓角矩形，圓角半徑為 20 像素。
除了圖形，PixiJS 還可以繪制文本。使用 PIXI.Text 類可以輕松創建文本對象。
const text = new PIXI.Text('Hello, PixiJS!', {
fontFamily: 'Arial',
fontSize: 36,
fill: 0xFFFFFF,
align: 'center'
});
text.x = 300;
text.y = 500;
app.stage.addChild(text);
這段代碼在畫布的 (300, 500) 位置繪制了一段白色的文本，內容為 “Hello, PixiJS!“。
PixiJS 還支持繪制紋理。你可以使用 PIXI.Sprite 類來加載并顯示圖像。
const texture = PIXI.Texture.from('path/to/image.png');
const sprite = new PIXI.Sprite(texture);
sprite.x = 100;
sprite.y = 100;
app.stage.addChild(sprite);
這段代碼加載了一張圖片，并將其顯示在畫布的 (100, 100) 位置。
PixiJS 支持動畫效果。你可以使用 PIXI.Ticker 類來創建動畫。
const animatedCircle = new PIXI.Graphics();
animatedCircle.beginFill(0xFF0000);
animatedCircle.drawCircle(100, 100, 50);
animatedCircle.endFill();
app.stage.addChild(animatedCircle);
let direction = 1;
app.ticker.add((delta) => {
animatedCircle.x += 1 * direction;
if (animatedCircle.x > 700) {
direction = -1;
} else if (animatedCircle.x < 100) {
direction = 1;
}
});
這段代碼創建了一個紅色的圓形，并在畫布上左右移動。
PixiJS 支持交互式圖形。你可以為圖形添加事件監聽器，使其響應用戶的點擊、懸停等操作。
const interactiveRect = new PIXI.Graphics();
interactiveRect.beginFill(0x00FF00);
interactiveRect.drawRect(200, 200, 100, 100);
interactiveRect.endFill();
interactiveRect.interactive = true;
interactiveRect.buttonMode = true;
interactiveRect.on('pointerdown', () => {
interactiveRect.tint = 0xFF0000;
});
app.stage.addChild(interactiveRect);
這段代碼創建了一個綠色的矩形，當用戶點擊它時，矩形的顏色會變為紅色。
PixiJS 支持漸變填充。你可以使用 beginTextureFill 方法來創建漸變填充效果。
const gradientRect = new PIXI.Graphics();
const gradient = new PIXI.Texture.from('path/to/gradient.png');
gradientRect.beginTextureFill({ texture: gradient });
gradientRect.drawRect(300, 300, 200, 100);
gradientRect.endFill();
app.stage.addChild(gradientRect);
這段代碼創建了一個漸變填充的矩形。
PixiJS 支持為圖形添加陰影效果。你可以使用 dropShadow 屬性來設置陰影。
const shadowRect = new PIXI.Graphics();
shadowRect.beginFill(0xFFFFFF);
shadowRect.drawRect(400, 400, 100, 100);
shadowRect.endFill();
shadowRect.filters = [new PIXI.filters.DropShadowFilter({
distance: 10,
blur: 5,
alpha: 0.5
})];
app.stage.addChild(shadowRect);
這段代碼創建了一個帶有陰影效果的白色矩形。
PixiJS 允許你使用 moveTo、lineTo、bezierCurveTo 等方法來繪制復雜的路徑。
const path = new PIXI.Graphics();
path.lineStyle(5, 0x00FF00);
path.moveTo(100, 100);
path.lineTo(200, 200);
path.bezierCurveTo(250, 250, 300, 200, 400, 100);
path.lineTo(500, 200);
app.stage.addChild(path);
這段代碼繪制了一條復雜的路徑，包括直線和貝塞爾曲線。
PixiJS 可以用于繪制網格。你可以使用循環來繪制水平和垂直線。
const grid = new PIXI.Graphics();
grid.lineStyle(1, 0x000000);
for (let i = 0; i < 800; i += 50) {
grid.moveTo(i, 0);
grid.lineTo(i, 600);
}
for (let j = 0; j < 600; j += 50) {
grid.moveTo(0, j);
grid.lineTo(800, j);
}
app.stage.addChild(grid);
這段代碼繪制了一個 50x50 像素的網格。
PixiJS 可以用于繪制餅圖。你可以使用 arc 方法來繪制扇形。
const pieChart = new PIXI.Graphics();
pieChart.beginFill(0xFF0000);
pieChart.moveTo(400, 300);
pieChart.arc(400, 300, 100, 0, Math.PI / 2);
pieChart.lineTo(400, 300);
pieChart.endFill();
pieChart.beginFill(0x00FF00);
pieChart.moveTo(400, 300);
pieChart.arc(400, 300, 100, Math.PI / 2, Math.PI);
pieChart.lineTo(400, 300);
pieChart.endFill();
pieChart.beginFill(0x0000FF);
pieChart.moveTo(400, 300);
pieChart.arc(400, 300, 100, Math.PI, 3 * Math.PI / 2);
pieChart.lineTo(400, 300);
pieChart.endFill();
pieChart.beginFill(0xFFFF00);
pieChart.moveTo(400, 300);
pieChart.arc(400, 300, 100, 3 * Math.PI / 2, 2 * Math.PI);
pieChart.lineTo(400, 300);
pieChart.endFill();
app.stage.addChild(pieChart);
這段代碼繪制了一個四色餅圖。
PixiJS 可以用于繪制環形圖。你可以使用 arc 方法來繪制環形。
const ringChart = new PIXI.Graphics();
ringChart.lineStyle(20, 0xFF0000);
ringChart.arc(400, 300, 100, 0, Math.PI / 2);
ringChart.lineStyle(20, 0x00FF00);
ringChart.arc(400, 300, 100, Math.PI / 2, Math.PI);
ringChart.lineStyle(20, 0x0000FF);
ringChart.arc(400, 300, 100, Math.PI, 3 * Math.PI / 2);
ringChart.lineStyle(20, 0xFFFF00);
ringChart.arc(400, 300, 100, 3 * Math.PI / 2, 2 * Math.PI);
app.stage.addChild(ringChart);
這段代碼繪制了一個四色環形圖。
PixiJS 允許你使用 drawShape 方法繪制自定義圖形。你可以使用 PIXI.Polygon 類來定義自定義形狀。
const customShape = new PIXI.Graphics();
customShape.beginFill(0xFF00FF);
customShape.drawShape(new PIXI.Polygon([
100, 100,
200, 200,
300, 100,
200, 0
]));
customShape.endFill();
app.stage.addChild(customShape);
這段代碼繪制了一個自定義形狀。
PixiJS 支持復雜的動畫效果。你可以使用 PIXI.Ticker 類來創建復雜的動畫。
const animatedShape = new PIXI.Graphics();
animatedShape.beginFill(0xFF0000);
animatedShape.drawRect(0, 0, 100, 100);
animatedShape.endFill();
app.stage.addChild(animatedShape);
let angle = 0;
app.ticker.add((delta) => {
angle += 0.01;
animatedShape.x = 400 + Math.cos(angle) * 100;
animatedShape.y = 300 + Math.sin(angle) * 100;
});
這段代碼創建了一個紅色的矩形，并在畫布上沿著圓形路徑移動。
PixiJS 支持復雜的交互效果。你可以為圖形添加多個事件監聽器，使其響應用戶的不同操作。
const interactiveShape = new PIXI.Graphics();
interactiveShape.beginFill(0x00FF00);
interactiveShape.drawRect(200, 200, 100, 100);
interactiveShape.endFill();
interactiveShape.interactive = true;
interactiveShape.buttonMode = true;
interactiveShape.on('pointerover', () => {
interactiveShape.tint = 0xFF0000;
});
interactiveShape.on('pointerout', () => {
interactiveShape.tint = 0xFFFFFF;
});
interactiveShape.on('pointerdown', () => {
interactiveShape.scale.x *= 1.1;
interactiveShape.scale.y *= 1.1;
});
app.stage.addChild(interactiveShape);
這段代碼創建了一個綠色的矩形，當用戶懸停時顏色變為紅色，點擊時放大。
PixiJS 支持復雜的路徑動畫。你可以使用 PIXI.Ticker 類來創建沿著復雜路徑移動的動畫。
const pathAnimation = new PIXI.Graphics();
pathAnimation.lineStyle(5, 0x00FF00);
pathAnimation.moveTo(100, 100);
pathAnimation.lineTo(200, 200);
pathAnimation.bezierCurveTo(250, 250, 300, 200, 400, 100);
pathAnimation.lineTo(500, 200);
app.stage.addChild(pathAnimation);
const animatedCircle = new PIXI.Graphics();
animatedCircle.beginFill(0xFF0000);
animatedCircle.drawCircle(0, 0, 10);
animatedCircle.endFill();
app.stage.addChild(animatedCircle);
let t = 0;
app.ticker.add((delta) => {
t += 0.01;
if (t > 1) t = 0;
const point = pathAnimation.geometry.getPointAt(t);
animatedCircle.x = point.x;
animatedCircle.y = point.y;
});
這段代碼創建了一個沿著復雜路徑移動的紅色圓形。
PixiJS 允許你將多個圖形組合在一起，創建復雜的圖形。
const complexShape = new PIXI.Graphics();
complexShape.beginFill(0xFF0000);
complexShape.drawRect(0, 0, 100, 100);
complexShape.endFill();
complexShape.beginFill(0x00FF00);
complexShape.drawCircle(50, 50, 50);
complexShape.endFill();
complexShape.beginFill(0x0000FF);
complexShape.drawPolygon([
0, 0,
100, 0,
50, 100
]);
complexShape.endFill();
complexShape.x = 400;
complexShape.y = 300;
app.stage.addChild(complexShape);
這段代碼創建了一個由矩形、圓形和三角形組成的復雜圖形。
PixiJS 支持復雜的動畫組合。你可以將多個動畫組合在一起，創建復雜的動畫效果。
const animatedComplexShape = new PIXI.Graphics();
animatedComplexShape.beginFill(0xFF0000);
animatedComplexShape.drawRect(0, 0, 100, 100);
animatedComplexShape.endFill();
animatedComplexShape.beginFill(0x00FF00);
animatedComplexShape.drawCircle(50, 50, 50);
animatedComplexShape.endFill();
animatedComplexShape.beginFill(0x0000FF);
animatedComplexShape.drawPolygon([
0, 0,
100, 0,
50, 100
]);
animatedComplexShape.endFill();
animatedComplexShape.x = 400;
animatedComplexShape.y = 300;
app.stage.addChild(animatedComplexShape);
let angle = 0;
app.ticker.add((delta) => {
angle += 0.01;
animatedComplexShape.x = 400 + Math.cos(angle) * 100;
animatedComplexShape.y = 300 + Math.sin(angle) * 100;
animatedComplexShape.rotation += 0.01;
});
這段代碼創建了一個由矩形、圓形和三角形組成的復雜圖形，并在畫布上沿著圓形路徑移動和旋轉。
PixiJS 支持復雜的交互組合。你可以為多個圖形添加事件監聽器，使其響應用戶的不同操作。
”`javascript
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
