自定义 Shape

通过在 Shape 上注册图形，实现自定义 Shape 的功能。

创建方式

自定义 Shape 的入口如下：

下面主要对其中需要覆写的方法做下详细说明：

getPoints 方法中传入的参数 pointInfo 数据结构如下，所有的数值都是归一化后的结果（即 0 至 1 范围内的数据）：

{
  size: 0.1, // 形状的尺寸，不同的 shape 该含义不同，0 - 1 范围的数据
  x: 0.2, // 该点归一化后的 x 坐标
  y: 0.13, // 该点归一化后的 y 坐标
  y0: 0.1 // 整个数据集 y 轴对应数据的最小值，也是归一化后的数据，注意如果 y 对应的源数据是数组则 y 也将是个数组
}

下表列出了 F2 各个 geom 几何形状的关键点形成机制：

getPoints 用于计算绘制 shape 的关键点，那么方法就是用来定义如何连接这些关键点的。

注意：该方法需要返回最后绘制的 shape。

参数

cfg: Object
该参数包含经过图形映射后的所有数据以及该数据对应的原始数据，结构如下图所示：
原始数据存储于 cfg.origin._origin 中；
通过 getPoints 计算出的图形关键点都储存于 points 中；
cfg 对象中的 color、size、shape 都是通过映射之后的图形属性数据，可以直接使用。
container: F2.G.Group
图形容器，需要将自定义的 shape 加入该容器中才能最终渲染出来。

方法名： shapeObj.parsePoint(point)

说明：将 0 - 1 范围内的点转化为画布上的实际坐标。

参数

point: object
结构如下：

{
  x: 0.3,
}

方法名：shapeObj.parsePoints(points)

说明：将一组 0 - 1 范围内的点转化为画布上的实际坐标。

参数

point: Array
结构如下：

代码示例

const Shape = F2.Shape;
Shape.registerShape('interval', 'triangle', {
  getPoints: function(cfg) {
    const x = cfg.x;
    const y = cfg.y;
    const y0 = cfg.y0;
    const width = cfg.size;
    return [
      { x: x - width / 2, y: y0 },
      { x: x, y: y },
      { x: x + width / 2, y: y0 }
    ]
  },
  draw: function(cfg, group) {
    const points = this.parsePoints(cfg.points); // 将0-1空间的坐标转换为画布坐标
    const polygon = group.addShape('polygon', {
      attrs: {
        points: [
          { x:points[0].x, y:points[0].y },
          { x:points[1].x, y:points[1].y },
          { x:points[2].x, y:points[2].y }
        fill: cfg.color
      }
    });
    return polygon; // 将自定义Shape返回
  }
});
 
const data = [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
];
 
const chart = new F2.Chart({
  id: 'mountNode',
  width: 500,
  height: 320,
  pixelRatio: window.devicePixelRatio
});
 
chart.source(data);
chart.render();