0
# Curve and Path Drawing
1

2
Advanced path drawing capabilities including bezier curves, quadratic curves, arcs, and complex path operations. Provides precise control over curve resolution and mathematical accuracy.
3

4
## Capabilities
5

6
### Curve Drawing Methods
7

8
Core methods for drawing curved paths and complex geometric shapes with mathematical precision.
9

10
```typescript { .api }
11
/**
12
 * Draws a quadratic bezier curve from current position
13
 * @param cpX - Control point X coordinate
14
 * @param cpY - Control point Y coordinate  
15
 * @param toX - End point X coordinate
16
 * @param toY - End point Y coordinate
17
 */
18
quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): this;
19

20
/**
21
 * Draws a cubic bezier curve from current position
22
 * @param cpX - First control point X coordinate
23
 * @param cpY - First control point Y coordinate
24
 * @param cpX2 - Second control point X coordinate
25
 * @param cpY2 - Second control point Y coordinate
26
 * @param toX - End point X coordinate
27
 * @param toY - End point Y coordinate
28
 */
29
bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): this;
30

31
/**
32
 * Draws an arc or circle from center point
33
 * @param cx - Center X coordinate
34
 * @param cy - Center Y coordinate
35
 * @param radius - Arc radius
36
 * @param startAngle - Starting angle in radians
37
 * @param endAngle - Ending angle in radians
38
 * @param anticlockwise - Draw counterclockwise (default: false)
39
 */
40
arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): this;
41

42
/**
43
 * Creates an arc between two tangent lines
44
 * @param x1 - First tangent point X coordinate
45
 * @param y1 - First tangent point Y coordinate
46
 * @param x2 - Second tangent point X coordinate
47
 * @param y2 - Second tangent point Y coordinate
48
 * @param radius - Arc radius
49
 */
50
arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): this;
51
```
52

53
### Arc Utilities
54

55
Static utility class providing mathematical functions for arc calculations and construction.
56

57
```typescript { .api }
58
class ArcUtils {
59
  /**
60
   * Creates an arc between two tangent lines
61
   * @param x1 - First tangent point X coordinate
62
   * @param y1 - First tangent point Y coordinate
63
   * @param x2 - Second tangent point X coordinate
64
   * @param y2 - Second tangent point Y coordinate
65
   * @param radius - Arc radius
66
   * @param points - Output array for calculated points
67
   * @returns Arc-like shape interface
68
   */
69
  static curveTo(x1: number, y1: number, x2: number, y2: number, radius: number, points: number[]): IArcLikeShape;
70
  
71
  /**
72
   * Creates an arc or curve from specified parameters
73
   * @param startX - Starting X coordinate
74
   * @param startY - Starting Y coordinate
75
   * @param cx - Center X coordinate
76
   * @param cy - Center Y coordinate
77
   * @param radius - Arc radius
78
   * @param startAngle - Starting angle in radians
79
   * @param endAngle - Ending angle in radians
80
   * @param anticlockwise - Draw counterclockwise
81
   * @param points - Output array for calculated points
82
   */
83
  static arc(startX: number, startY: number, cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise: boolean, points: number[]): void;
84
}
85
```
86

87
### Bezier Curve Utilities
88

89
Static utility class providing mathematical functions for cubic bezier curve calculations.
90

91
```typescript { .api }
92
class BezierUtils {
93
  /**
94
   * Calculates the length of a cubic bezier curve
95
   * @param fromX - Starting point X coordinate
96
   * @param fromY - Starting point Y coordinate
97
   * @param cpX - First control point X coordinate
98
   * @param cpY - First control point Y coordinate
99
   * @param cpX2 - Second control point X coordinate
100
   * @param cpY2 - Second control point Y coordinate
101
   * @param toX - End point X coordinate
102
   * @param toY - End point Y coordinate
103
   * @returns Curve length
104
   */
105
  static curveLength(fromX: number, fromY: number, cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): number;
106
  
107
  /**
108
   * Calculates and draws a cubic bezier curve by adding points to array
109
   * @param cpX - First control point X coordinate
110
   * @param cpY - First control point Y coordinate
111
   * @param cpX2 - Second control point X coordinate
112
   * @param cpY2 - Second control point Y coordinate
113
   * @param toX - End point X coordinate
114
   * @param toY - End point Y coordinate
115
   * @param points - Output array for calculated curve points
116
   */
117
  static curveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number, points: number[]): void;
118
}
119
```
120

121
### Quadratic Curve Utilities
122

123
Static utility class providing mathematical functions for quadratic bezier curve calculations.
124

125
```typescript { .api }
126
class QuadraticUtils {
127
  /**
128
   * Calculates the length of a quadratic bezier curve
129
   * @param fromX - Starting point X coordinate
130
   * @param fromY - Starting point Y coordinate
131
   * @param cpX - Control point X coordinate
132
   * @param cpY - Control point Y coordinate
133
   * @param toX - End point X coordinate
134
   * @param toY - End point Y coordinate
135
   * @returns Curve length
136
   */
137
  static curveLength(fromX: number, fromY: number, cpX: number, cpY: number, toX: number, toY: number): number;
138
  
139
  /**
140
   * Calculates and draws a quadratic bezier curve by adding points to array
141
   * @param cpX - Control point X coordinate
142
   * @param cpY - Control point Y coordinate
143
   * @param toX - End point X coordinate
144
   * @param toY - End point Y coordinate
145
   * @param points - Output array for calculated curve points
146
   */
147
  static curveTo(cpX: number, cpY: number, toX: number, toY: number, points: number[]): void;
148
}
149
```
150

151
### Arc-Like Shape Interface
152

153
Interface representing the result of arc calculations and construction operations.
154

155
```typescript { .api }
156
interface IArcLikeShape {
157
  cx: number;
158
  cy: number;
159
  radius: number;
160
  startAngle: number;
161
  endAngle: number;
162
  anticlockwise: boolean;
163
}
164
```
165

166
## Usage Examples
167

168
**Drawing Smooth Curves:**
169

170
```typescript
171
import { Graphics } from "@pixi/graphics";
172

173
const graphics = new Graphics();
174

175
// Quadratic bezier curve (single control point)
176
graphics
177
  .lineStyle(3, 0xff0000)
178
  .moveTo(50, 150)
179
  .quadraticCurveTo(150, 50, 250, 150);
180

181
// Cubic bezier curve (two control points for more complex curves)
182
graphics
183
  .lineStyle(3, 0x00ff00)
184
  .moveTo(50, 200)
185
  .bezierCurveTo(100, 100, 200, 300, 250, 200);
186
```
187

188
**Drawing Arcs and Circles:**
189

190
```typescript
191
const graphics = new Graphics();
192

193
// Complete circle
194
graphics
195
  .lineStyle(2, 0x0000ff)
196
  .arc(150, 150, 50, 0, Math.PI * 2);
197

198
// Arc segment (quarter circle)
199
graphics
200
  .lineStyle(4, 0xff00ff)
201
  .arc(300, 150, 60, 0, Math.PI / 2);
202

203
// Arc going counter-clockwise
204
graphics
205
  .lineStyle(3, 0xffff00)
206
  .arc(450, 150, 40, 0, Math.PI, true);
207
```
208

209
**Using arcTo for Rounded Corners:**
210

211
```typescript
212
const graphics = new Graphics();
213

214
// Create rounded rectangle using arcTo
215
graphics
216
  .lineStyle(2, 0x00ffff)
217
  .moveTo(100, 50)
218
  .lineTo(180, 50)
219
  .arcTo(200, 50, 200, 70, 20)  // Top-right corner
220
  .lineTo(200, 130)
221
  .arcTo(200, 150, 180, 150, 20)  // Bottom-right corner
222
  .lineTo(120, 150)
223
  .arcTo(100, 150, 100, 130, 20)  // Bottom-left corner
224
  .lineTo(100, 70)
225
  .arcTo(100, 50, 120, 50, 20)  // Top-left corner
226
  .closePath();
227
```
228

229
**Complex Path with Mixed Curves:**
230

231
```typescript
232
const graphics = new Graphics();
233

234
graphics
235
  .lineStyle(2, 0x333333)
236
  .beginFill(0x66ccff, 0.3)
237
  .moveTo(50, 200)
238
  // Quadratic curve up
239
  .quadraticCurveTo(100, 100, 200, 150)
240
  // Straight line
241
  .lineTo(300, 150)
242
  // Bezier curve down
243
  .bezierCurveTo(350, 180, 380, 250, 300, 280)
244
  // Arc back to start
245
  .arc(175, 240, 125, 0, Math.PI, false)
246
  .closePath()
247
  .endFill();
248
```
249

250
**Using Curve Utilities for Custom Calculations:**
251

252
```typescript
253
import { BezierUtils, QuadraticUtils, ArcUtils } from "@pixi/graphics";
254

255
// Calculate curve length before drawing
256
const bezierLength = BezierUtils.curveLength(0, 0, 50, -50, 100, 50, 150, 0);
257
console.log(`Bezier curve length: ${bezierLength}`);
258

259
const quadLength = QuadraticUtils.curveLength(0, 0, 75, -75, 150, 0);
260
console.log(`Quadratic curve length: ${quadLength}`);
261

262
// Manually calculate curve points
263
const points: number[] = [];
264
BezierUtils.curveTo(50, -50, 100, 50, 150, 0, points);
265

266
// Draw using calculated points
267
const graphics = new Graphics();
268
graphics.lineStyle(2, 0xff0000);
269
graphics.moveTo(0, 0);
270
for (let i = 0; i < points.length; i += 2) {
271
  graphics.lineTo(points[i], points[i + 1]);
272
}
273
```
274

275
**Rounded Rectangle with NextRoundedRectBehavior:**
276

277
```typescript
278
import { Graphics } from "@pixi/graphics";
279

280
// Enable new rounded rectangle behavior (circular arcs)
281
Graphics.nextRoundedRectBehavior = true;
282

283
const graphics = new Graphics();
284
graphics
285
  .beginFill(0xffffff)
286
  .lineStyle(2, 0x000000)
287
  .drawRoundedRect(50, 50, 200, 100, 25)
288
  .endFill();
289

290
// Disable for old behavior (quadratic bezier curves)
291
Graphics.nextRoundedRectBehavior = false;
292
```
293

294
**Creating Smooth Animation Paths:**
295

296
```typescript
297
// Create a smooth path for object animation
298
const graphics = new Graphics();
299
const path: [number, number][] = [];
300

301
graphics
302
  .lineStyle(1, 0x666666, 0.5)
303
  .moveTo(100, 300);
304

305
// Create smooth S-curve
306
graphics.bezierCurveTo(200, 100, 400, 500, 500, 300);
307

308
// Extract points for animation (this would require extending the curve utilities)
309
// In practice, you'd sample points along the curve for smooth animation
310
```