logoCreated with Sketch.

F2

G

2 min read

G 作为 F2 图表的渲染引擎，具备以下特点：

  • 层次化结构
  • 支持容器、各种图形的创建、修改和销毁
  • 动画
  • 矩阵变换

G 采用层次化结构设计，结构如下：

其中：

  • Canvas 画布的入口，包含所有 Group、Shape 对象
  • Group 容器，可包含 Group 和 Shape 对象
  • Shape 为 G 提供的具体的图形

如何引入 G

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

类

命名空间

示例：

const { Canvas } = F2.G; // 引入 Canvas
const canvas = new Canvas({
  el: 'canvas',
  width: 200,
  height: 100
}); // 创建 canvas 实例
const container = canvas.addGroup({
  zIndex: 2
}); // canvas 添加一个 group
const itemGroup = container.addGroup({
  zIndex: 1
}); // container 添加一个 group
itemGroup.addShape('circle', {
  attrs: {
    x: 5,
    y: 0,
    r: 5,
    fill: 'red'
  }
}); // itemGroup 中添加一个圆
itemGroup.addShape('text', {
  attrs: {
    x: 17,
    y: 0,
    textAlign: 'start',
    textBaseline: 'middle',
    fontSize: 12,
    fill: 'red',
    text: '分类一'
  }
}); // itemGroup 中添加一个文本
const bbox = itemGroup.getBBox(); // 获取 itemGroup 的包围盒
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
  }
}); // container 中添加一个矩形
container.sort(); // container 容器内元素排序
container.moveTo(30, 50); // 将 container 移至 (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
  }
}); // canvas 中添加一个矩形

canvas.sort(); // canvas 容器内的元素排序
canvas.draw(); // 绘制