AntV
Search…
G
G is the renderer engine of F2, it has following feature:
    1.
    Layering structure
    2.
    Supports the creation, modification and destruction of the groups and shapes.
    3.
    Animation
    4.
    Matrix transformation.
    Canvas is the entrance, it includes all the Group and Shape objects.
    Group can contains Group and Shape instances.
    G offers a variety of Shape types

How to Get G

1
const F2 = require('@antv/f2');
2
const { G } = F2;
Copied!

Namespace: G

Classes

Namespaces

Quick Look

1
<script src="https://unpkg.com/@antv/f2"></script>
2
<canvas id="container"></canvas>
3
<script>
4
const { Canvas } = F2.G; // require Canvas
5
const canvas = new Canvas({
6
el: 'canvas',
7
width: 200,
8
height: 100
9
}); // create a canvas instance
10
const container = canvas.addGroup({
11
zIndex: 2
12
}); // add a group to canvas
13
const itemGroup = container.addGroup({
14
zIndex: 1
15
}); // add a group to container
16
itemGroup.addShape('circle', {
17
attrs: {
18
x: 5,
19
y: 0,
20
r: 5,
21
fill: 'red'
22
}
23
}); // add a circle to group
24
itemGroup.addShape('text', {
25
attrs: {
26
x: 17,
27
y: 0,
28
textAlign: 'start',
29
textBaseline: 'middle',
30
fontSize: 12,
31
fill: 'red',
32
text: '分类一'
33
}
34
}); // add text to group
35
const bbox = itemGroup.getBBox(); // get the bounding box of the group in order to calculate the display position of other graphs
36
container.addShape('rect', {
37
zIndex: 0,
38
attrs: {
39
x: bbox.minX - 5,
40
y: bbox.minY - 5,
41
width: bbox.width + 10,
42
height: bbox.height + 10,
43
fill: 'rgba(0, 0, 0, 0.09)',
44
radius: 4
45
}
46
}); // add a rectangle
47
container.sort(); // sort by zIndex.
48
container.moveTo(30, 50); // move the container to (30, 50)
49
50
canvas.addShape('rect', {
51
zIndex: 0,
52
attrs: {
53
x: 0,
54
y: 0,
55
width: 200,
56
height: 100,
57
fill: 'rgba(0, 0, 0, 0.09)',
58
radius: 4
59
}
60
}); // add a rectangle
61
62
canvas.sort();
63
canvas.draw(); // draw
64
</script>
Copied!
Last modified 3yr ago