0
# Styling and Fill System
1

2
Comprehensive styling system for controlling appearance of drawn graphics including solid fills, texture fills, gradients, and line styling with caps, joins, and alignment options.
3

4
## Capabilities
5

6
### Line Style Configuration
7

8
Methods for configuring line appearance including width, color, texture, and geometric properties.
9

10
```typescript { .api }
11
/**
12
 * Sets line style with basic parameters
13
 * @param width - Line thickness in pixels
14
 * @param color - Hex color value for the line
15
 * @param alpha - Alpha transparency (0-1)
16
 * @param alignment - Line alignment: 0=inner, 0.5=middle, 1=outer (WebGL only)
17
 * @param native - Use native LINES instead of TRIANGLE_STRIP
18
 */
19
lineStyle(width?: number, color?: number, alpha?: number, alignment?: number, native?: boolean): this;
20

21
/**
22
 * Sets line style with options object
23
 * @param options - Line style configuration options
24
 */
25
lineStyle(options?: ILineStyleOptions): this;
26

27
/**
28
 * Sets line style with texture support
29
 * @param options - Line style options including texture configuration
30
 */
31
lineTextureStyle(options?: ILineStyleOptions): this;
32
```
33

34
### Fill Style Options Interface
35

36
Configuration interface for fill appearance including color, transparency, texture, and transformation.
37

38
```typescript { .api }
39
interface IFillStyleOptions {
40
  /** Hex color value for filling (default: 0xFFFFFF) */
41
  color?: number;
42
  /** Alpha transparency value 0-1 (default: 1) */
43
  alpha?: number;
44
  /** Texture to use for filling (default: Texture.WHITE) */
45
  texture?: Texture;
46
  /** Transformation matrix applied to texture (default: null) */
47
  matrix?: Matrix;
48
}
49
```
50

51
### Line Style Options Interface
52

53
Extended configuration interface for line appearance including geometric properties and rendering options.
54

55
```typescript { .api }
56
interface ILineStyleOptions extends IFillStyleOptions {
57
  /** Line thickness in pixels (default: 0) */
58
  width?: number;
59
  /** Line alignment: 0=inner, 0.5=middle, 1=outer, WebGL only (default: 0.5) */
60
  alignment?: number;
61
  /** Use native LINES instead of TRIANGLE_STRIP (default: false) */
62
  native?: boolean;
63
  /** Line cap style at endpoints (default: LINE_CAP.BUTT) */
64
  cap?: LINE_CAP;
65
  /** Line join style at vertices (default: LINE_JOIN.MITER) */
66
  join?: LINE_JOIN;
67
  /** Miter limit ratio for LINE_JOIN.MITER (default: 10) */
68
  miterLimit?: number;
69
}
70
```
71

72
### FillStyle Class
73

74
Class for managing fill appearance properties including color, texture, and transformation.
75

76
```typescript { .api }
77
class FillStyle {
78
  /** Hex color value for filling (default: 0xFFFFFF) */
79
  color: number;
80
  /** Alpha transparency value 0-1 (default: 1.0) */
81
  alpha: number;
82
  /** Texture for fill (default: Texture.WHITE) */
83
  texture: Texture;
84
  /** Transform matrix applied to texture (default: null) */
85
  matrix: Matrix;
86
  /** Whether fill is visible (default: false) */
87
  visible: boolean;
88

89
  /** Creates new FillStyle with default values */
90
  constructor();
91
  
92
  /** Creates a copy of the fill style */
93
  clone(): FillStyle;
94
  
95
  /** Resets all properties to default values */
96
  reset(): void;
97
  
98
  /** Destroys the fill style and performs cleanup */
99
  destroy(): void;
100
}
101
```
102

103
### LineStyle Class
104

105
Class for managing line appearance properties extending FillStyle with geometric line properties.
106

107
```typescript { .api }
108
class LineStyle extends FillStyle {
109
  /** Line thickness in pixels (default: 0) */
110
  width: number;
111
  /** Line alignment: 0=inner, 0.5=middle, 1=outer, WebGL only (default: 0.5) */
112
  alignment: number;
113
  /** Use native LINES instead of TRIANGLE_STRIP (default: false) */
114
  native: boolean;
115
  /** Line cap style at endpoints (default: LINE_CAP.BUTT) */
116
  cap: LINE_CAP;
117
  /** Line join style at vertices (default: LINE_JOIN.MITER) */
118
  join: LINE_JOIN;
119
  /** Miter limit ratio for LINE_JOIN.MITER (default: 10) */
120
  miterLimit: number;
121

122
  /** Creates new LineStyle with default values */
123
  constructor();
124
  
125
  /** Creates a copy of the line style */
126
  clone(): LineStyle;
127
  
128
  /** Resets all properties to default values (overrides parent color to 0x0 instead of 0xFFFFFF) */
129
  reset(): void;
130
}
131
```
132

133
### Line Cap Styles
134

135
Enumeration defining line cap styles applied at the endpoints of lines.
136

137
```typescript { .api }
138
enum LINE_CAP {
139
  /** No cap at line ends - line ends exactly at endpoint */
140
  BUTT = 'butt',
141
  /** Semicircular cap extending past endpoint by half line width */
142
  ROUND = 'round', 
143
  /** Square cap extending past endpoint by half line width */
144
  SQUARE = 'square'
145
}
146
```
147

148
### Line Join Styles
149

150
Enumeration defining line join styles applied at vertices where line segments meet.
151

152
```typescript { .api }
153
enum LINE_JOIN {
154
  /** Sharp corner where outer edges of lines meet at a point */
155
  MITER = 'miter',
156
  /** Square butt cap with triangular fill at the turn */
157
  BEVEL = 'bevel',
158
  /** Circular arc connecting the outer edges at the joint */
159
  ROUND = 'round'
160
}
161
```
162

163
### Graphics Curve Settings
164

165
Configuration interface for curve resolution and quality settings affecting bezier curves, arcs, and other curved shapes.
166

167
```typescript { .api }
168
interface IGraphicsCurvesSettings {
169
  /** Enable adaptive curve resolution based on curve length */
170
  adaptive: boolean;
171
  /** Maximum length of individual curve segments */
172
  maxLength: number;
173
  /** Minimum number of segments per curve */
174
  minSegments: number;
175
  /** Maximum number of segments per curve */
176
  maxSegments: number;
177
  /** Curve approximation epsilon for precision */
178
  epsilon: number;
179
  /** Calculate optimal segment count for a given curve length */
180
  _segmentsCount(length: number, defaultSegments?: number): number;
181
}
182
```
183

184
### Global Curve Settings
185

186
Global constant defining default curve resolution settings for all graphics operations.
187

188
```typescript { .api }
189
/**
190
 * Global graphics curve resolution settings with adaptive configuration
191
 */
192
declare const GRAPHICS_CURVES: IGraphicsCurvesSettings;
193
```
194

195
## Usage Examples
196

197
**Basic Line and Fill Styling:**
198

199
```typescript
200
import { Graphics, LINE_CAP, LINE_JOIN } from "@pixi/graphics";
201

202
const graphics = new Graphics();
203

204
// Simple line styling
205
graphics
206
  .lineStyle(4, 0xff0000, 1)
207
  .moveTo(50, 50)
208
  .lineTo(150, 100);
209

210
// Advanced line styling with options
211
graphics
212
  .lineStyle({
213
    width: 6,
214
    color: 0x00ff00,
215
    alpha: 0.8,
216
    cap: LINE_CAP.ROUND,
217
    join: LINE_JOIN.ROUND,
218
    miterLimit: 15
219
  })
220
  .drawRect(200, 50, 100, 80);
221
```
222

223
**Texture Fill with Transformation:**
224

225
```typescript
226
import { Graphics, Texture, Matrix } from "@pixi/graphics";
227

228
const graphics = new Graphics();
229
const texture = Texture.from('pattern.png');
230
const matrix = new Matrix().scale(0.5, 0.5).rotate(Math.PI / 4);
231

232
// Texture fill with transformation
233
graphics
234
  .beginTextureFill({
235
    texture: texture,
236
    color: 0xffffff,
237
    alpha: 0.7,
238
    matrix: matrix
239
  })
240
  .drawRect(0, 0, 200, 150)
241
  .endFill();
242
```
243

244
**Line Alignment Comparison:**
245

246
```typescript
247
const graphics = new Graphics();
248

249
// Inner alignment (0) - line grows inward
250
graphics
251
  .lineStyle({ width: 10, color: 0xff0000, alignment: 0 })
252
  .drawRect(50, 50, 100, 100);
253

254
// Middle alignment (0.5) - line grows equally inward and outward  
255
graphics
256
  .lineStyle({ width: 10, color: 0x00ff00, alignment: 0.5 })
257
  .drawRect(200, 50, 100, 100);
258

259
// Outer alignment (1) - line grows outward
260
graphics
261
  .lineStyle({ width: 10, color: 0x0000ff, alignment: 1 })
262
  .drawRect(350, 50, 100, 100);
263
```
264

265
**Creating and Reusing Style Objects:**
266

267
```typescript
268
import { FillStyle, LineStyle, Texture } from "@pixi/graphics";
269

270
// Create reusable style objects
271
const redFill = new FillStyle();
272
redFill.color = 0xff0000;
273
redFill.alpha = 0.7;
274
redFill.visible = true;
275

276
const thickBlueLine = new LineStyle();
277
thickBlueLine.width = 8;
278
thickBlueLine.color = 0x0000ff;
279
thickBlueLine.cap = LINE_CAP.ROUND;
280
thickBlueLine.join = LINE_JOIN.ROUND;
281

282
// Apply styles to graphics (note: styles are applied via Graphics methods)
283
const graphics = new Graphics();
284
graphics
285
  .lineStyle({
286
    width: thickBlueLine.width,
287
    color: thickBlueLine.color,
288
    cap: thickBlueLine.cap,
289
    join: thickBlueLine.join
290
  })
291
  .beginFill(redFill.color, redFill.alpha)
292
  .drawRect(100, 100, 150, 100)
293
  .endFill();
294
```
295

296
**Native Lines vs Triangle Strip:**
297

298
```typescript
299
const graphics = new Graphics();
300

301
// Default triangle strip rendering (better for thick lines)
302
graphics
303
  .lineStyle({ width: 20, color: 0xff0000, native: false })
304
  .moveTo(50, 50)
305
  .lineTo(250, 100);
306

307
// Native line rendering (hardware accelerated, limited styling)
308
graphics
309
  .lineStyle({ width: 2, color: 0x00ff00, native: true })
310
  .moveTo(50, 150)
311
  .lineTo(250, 200);
312
```