@antv/g-pattern NPM

g-pattern

Refer to nivo patterns, we provide some built-in patterns, and you can adjust the appearance through more friendly parameters. Currently we support the following three patterns:

dots Pattern with dots.
lines Pattern with lines.
squares Pattern with squares.

The method signatures of these three patterns are as follows, the first parameter is Canvas, and the second parameter is the style configuration of the pattern:

dots(canvas: Canvas, cfg?: DotPatternCfg): HTMLCanvasElement;
lines(canvas: Canvas, cfg?: LinePatternCfg): HTMLCanvasElement;
squares(canvas: Canvas, cfg?: SquarePatternCfg): HTMLCanvasElement;

In the following example, we choose dots and use transform to rotate and scale it:

import { dots } from '@antv/g-pattern';

rect.style.fill = {
    image: dots(canvas, {
        size: 6,
        padding: 2,
        fill: '#ff0000',
        isStagger: true,
    }),
    repetition: 'repeat',
    transform: `rotate(30deg) scale(1.2)`,
};

Common configuration for all types of pattern:

Attribute	Type	Description
backgroundColor	string	Background color of the pattern, default to `'none'`
fill	string	Fill color of the symbol in pattern, `dots` and `squares` default to `'#fff'`，
fillOpacity	number	Transparency of the symbol in pattern, default to `1`
stroke	string	Stroke color of the symbol in pattern, `dots` and `squares` default to `'none'`, `lines` default to `'#fff'`
strokeOpacity	number	Stroke opacity of the symbol in pattern, default to `1`
lineWidth	number	The thickness of the symbol's stroke, `dots` and `squares` default to `0`, `lines` default to `2`
opacity	number	Overall transparency of the pattern, default to `1`

Additional configuration for dots, example：

Attribute	Type	Description
size	number	The size of the dot, default to `6`
padding	number	The distance between dots, default to `2`
isStagger	boolean	Staggered dots. default to `true`

Additional configuration for lines, example：

Attribute	Type	Description
spacing	number	The distance between the two lines, default to `5`

Additional configuration for squares, example:

Attribute	Type	Description
size	number	The size of the square, default to `6`
padding	number	The distance between squares, default to `1`
isStagger	boolean	Staggered squares. default to `true`