Interface: ConvertedFillStyle

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:447

used internally and is a complete fill style

Advanced

Properties

alpha

> alpha: number

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:100

The alpha value to use for the fill. This value should be between 0 (fully transparent) and 1 (fully opaque).

Example

const fillStyle = { alpha: 0.5 }; // 50% opacity

Default

1

See

• ColorSource For more details on color sources
• FillStyle#color For color usage

color

> color: number

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:448

fill

> fill: FillGradient | FillPattern | null

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:158

The fill pattern or gradient to use. This can be either a FillPattern for repeating textures or a FillGradient for color transitions.

Example

// Using a gradient
const gradient = new FillGradient({
   end: { x: 1, y: 0 },
   stops: [
       { color: 0xff0000, offset: 0 }, // Red at start
       { color: 0x0000ff, offset: 1 }, // Blue at end
   ]
});

const fillStyle = {
    fill: gradient,
    alpha: 0.8
};

// Using a pattern
const pattern = new FillPattern(
    Texture.from('pattern.png'),
    'repeat' // or 'no-repeat', 'repeat-x', 'repeat-y'
);

const fillStyle = {
    fill: pattern
};

See

• FillPattern For creating pattern fills
• FillGradient For creating gradient fills

matrix

> matrix: Matrix | null

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:125

The transformation matrix to apply to the fill pattern or texture. Used to scale, rotate, translate, or skew the fill.

Example

// Scale and rotate a texture fill
const fillStyle = {
    texture: Texture.from('myImage.png'),
    matrix: new Matrix()
        .scale(0.5, 0.5)
        .rotate(Math.PI / 4)
};

Default

null

texture

> texture: Texture<TextureSource<any>> | null

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:109

The texture to use for the fill.

Example

const fillStyle = { texture: Texture.from('myImage.png') };

See

Texture For more details on textures

textureSpace

> textureSpace: TextureSpace

Defined in: node_modules/pixi.js/lib/scene/graphics/shared/FillTypes.d.ts:180

Determines how texture coordinates are calculated across shapes.

• 'local': Texture coordinates are relative to each shape's bounds
• 'global': Texture coordinates are in world space

Example

// Local space - texture fits each shape independently
const fillStyle = {
    texture: Texture.from('myImage.png'),
    textureSpace: 'local'
};

// Global space - texture continues across shapes
const fillStyle = {
    texture: Texture.from('myImage.png'),
    textureSpace: 'global'
};

Default

'local'

See

TextureSpace For more details on texture spaces