关于javascript:如何使用-G2Plot-实现超强二维码能力

TL;DR  G2Plot 是一个基于 G2 图形语法（the Grammar of Graphics）的通用统计图表库。基于 G2 栈，能够实现各种意想不到到的成果和能力。

二维码是什么，草料二维码是什么，我就不细说了，应该进来这篇文章的同学都晓得的。这里我就直入正题，介绍怎么实现超强自定义能力的二维码能力怎么来实现？

先来个最简略的成果预览：

最终产出了一个 G2Plot 的扩大包 G2Plot-QRCode，欢送试用和 star。

原理

G2Plot 是一个可视化通用图表库，所以这里的原理是以一个图表的思路去看二维码是什么？几个点：

1. 二维码实质其实是一个简化的色块图

色块图能够看出数据在 x y 地位上的热力状况。

二维码在色块图的根底上，须要解决：

• x 轴，y 轴全副暗藏
• 色块大小间接填充单元格
• 色块的色彩依据地位 i j 来填充

1. 二维码数据是一个数组，其中蕴含有 i j 索引地位

通过 i j 索引来惟一确定一个单元格，而后单元格具体是什么色彩，须要看二维码的原理构造。

这里咱们须要解决的是三个：

• 前景还是背景，个别状况下前景是彩色、背景是红色。
• 是否是 detection position 元素？
• 是三个 detection position 哪一个？

1. 核心图标对于 G2Plot 来说其实是一个核心的辅助元素（annotation）

这个就更容易了，G2 的 annotation 能够间接绘制一个 image 类型的 annotation。

实现

• 理解一下 G2Plot 扩大包的开发方式
• 生成二维码的 pixel 数据

二维码的协定解析和生成模块十分多，咱们就不反复造轮子了，间接应用社区的货色。

import qrcode from 'qrcode-generator';

const qr = qrcode(typeNumber, correctLevel);
qr.addData(data);
qr.make();

这个就能够获取一个二维数组，数组的每一个元素，只有一个信息，isDark。其实就是标记前景还是背景单元格。

• 二维码的 pixel 数据辨认 detection

基于上述的数据，以及二维码的编码协定，咱们能够去实现别出 detection，以及 detection 的左上、右上、左下方位。

原理是 detection 的大小是固定的 7 * 7 的矩阵，而后地位在左上、右上、左下，联合二维码的 pixel count 即可进行解析，这里不贴源码了，具体能够看这里。

最初产出的数据结构为：

export type PixelData = {
  i: number;
  j: number;
  isBackground: boolean;
  isForeground: boolean;
  detection: 'inner' | 'middle' | 'outer';
  detectionPosition: 'tl' | 'tr' | 'bl';
};

• 基于 G2Plot 扩大机制生成色块图

整顿应用 G2 图形语法绘制图表。

chart
  .polygon()
  .position('i*j')
  .color('isForeground', (v: boolean) => {return v ? foregroundColor : backgroundColor;})
  .style(
    'i*j*isForeground*isBackground*detection*detectionPosition',
    (i, j, isForeground, isBackground, detection, detectionPosition) => {
      return typeof pixelStyle === 'function'
        ? pixelStyle({i, j, isForeground, isBackground, detection, detectionPosition})
      : {};},
);

这里解决了几个事件：

1. 绘制矩形色块图
2. 映射前景背景色彩
3. 实现依据 i j 像素级别的款式设置

• icon 实现

icon 其实就是在图表画布的最两头，绘制一个 image，并且能够指定宽高，image 地址。

chart.annotation().shape({render: (container) => {
    container.addShape('image', {
      attrs: {
        // 核心地位
        x: (width - imageWdith) / 2,
        y: (height - imageHeight) / 2,
        // 宽高
        width: imageWdith,
        height: imageHeight,
        // 图片地址
        img: image,
      },
    });
  },
});

应用

如何应用放到最初。因为 G2Plot-QRCode 是 G2Plot 的一个扩大包，所以应用形式上和 G2Plot 内置图表的应用完全一致。

import {G2Plot} from '@antv/g2plot';
import {adaptor, defaultOptions} from 'g2plot-qrcode';

const qr = new G2Plot('container', {
  // 二维码文本
  data: 'Hello, g2plot qrcode!',
  // 间距
  padding: 8,
  // 宽高
  width: 120,
  height: 120,
  // 背景前景色彩
  backgroundColor: 'white',
  foregroundColor: 'black',
  typeNumber: 0,
  correctLevel: 'H', // L M H Q
  // 款式自定义
  pixelStyle: (pixelData) => ({}),
}, adaptor, defaultOptions);

qr.render();

后续布局

二维码库那么多，基于 G2Plot 做二维码带来的益处在于：

1. 每个单元格的 色块款式，能够多种多样，随便自定义
2. 二维码的出场、更新 动画 能够十分炫酷
3. 二维码不再是动态的图片，而是能够进行 动静交互 的

以上也是后续的布局内容，欢送有趣味的同学来搞。全副代码在这里，它依赖的 G2Plot 也欢送 star 和应用。