在 G2 2.0.x 中我们拓展了自定义的 Shape 的机制,赋予那部分有 高订制需求的有图形知识储备 的工程师有直接订制最终图形的能力。这也是G2在向 可编程可视化引擎 迈出的重要一步。

  1. var Shape = G2.Shape;
  2. Shape.registShape(/* geomName */, /* shapeName */, { // 向Shape工厂注册某个geom的一个shape
  3. getShapePoints: function( /* cfg */ ) { // 自定义具体标记点
  4. },
  5. drawShape: function( /* cfg, container*/ ) { // 自定义最终绘制
  6. }
  7. });

上述 7 行的代码片段即使自定义Shape的所有接口。

  • geomName 几何标记名
  • shapeName 注册的具体图形名
  • getShapePoints 自定义标记点
  • drawShape 执行图形计算、调用绘图引擎

上述方法更详细的使用说明详见: Shape API

1分钟上手自定义Shape

柱状图举例,几何标记interval会给出四个标记点,然后将这四个点依次连接,得到每个柱子的形状。红色圆形标记就是几何标记点。默认的柱状图就是通过四个几何标记点,依次相连后得到的。

image

下面的我们使用自定义的shape,把上面的柱状图的柱子变成变成三角形。

image

  1. Shape.registShape('interval', 'triangle', {
  2. getShapePoints: function(cfg){
  3. var x = cfg.x;
  4. var y = cfg.y;
  5. var y0 = cfg.y0;
  6. var width = cfg.size;
  7. return [
  8. {x: x-width/2, y: y0},
  9. {x: x, y: y},
  10. {x: x+width/2, y: y0}
  11. ]
  12. },
  13. drawShape: function(cfg, group) { // 自定义最终绘制
  14. var points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
  15. var polygon = group.addShape('polygon', {
  16. attrs: {
  17. points: [
  18. [points[0].x, points[0].y],
  19. [points[1].x, points[1].y],
  20. [points[2].x, points[2].y]
  21. ],
  22. fill: cfg.color
  23. }
  24. });
  25. return polygon; // 将自定义Shape返回
  26. }
  27. });

上面代码中,我们进行了两步操作:

  • 通过 getShapePoints 方法修改标记点。此时cfg中会传入,x,y,y0,size。其中x,y是柱子最高点的坐标,y0是横坐标轴的y坐标,size是柱子默认宽度。

  • 得到标记点后,我们在 drawShape 方法中拿到cfg.points数据和数据映射后的图形属性数据(比如cfg.color),再通过绘图库提供的多边形(Polgon)图形,将三个点依次头尾相连,生成每个三角形。

注意:points数据和参与points计算的配置项都是0-1空间的数据!