pixi.js
    Preparing search index...

    Interface ConvertedFillStyleAdvanced

    used internally and is a complete fill style

    interface ConvertedFillStyle {
        alpha: number;
        color: number;
        fill: FillGradient | FillPattern;
        matrix: Matrix;
        texture: Texture<TextureSource<any>>;
        textureSpace: TextureSpace;
    }
    Index

    Properties

    alpha color fill matrix texture textureSpace

    Properties

    alpha: number

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

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

    1
    color: number
    fill: FillGradient | FillPattern

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

    // 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
    };
    matrix: Matrix

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

    // 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)
    };

    null
    texture: Texture<TextureSource<any>>

    The texture to use for the fill.

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

    Texture For more details on textures

    textureSpace: TextureSpace

    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
    // 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'
    };

    'local'

    TextureSpace For more details on texture spaces

    Settings

    Member Visibility

    On This Page

    Properties