G2Plot-QRCode基于 G2Plot 的強(qiáng)大二維碼渲染庫(kù)

G2Plot-QRCode 是一個(gè)基于 G2Plot 的強(qiáng)大二維碼渲染庫(kù)。LIVE DEMO, CodeSandbox.

安裝

$ npm i --save g2plot-qrcode

使用

渲染

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();

更新

qr.update({
  data: 'hello world!',
})

配置項(xiàng)

export interface QRCodeOptions {
  /** qrcode 的內(nèi)容文本 */
  readonly data: string;
  /** 邊框間距，默認(rèn) 8px */
  readonly padding?: number;
  /** 二維碼大小寬高，默認(rèn)都是 120px */
  readonly width: string;
  readonly height: string;
  /** 二維碼 correctLevel，默認(rèn) H */
  readonly correctLevel?: 'L' | 'M' | 'Q' | 'H';
  /** 二維碼 typeNumber，默認(rèn) 0 */
  readonly typeNumber?: any;
  // readonly effect?: 'fusion' | 'round' | 'rect';
  /** 二維碼前景色，默認(rèn) black */
  readonly foregroundColor?: string;
  /** 二維碼背景色，默認(rèn) white */
  readonly backgroundColor?: string;
  /** 二維碼的 icon 中心圖標(biāo)，默認(rèn)無(wú) */
  readonly icon?: {
    readonly image: string; // 圖片
    readonly width?: number; // 圖片寬高
    readonly height?: number;
  };
  /** 單元格樣式，默認(rèn)無(wú) */
  readonly pixelStyle?: (pixelData: PixelData) => object;
}

功能

1. 常規(guī)二維碼庫(kù)能力都支持，支持寬高 padding 等基礎(chǔ)配置
2. 支持自定義前景背景
3. 支持自定義 detection position 的樣式（顏色、描邊、漸變等）
4. 支持 icon 以及大小
5. 交互事件（二維碼不再是靜態(tài)圖）