const F2 = require('@antv/f2');
const { G } = F2;
<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>
