如何使用 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 和使用。