G 是一款易用、高效、强大的 2D 可视化渲染引擎,提供 Canvas、SVG 等多种渲染方式的实现。目前,已有多个顶级的可视化开源项目基于 G 开发,比如图形语法库 G2、图可视化库 G6 等。




✨ 新功能及改进


多平台支持



多种渲染模式支持



新的渲染模式能够极大提升渲染和交互的性能,优化后的效果展示如下(以 100,000 个图元的渲染和拾取为例):


G 3.0

G 4.0

G-3.0.gif

G-4.0.gif

响应缓慢,交互卡顿

响应迅速,交互流畅


事件完善



// 新增一个 name 值为 circle 的圆形
canvas.addShape('circle', {
  name: 'circle',
  attrs: {
    x: 100,
    y: 100,
    r: 50,
    fill: 'red',
  },
});

// 通过事件委托的方式和 name 匹配的方式,直接在 canvas 上就能监听到图形的事件
canvas.on('circle:click', () => {
  // do something
});


动画增强



// G 4.0 写法(推荐)
shape.animate({
  x: 100,
  y: 100,
}, {
  duration: 2000,
  easing: 'easeLinear',
  callback: () => {}
});

// 兼容 G 3.0 写法
shape.animate({
  x: 100,
  y: 100,
}, 2000, 'easeLinear', callback: () => {});



shape.animate(onFrame, {
  duration: 2000,
  easing: 'easeLinear',
  callback: () => {}
});

// 自定义帧函数 onFrame
function onFrame(ratio) {
  // 获取路径上点的坐标
  const point = path.getPoint(ratio);
  return {
    x: point.x,
    y: point.y,
  };
}


路径动画

并行动画

旋转动画

onFrame-along-circle-animation.gif

onFrame-concurrent-animation.gif

onframe-rotate-animation.gif



shape.animate({
  x: 100,
  y: 100,
}, {
  duration: 2000,
  callback: () => {},       // 动画停止时的回调
  pauseCallback: () => {},  // 动画暂停时的回调
  resumeCallback: () => {}, // 动画恢复时的回调
});



⚠️ 不兼容变动



// G 4.0 写法
shape.animate({
  x: 100,
  y: 100,
}, {
  duration: 2000,
  repeat: true,   // 位于第二个参数配置项
});

// G 3.0 写法(已废弃)
shape.animate({
  x: 100,
  y: 100,
  repeat: true,   // 位于第一个参数配置项
}, 2000);



🗑 在 4.0 中废弃的特性


矩阵变换函数



import { transform } from '@antv/matrix-util';

// 3*3 矩阵变换,用于二维渲染
trasform(m, [
  ['t', x, y],    // translate
  ['r', Math.PI], // rotate
  ['s', 2, 2]     // scale
]);



🚶规划




🔗 链接



--------------------------

AntV 品牌日的发布详情


AntV 项目链接

欢迎关注我们的 GitHub 项目,点亮 star 了解我们的实时动态,期待 pr: