G

Last updated 2 months ago

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

const F2 = require('@antv/f2');
const { G } = F2;

Namespace: G

Classes

Namespaces

Quick Look

<script src="https://unpkg.com/@antv/f2"></script>
<canvas id="container"></canvas>
<script>
const { Canvas } = F2.G; // require Canvas
const canvas = new Canvas({
el: 'canvas',
width: 200,
height: 100
}); // create a canvas instance
const container = canvas.addGroup({
zIndex: 2
}); // add a group to canvas
const itemGroup = container.addGroup({
zIndex: 1
}); // add a group to container
itemGroup.addShape('circle', {
attrs: {
x: 5,
y: 0,
r: 5,
fill: 'red'
}
}); // add a circle to group
itemGroup.addShape('text', {
attrs: {
x: 17,
y: 0,
textAlign: 'start',
textBaseline: 'middle',
fontSize: 12,
fill: 'red',
text: '分类一'
}
}); // add text to group
const bbox = itemGroup.getBBox(); // get the bounding box of the group in order to calculate the display position of other graphs
container.addShape('rect', {
zIndex: 0,
attrs: {
x: bbox.minX - 5,
y: bbox.minY - 5,
width: bbox.width + 10,
height: bbox.height + 10,
fill: 'rgba(0, 0, 0, 0.09)',
radius: 4
}
}); // add a rectangle
container.sort(); // sort by zIndex.
container.moveTo(30, 50); // move the container to (30, 50)
canvas.addShape('rect', {
zIndex: 0,
attrs: {
x: 0,
y: 0,
width: 200,
height: 100,
fill: 'rgba(0, 0, 0, 0.09)',
radius: 4
}
}); // add a rectangle
canvas.sort();
canvas.draw(); // draw
</script>