Just like tileable tiles, floors, sometimes we want to fill a shape with the same pattern repeated.

In this example we show the currently supported template padding effects, the sources can include image URLs, HTMLImageElement HTMLCanvasElement HTMLVideoElement Rect etc., and also specify the padding repeat direction.

In style properties that support Pattern (such as fill), an object description can be used, including source, fill mode and transformation:

rect.style.fill = {
    image: 'http://example.png',
    repetition: 'repeat',
    transform: 'rotate(30deg)',
};

The supported parameters are as follows:

interface Pattern {
    image: string | CanvasImageSource | Rect;
    repetition?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
    transform?: string;
}

image

required. The following sources are supported:

• Image URL, eg. 'http://example.png'
• HTMLImageElement
• HTMLCanvasElement
• HTMLVideoElement
• Rect

Image URL

This is a more common usage, using the image URL as the pattern source:

// <img> URL
rect.style.fill = {
    image: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*jgjxQ57sACsAAAAAAAAAAAAAARQnAQ',
    repetition: 'repeat',
};

HTMLImageElement

Instead of using an image URL, you can also pass in an Image object as the source:

// HTMLImageElement(<img>)
const image = new window.Image();
image.onload = () => {
    const rect2 = new Rect({
        style: {
            x: 300,
            y: 50,
            width: 200,
            height: 100,
            fill: {
                image,
                repetition: 'repeat',
            },
        },
    });
};
image.crossOrigin = 'Anonymous';
image.src =
    'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*jgjxQ57sACsAAAAAAAAAAAAAARQnAQ';

HTMLVideoElement

<video> can also be passed in as the source.

// HTMLVideoElement(<video>)
const video = document.createElement('video');
video.src =
    'https://gw.alipayobjects.com/v/rms_6ae20b/afts/video/A*VD0TTbZB9WMAAAAAAAAAAAAAARQnAQ/720P';
video.crossOrigin = 'Anonymous';
video.autoplay = true;
video.controls = false;
video.muted = true;
video.height = 100;
video.width = 200;

video.onloadeddata = function () {
    const rect5 = new Rect({
        style: {
            x: 50,
            y: 350,
            width: 200,
            height: 100,
            fill: {
                image: video,
                repetition: 'no-repeat',
            },
        },
    });
    canvas.appendChild(rect5);
};

HTMLCanvasElement

In addition to using pictures and videos as sources, programmatic generation can also be used. In this case, <canvas> and native [Canvas API](https://developer.mozilla.org/en-US/docs/Web /API/Canvas_API).

In this example, we use HTMLCanvasElement to draw a 20 * 20 template first, and then use it to fill:

// @see https://observablehq.com/@awoodruff/canvas-cartography-nacis-2019
const patternCanvas = document.createElement('canvas');
patternCanvas.width = 20;
patternCanvas.height = 20;
const ctx = patternCanvas.getContext('2d');
ctx.strokeStyle = '#333';
ctx.lineWidth = 1;
ctx.beginPath();
for (let i = 0.5; i < 20; i += 5) {
    ctx.moveTo(0, i);
    ctx.lineTo(20, i);
}
ctx.stroke();

const rect3 = new Rect({
    style: {
        x: 50,
        y: 200,
        width: 200,
        height: 100,
        fill: {
            image: patternCanvas,
            repetition: 'repeat',
        },
    },
});

Rect

The above programmatically generated Pattern using the native Canvas API has the following limitations:

• If you want to use the Pattern generated by the Canvas API in the SVG renderer, you can only export the image by referencing the Canvas, which will lead to the loss of the excellent characteristics of the vector map, such as blurring after zooming in
• High learning cost, especially difficult to define complex patterns

Therefore, we hope to use G's graphics API to define Patterns, consistent with defining scenarios. On the one hand, the unified description ability improves usability, so that users do not need to touch the underlying rendering API; on the other hand, it also allows us to use different Pattern implementations in different renderers, such as using native <pattern> in SVG to improve clarity The following figure shows the comparison between Canvas and SVG after zooming in.

In the example below, we create a 16 * 16 pattern with a red dot on a white background. It can be seen that the usage of the conventional definition scene is no different:

const background = new Rect({
    style: {
        width: 16,
        height: 16,
        fill: 'red',
    },
});
const dot = new Circle({
    style: {
        cx: 8,
        cy: 8,
        r: 6,
        fill: 'white',
    },
});
background.appendChild(dot);

Then apply the Pattern tile to the graphics, and at the same time rotate a certain angle through transform:

const rect = new Rect({
    style: {
        fill: {
            image: background,
            repetition: 'repeat',
            transform: 'rotate(30deg)',
        },
    },
});

The effect is as follows:

Finally, the g-pattern mentioned below is also defined in this way.

repetition

Optional. The following patterns are supported and can be viewed in this example:

• 'repeat' default, tiles horizontally and vertically
• 'repeat-x' tiles horizontally
• 'repeat-y' tiles vertically
• 'no-repeat' do not tile

transform

Optional. Sometimes we want to transform the mode, such as rotating a certain angle, at this time we can use transform attribute, the value is exactly the same as CSS Transform.

In the example below, we want the pattern to rotate:

rect.style.fill = {
    image: canvas,
    repetition: 'repeat',
    transform: `rotate(30deg)`,
};

It should be noted that the value of patternTransform in SVG is slightly different from that of CSS Transform, and there is no value in vector graphics. unit, only supports transform_functions, so for example rotate(20deg) needs to remove the unit and rewrite it asrotate(20), transform(20px, 30px) are the same. But we have unified it internally, so the value of CSS Transform can be fully used.

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(cfg?: DotPatternCfg): HTMLCanvasElement;
lines(cfg?: LinePatternCfg): HTMLCanvasElement;
squares(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:

dots

Additional configuration for dots, example：

Additional configuration for lines, example：

lines

Additional configuration for squares, example:

squares