G
is the renderer engine of F2, it has following feature:
Layering structure
Supports the creation, modification and destruction of the groups and shapes.
Animation
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
const F2 = require('@antv/f2');const { G } = F2;
Namespaces
<script src="https://unpkg.com/@antv/f2"></script><canvas id="container"></canvas><script>const { Canvas } = F2.G; // require Canvasconst canvas = new Canvas({el: 'canvas',width: 200,height: 100}); // create a canvas instanceconst container = canvas.addGroup({zIndex: 2}); // add a group to canvasconst itemGroup = container.addGroup({zIndex: 1}); // add a group to containeritemGroup.addShape('circle', {attrs: {x: 5,y: 0,r: 5,fill: 'red'}}); // add a circle to groupitemGroup.addShape('text', {attrs: {x: 17,y: 0,textAlign: 'start',textBaseline: 'middle',fontSize: 12,fill: 'red',text: '分类一'}}); // add text to groupconst bbox = itemGroup.getBBox(); // get the bounding box of the group in order to calculate the display position of other graphscontainer.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 rectanglecontainer.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 rectanglecanvas.sort();canvas.draw(); // draw</script>