@antv/g-pattern v2.0.3

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:

Additional configuration for dots, example：

Additional configuration for lines, example：

Additional configuration for squares, example: