pixijs H5游戏开发入门（三）几何图形绘制

时间：

分类：

pixijs

字数：

2.1k 字

时长：

大约需要 10 分钟

次数：

0 人阅读

本系列文章

本文编写时 pixijs 版本： v7.3.2

几何图形

所有形状的绘制，都先从创建Pixi的Graphics类(Pixi.Graphics)的实例开始。

本文部分示例代码依赖 @pixi/graphics-extras ，CDN地址：https://unpkg.com/@pixi/graphics-extras@7.3.2/dist/graphics-extras.min.js。

效果如下，此效果包含文章中所有图形绘制方法，文章最后有本示例的完整代码：

drawRect 矩形绘制

1
2
3
4
5
6
7
8
9
// 矩形绘制 x y 从左上角开始
let rectangle = new PIXI.Graphics();
rectangle.lineStyle(4, 0xFF3300, 1);
rectangle.beginFill(0x66CCFF);
rectangle.drawRect(0, 0, 64, 64);
rectangle.endFill();
rectangle.x = 10;
rectangle.y = 10;
app.stage.addChild(rectangle);

drawRoundedRect 圆角矩形绘制

1
2
3
4
5
6
7
8
9
// 圆角矩形绘制 x y 从左上角开始
let roundBox = new PIXI.Graphics();
roundBox.lineStyle(4, 0x99CCFF, 1);
roundBox.beginFill(0xFF9933);
roundBox.drawRoundedRect(0, 0, 84, 36, 10)
roundBox.endFill();
roundBox.x = 10;
roundBox.y = 10 + 64 +10;
app.stage.addChild(roundBox);

drawCircle 圆形绘制

1
2
3
4
5
6
7
8
// 圆形绘制 x y 从圆心开始
let circle = new PIXI.Graphics();
circle.beginFill(0x9966FF);
circle.drawCircle(0, 0, 32);
circle.endFill();
circle.x = 10 + 64 + 10 + 32;
circle.y = 10 + 32;
app.stage.addChild(circle);

drawEllipse 椭圆绘制

1
2
3
4
5
6
7
8
// 椭圆绘制 x y 从圆心开始
let ellipse = new PIXI.Graphics();
ellipse.beginFill(0xFFFF00);
ellipse.drawEllipse(0, 0, 50, 20);
ellipse.endFill();
ellipse.x = 10 + 64 + 10 + 32 + 32 + 10 + 50;
ellipse.y = 10 + 32;
app.stage.addChild(ellipse);

drawPolygon 线段绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 线段绘制 x y 从起点开始
let line = new PIXI.Graphics();
line.lineStyle(4, 0xFFFFFF, 1);
line.moveTo(0, 0);
line.lineTo(80, 50);
line.x = 10 + 64 + 10 + 32 + 32 + 10 + 50 + 50 + 10;
line.y = 10;
app.stage.addChild(line);

let triangle = new PIXI.Graphics();
triangle.beginFill(0x66FF33);
triangle.drawPolygon([
    -32, 64,             //First point
    32, 64,              //Second point
    0, 0                 //Third point
]);
triangle.endFill();
triangle.x = 10 + 84 + 10 + 40;
triangle.y = 10 + 64 + 10;
app.stage.addChild(triangle);

drawChamferRect 倒角矩形绘制

1
2
3
4
5
6
7
8
9
// 倒角矩形绘制，依赖 @pixi/graphics-extras
let chamferRect = new PIXI.Graphics(); 
chamferRect.lineStyle(4, 0xFF3300, 1);
chamferRect.beginFill(0x66CCFF);
chamferRect.drawChamferRect(0, 0, 64, 64, 10);
chamferRect.endFill();
chamferRect.x = 10 + 84 + 10 + 40 + 60;
chamferRect.y = 10 + 64 + 10;
app.stage.addChild(chamferRect);

drawFilletRect 圆角矩形绘制支持圆角负数半径

本示例依赖 @pixi/graphics-extras

1
2
3
4
5
6
7
8
9
// 圆角矩形绘制，依赖 @pixi/graphics-extras
let roundBox2 = new PIXI.Graphics();
roundBox2.lineStyle(4, 0x99CCFF, 1);
roundBox2.beginFill(0xFF9933);
roundBox2.drawFilletRect(0, 0, 84, 36, -10);
roundBox2.endFill();
roundBox2.x = 10 + 84 + 10 + 40 + 60 + 80;
roundBox2.y = 10 + 64 + 10;
app.stage.addChild(roundBox2);

drawRegularPolygon 正多边形绘制

本示例依赖 @pixi/graphics-extras

1
2
3
4
5
6
7
8
9
// 正多边形绘制，依赖 @pixi/graphics-extras
let regularPolygon = new PIXI.Graphics();
regularPolygon.lineStyle(4, 0x99CCFF, 1);
regularPolygon.beginFill(0xFF9933);
regularPolygon.drawRegularPolygon(0, 0, 20, 6, 15);
regularPolygon.endFill();
regularPolygon.x = 10 + 40;
regularPolygon.y = 10 + 64 + 10 + 80;
app.stage.addChild(regularPolygon);

drawRoundedPolygon 圆角正多边形绘制

本示例依赖 @pixi/graphics-extras

1
2
3
4
5
6
7
8
9
// 圆角正多边形绘制，依赖 @pixi/graphics-extras
let roundedPolygon = new PIXI.Graphics();
roundedPolygon.lineStyle(4, 0x99CCFF, 1);
roundedPolygon.beginFill(0xFF9933);
roundedPolygon.drawRoundedPolygon(0, 0, 30, 6, 10, 30); // (x, y, 半径（大小）, 边的数量, 旋转角度)
roundedPolygon.endFill();
roundedPolygon.x = 10 + 40 + 60;
roundedPolygon.y = 10 + 64 + 10 + 100;
app.stage.addChild(roundedPolygon);

drawRoundedShape 带有圆角的形状绘制

本示例依赖 @pixi/graphics-extras

1
2
3
4
5
6
7
8
9
10
11
12
13
// 带有圆角的形状绘制，支持每个点的自定义半径。依赖 @pixi/graphics-extras
let roundedShape = new PIXI.Graphics();
roundedShape.beginFill(0x66FF33);
roundedShape.drawRoundedShape([
  { x: -32, y: 64,radius: 10 },
  { x: 32, y: 64,radius: 10 },
  { x: 0, y: 0, radius: 10 },
]);
roundedShape.endFill();
roundedShape.x = 10 + 84 + 10 + 140;
roundedShape.y = 10 + 64 + 10 + 100;
console.log(roundedShape);
app.stage.addChild(roundedShape);

drawStar 星星绘制

本示例依赖 @pixi/graphics-extras

1
2
3
4
5
6
7
8
// 星星绘制，依赖 @pixi/graphics-extras
let star = new PIXI.Graphics();
star.beginFill(0xFF9933);
star.drawStar(0, 0, 5, 30, 14, 30); // (x, y, 星星有几个角, 星星半径（大小）, 内边长[默认为一半边长], 旋转角度)
star.endFill();
star.x = 10 + 84 + 10 + 200;
star.y = 10 + 64 + 10 + 100;
app.stage.addChild(star);

drawTorus 圆环形状绘制

本示例依赖 @pixi/graphics-extras

1
2
3
4
5
6
7
8
// 圆环形状绘制，依赖 @pixi/graphics-extras
let torus = new PIXI.Graphics();
torus.beginFill(0xFF9933);
torus.drawTorus(0, 0, 15, 25, 0, Math.PI * 0.8); // (x, y, 内圆半径, 外圆半径, 从哪里开始[弧度], 在哪里结束[弧度 Math.PI * 2 为整圆])
torus.endFill();
torus.x = 10 + 84 + 10 + 200;
torus.y = 10 + 64 + 10 + 200;
app.stage.addChild(torus);

开篇完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>入门示例03</title>
  <script src="https://pixijs.download/v7.3.2/pixi.js"></script>
  <script src="https://unpkg.com/@pixi/graphics-extras@7.3.2/dist/graphics-extras.min.js"></script>
  <style>
    * {margin:0;padding:0}
  </style>
</head>
<body>
  <script>
    // 创建一个 pixi 实例
    let app = new PIXI.Application({
      antialias: true, // 消除锯齿
      width: 400,
      height: 400
    });

    // 插入到 body 中
    document.body.appendChild(app.view);

    // 矩形绘制 x y 从左上角开始
    let rectangle = new PIXI.Graphics();
    rectangle.lineStyle(4, 0xFF3300, 1);
    rectangle.beginFill(0x66CCFF);
    rectangle.drawRect(0, 0, 64, 64);
    rectangle.endFill();
    rectangle.x = 10;
    rectangle.y = 10;
    app.stage.addChild(rectangle);

    // 圆角矩形绘制 x y 从左上角开始
    let roundBox = new PIXI.Graphics();
    roundBox.lineStyle(4, 0x99CCFF, 1);
    roundBox.beginFill(0xFF9933);
    roundBox.drawRoundedRect(0, 0, 84, 36, 10)
    roundBox.endFill();
    roundBox.x = 10;
    roundBox.y = 10 + 64 +10;
    app.stage.addChild(roundBox);

    // 圆形绘制 x y 从圆心开始
    let circle = new PIXI.Graphics();
    circle.beginFill(0x9966FF);
    circle.drawCircle(0, 0, 32);
    circle.endFill();
    circle.x = 10 + 64 + 10 + 32;
    circle.y = 10 + 32;
    app.stage.addChild(circle);

    // 椭圆绘制 x y 从圆心开始
    let ellipse = new PIXI.Graphics();
    ellipse.beginFill(0xFFFF00);
    ellipse.drawEllipse(0, 0, 50, 20);
    ellipse.endFill();
    ellipse.x = 10 + 64 + 10 + 32 + 32 + 10 + 50;
    ellipse.y = 10 + 32;
    app.stage.addChild(ellipse);

    // 线段 x y 从起点开始
    let line = new PIXI.Graphics();
    line.lineStyle(4, 0xFFFFFF, 1);
    line.moveTo(0, 0);
    line.lineTo(80, 50);
    line.x = 10 + 64 + 10 + 32 + 32 + 10 + 50 + 50 + 10;
    line.y = 10;
    app.stage.addChild(line);

    let triangle = new PIXI.Graphics();
    triangle.beginFill(0x66FF33);
    triangle.drawPolygon([
        -32, 64,             //First point
        32, 64,              //Second point
        0, 0                 //Third point
    ]);
    triangle.endFill();
    triangle.x = 10 + 84 + 10 + 40;
    triangle.y = 10 + 64 + 10;
    app.stage.addChild(triangle);

    // 绘制倒角矩形，依赖 @pixi/graphics-extras
    let chamferRect = new PIXI.Graphics(); 
    chamferRect.lineStyle(4, 0xFF3300, 1);
    chamferRect.beginFill(0x66CCFF);
    chamferRect.drawChamferRect(0, 0, 64, 64, 10);
    chamferRect.endFill();
    chamferRect.x = 10 + 84 + 10 + 40 + 60;
    chamferRect.y = 10 + 64 + 10;
    app.stage.addChild(chamferRect);
    
    // 圆角矩形绘制，依赖 @pixi/graphics-extras
    let roundBox2 = new PIXI.Graphics();
    roundBox2.lineStyle(4, 0x99CCFF, 1);
    roundBox2.beginFill(0xFF9933);
    roundBox2.drawFilletRect(0, 0, 84, 36, -10);
    roundBox2.endFill();
    roundBox2.x = 10 + 84 + 10 + 40 + 60 + 80;
    roundBox2.y = 10 + 64 + 10;
    app.stage.addChild(roundBox2);
    
    // 正多边形绘制，依赖 @pixi/graphics-extras
    let regularPolygon = new PIXI.Graphics();
    regularPolygon.lineStyle(4, 0x99CCFF, 1);
    regularPolygon.beginFill(0xFF9933);
    regularPolygon.drawRegularPolygon(0, 0, 20, 6, 15);
    regularPolygon.endFill();
    regularPolygon.x = 10 + 40;
    regularPolygon.y = 10 + 64 + 10 + 80;
    app.stage.addChild(regularPolygon);
    
    // 圆角正多边形绘制，依赖 @pixi/graphics-extras
    let roundedPolygon = new PIXI.Graphics();
    roundedPolygon.lineStyle(4, 0x99CCFF, 1);
    roundedPolygon.beginFill(0xFF9933);
    roundedPolygon.drawRoundedPolygon(0, 0, 30, 6, 10, 30); // (x, y, 半径（大小）, 边的数量, 旋转角度)
    roundedPolygon.endFill();
    roundedPolygon.x = 10 + 40 + 60;
    roundedPolygon.y = 10 + 64 + 10 + 100;
    app.stage.addChild(roundedPolygon);

    // 绘制带有圆角的形状，支持每个点的自定义半径。依赖 @pixi/graphics-extras
    let roundedShape = new PIXI.Graphics();
    roundedShape.beginFill(0x66FF33);
    roundedShape.drawRoundedShape([
      { x: -32, y: 64,radius: 10 },
      { x: 32, y: 64,radius: 10 },
      { x: 0, y: 0, radius: 10 },
    ]);
    roundedShape.endFill();
    roundedShape.x = 10 + 84 + 10 + 140;
    roundedShape.y = 10 + 64 + 10 + 100;
    console.log(roundedShape);
    app.stage.addChild(roundedShape);
    
    // 星星绘制，依赖 @pixi/graphics-extras
    let star = new PIXI.Graphics();
    star.beginFill(0xFF9933);
    star.drawStar(0, 0, 5, 30, 14, 30); // (x, y, 星星有几个角, 星星半径（大小）, 内边长[默认为一半边长], 旋转角度)
    star.endFill();
    star.x = 10 + 84 + 10 + 200;
    star.y = 10 + 64 + 10 + 100;
    app.stage.addChild(star);

    // 圆环形状绘制，依赖 @pixi/graphics-extras
    let torus = new PIXI.Graphics();
    torus.beginFill(0xFF9933);
    torus.drawTorus(0, 0, 15, 25, 0, Math.PI * 0.8); // (x, y, 内圆半径, 外圆半径, 从哪里开始[弧度], 在哪里结束[弧度 Math.PI * 2 为整圆])
    torus.endFill();
    torus.x = 10 + 84 + 10 + 200;
    torus.y = 10 + 64 + 10 + 200;
    app.stage.addChild(torus);
  </script>
</body>
</html>
本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2023-11-23/js-pixi-graphics/

如果您觉得文章不错，可以点击文章中的广告支持一下！