Class FillPattern

A class that represents a fill pattern for use in Text and Graphics fills. It allows for textures to be used as patterns, with optional repetition modes.

Patterns default to textureSpace: 'global', meaning tiles repeat continuously across world space and adjacent shapes share the same tiling grid. Pass textureSpace: 'local' to map a single tile to each shape's bounds instead.

Example

const txt = await Assets.load('https://pixijs.com/assets/bg_scene_rotate.jpg');

// global tiling (default) — pattern continues across shapes
const pat = new FillPattern({ texture: txt, repetition: 'repeat' });

// legacy positional form is still supported
const pat2 = new FillPattern(txt, 'repeat');

const textPattern = new Text({
    text: 'PixiJS',
    style: {
        fontSize: 36,
        fill: 0xffffff,
        stroke: { fill: pat, width: 10 },
    },
});

Implements

CanvasPattern

Index

Constructors

constructor

new FillPattern(options: FillPatternOptions): FillPattern
Creates a new fill pattern.
Parameters
- options: FillPatternOptions
  The options for the fill pattern.
Returns FillPattern
new FillPattern(texture: Texture, repetition?: PatternRepetition): FillPattern
Creates a new fill pattern from a texture and optional repetition mode.
Parameters
- texture: Texture
  The texture to tile.
- Optionalrepetition: PatternRepetition
  How the pattern should repeat.
Returns FillPattern

Properties

textureSpace

textureSpace: TextureSpace

Whether pattern coordinates are evaluated in local or global space.

Default

'global'

transform

transform: Matrix = ...

The transform matrix applied to the pattern

Accessors

styleKey

get styleKey(): string
Returns a unique key for this instance. This key is used for caching.

Returns string
Unique key for the instance

texture

get texture(): Texture<TextureSource<any>>
Internal texture used to render the gradient

Returns Texture<TextureSource<any>>
set texture(value: Texture): void
Parameters
- value: Texture
Returns void

Methods

destroy

destroy(): void
Destroys the fill pattern, releasing resources. This will also destroy the internal texture.

Returns void

setTransform

setTransform(transform?: Matrix): void
Sets the transform for the pattern
Parameters
- Optionaltransform: Matrix
  The transform matrix to apply to the pattern. If not provided, the pattern will use the default transform.
Returns void
Implementation of CanvasPattern.setTransform

Class FillPattern

Example

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns FillPattern

Parameters

Returns FillPattern

Properties

textureSpace

Default

transform

Accessors

styleKey

Returns string

texture

Returns Texture<TextureSource<any>>

Parameters

Returns void

Methods

destroy

Returns void

setTransform

Parameters

Returns void

Settings

On This Page