自定义 shape

1分钟上手自定义Shape在 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空间的数据！

  1.                     当前内容版权归 蚂蚁金服 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 蚂蚁金服 .
  4.                         上一篇:
  7.                         下一篇:
  10.             <div class="