🌟 绘制一个星星形状的水波图

avatar
数据可视化 @蚂蚁集团

G2Plot 最初诞生于阿里经济体 BI 产品真实场景的业务诉求,基于 G2 图形语法,一图一做扩展常见的业务图表。

在 G2Plot 2.3.14 版本,水波图提供了 shape 的配置,允许用户自定义水波图形状,并且内置了多种图形形状,如下,

image.pngimage.pngimage.pngimage.png
圆形菱形(钻石)矩形水滴型

虽然内置了若干形状,但使用者的需求是变幻无穷的。因此我们也开放了自定义 shape 的方式:只需要传入一个构建 Path 的回调函数即可,方便开发者可以按照自己的诉求来定制水波图形状,下面是一些自定义形状的水波图。

image.png

本篇文章会先简单介绍下这个自定义 shape 的 API 使用,然后再从较为简单的五角星 ☆ 出发,介绍下如何基于 G2Plot 水波图定制星星水波图。

更多详细内容可以查看 ☞ :1、水波图 图表指引,2、水波图 API 文档

shape API 简单介绍

  • shape 属性接受一个回调函数,返回执行类型的 Path 绘图指令(同 SVG path 相近,详细可以查看 G | Path
  • 回调参数为中心点的 x、y,容器宽度 width 以及容器高度 height。如图 1 所示:

image.png 图 1

下面是文档中的一个示例代码,我们根据注释稍微解释一下:

function shape(x: number, y: number, width: number, height: number) {
  const h = height / 2;
  const w = width / 2;
  return [
    // 移动到画布左上角 (x - w, y - h)
    ['M', x - w, y - h],
    // 连接至画布右上角 (x + w, y - h)
    ['L', x + w, y - h],
    // 连接画布右下角 (x + w, y + h)
    ['L', x + w, y + h],
    // 连接画布左下角 (x - w, y + h)
    ['L', x - w, y + h],
    // 使用“闭合路径命令” Z 进行闭合
    ['Z'],
  ];
}

预览效果如图 2: 图 2

绘制 Star 水波图

默认大家有一定的数学基础

首先,我们需要获取各个顶点的坐标,然后使用 moveTo (M 命令)和 lineTo(L 命令)把五角星的路径计算出来。 image.png 图 3

看图 3 分析可知:O 点对应的是 (x, y) , A 点坐标 (Math.cos(18 * Math.PI / 180) * w + x, -Math.sin(18 * Math.PI / 180) * w + y) ,再以此计算出各个顶点的坐标即可。完整代码如下:

shape: (x, y, width, height) => {
  const path = [];
    const w = Math.min(width, height) / 2;

    for (let i = 0; i < 5; i++) {
      path.push([
        i === 0 ? 'M' : 'L',
        (Math.cos(((18 + i * 72) * Math.PI) / 180) * w)  + x,
        (-Math.sin(((18 + i * 72) * Math.PI) / 180) * w) + y,
      ]);
      path.push([
        'L',
        (Math.cos(((54 + i * 72) * Math.PI) / 180) * w) / 2 + x,
        (-Math.sin(((54 + i * 72) * Math.PI) / 180) * w) / 2 + y,
      ]);
    }
    path.push(['Z']);
    return path;
 }

好了,今天的介绍就到这里了。整体不复杂 (╹▽╹)。 期待大家发挥自己的想象力,制造更多有趣的水波图 ❤ ❤ ❤

更多

文章中的一些链接汇总

  • G2Plot 水波图 图表指引
  • G2Plot 水波图 API 文档
  • Path 绘图指令 ☞ G | Path (G 是 AntV 下一款易用、高效、强大的 2D 可视化渲染引擎)