2.0.35 • Published 6 months ago

@antv/g-pattern v2.0.35

Weekly downloads
-
License
MIT
Repository
github
Last release
6 months ago

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:

AttributeTypeDescription
backgroundColorstringBackground color of the pattern, default to 'none'
fillstringFill color of the symbol in pattern, dots and squares default to '#fff'
fillOpacitynumberTransparency of the symbol in pattern, default to 1
strokestringStroke color of the symbol in pattern, dots and squares default to 'none', lines default to '#fff'
strokeOpacitynumberStroke opacity of the symbol in pattern, default to 1
lineWidthnumberThe thickness of the symbol's stroke, dots and squares default to 0, lines default to 2
opacitynumberOverall transparency of the pattern, default to 1

Additional configuration for dots, example

AttributeTypeDescription
sizenumberThe size of the dot, default to 6
paddingnumberThe distance between dots, default to 2
isStaggerbooleanStaggered dots. default to true

Additional configuration for lines, example

AttributeTypeDescription
spacingnumberThe distance between the two lines, default to 5

Additional configuration for squares, example:

AttributeTypeDescription
sizenumberThe size of the square, default to 6
paddingnumberThe distance between squares, default to 1
isStaggerbooleanStaggered squares. default to true
2.0.28

10 months ago

2.0.29

10 months ago

2.0.35

6 months ago

2.0.33

6 months ago

2.0.34

6 months ago

2.0.31

9 months ago

2.0.32

9 months ago

2.0.30

10 months ago

2.0.16

12 months ago

2.0.19

11 months ago

2.0.17

12 months ago

2.0.18

12 months ago

2.0.26

10 months ago

2.0.27

10 months ago

2.0.24

11 months ago

2.0.25

11 months ago

2.0.22

11 months ago

2.0.23

11 months ago

2.0.20

11 months ago

2.0.21

11 months ago

2.0.15

12 months ago

2.0.14

12 months ago

2.0.13

12 months ago

2.0.12

12 months ago

2.0.11

1 year ago

2.0.11-alpha.0

1 year ago

2.0.10

1 year ago

2.0.9

1 year ago

2.0.5

1 year ago

2.0.7

1 year ago

2.0.6

1 year ago

2.0.8

1 year ago

2.0.4

1 year ago

2.0.3

1 year ago

2.0.2

1 year ago

2.0.1

2 years ago

2.0.0

2 years ago

1.2.24

2 years ago

1.2.23

2 years ago

1.2.22-next.18

2 years ago

1.2.22-next.19

2 years ago

1.2.22-next.20

2 years ago

1.2.22-next.17

2 years ago

1.2.22-next.16

2 years ago

1.2.22-next.15

2 years ago

1.2.22-next.14

2 years ago

1.2.22-next.13

2 years ago

1.2.22

2 years ago

1.2.22-next.11

2 years ago

1.2.22-next.12

2 years ago

1.2.22-next.10

2 years ago

1.2.22-next.9

2 years ago

1.2.22-next.8

2 years ago

1.2.22-next.7

2 years ago

1.2.22-next.4

2 years ago

1.2.22-next.3

2 years ago

1.2.22-next.6

2 years ago

1.2.22-next.2

2 years ago

1.2.22-next.1

2 years ago

1.2.22-next.0

2 years ago

1.2.21

2 years ago

1.2.20

2 years ago

1.2.18

2 years ago

1.2.19

2 years ago

1.2.16

2 years ago

1.2.17

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.2.5

2 years ago

1.2.4

2 years ago

1.2.3

2 years ago

1.2.2

2 years ago

1.2.12

2 years ago

1.2.13

2 years ago

1.2.10

2 years ago

1.2.11

2 years ago

1.2.14

2 years ago

1.2.15

2 years ago

1.2.0

2 years ago

1.1.0

2 years ago

1.2.1

2 years ago

1.1.0-alpha.1

2 years ago

1.1.0-beta.1

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago