TL; DR G2Plot is a library of general statistical charts based on the G2 Grammar of Graphics. Based on the G2 stack, you can achieve all kinds of unexpected effects and capabilities.

What is the TWO-DIMENSIONAL code, what is the two-dimensional code of forage, I will not say in detail, should come in this article students know. Here I will get straight to the point, how to achieve super custom two-dimensional code ability how to achieve?

Here’s the simplest effect preview:The result is an extension package for G2PlotG2Plot-QRCode, welcome to trial and star.

The principle of

G2Plot is a visual universal chart library, so the idea here is to see what a QR code is like in a chart. A few points:

  1. Two-dimensional code is essentially a simplified color block map

The color block diagram shows the thermal behavior of the data at x and y positions.

Two-dimensional code on the basis of the color block map, need to deal with:

  • The X-axis and Y-axis are all hidden
  • The color block size fills cells directly
  • The color block is filled by position I and j
  1. Qr code data is an array containing I and J index positions

Through the I J index to uniquely determine a cell, and then the specific color of the cell, need to see the structure of the two-dimensional code.Here we need to deal with three:

  • Foreground or background, usually black foreground and white background.
  • Is this detection position element?
  • Which is the three detection position?
  1. The center icon for G2Plot is actually an annotation of the center.

This is easier, the ANNOTATION of G2 can draw an annotation of type image directly.

implementation

  • ** Learn how the G2Plot ** extension pack was developed

  • Generate pixel data of qr code

The protocol analysis and generation module of two-dimensional code is very much, we will not repeat the wheel, directly use the community.

import qrcode from 'qrcode-generator';

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

So this is going to get a two-dimensional array, each element of the array, just one piece of information, isDark. It’s just marking foreground or background cells.

  • Two-dimensional code pixel data recognition Detection

Based on the above data and the coding protocol of the TWO-DIMENSIONAL code, we can realize detection and the upper left, upper right and lower left bits of Detection.

The principle is that the size of Detection is a fixed 7 * 7 matrix, and the positions are in the upper left, upper right and lower left. It can be analyzed by combining the Pixel count of the TWO-DIMENSIONAL code. The source code is not attached here, you can see the details here.

The data structure of the final output is:

export type PixelData = {
  i: number;
  j: number;
  isBackground: boolean;
  isForeground: boolean;
  detection: 'inner' | 'middle' | 'outer';
  detectionPosition: 'tl' | 'tr' | 'bl';
};
Copy the code
  • Generate color block graph based on G2Plot extension mechanism

Organize using G2 graph syntax to draw diagrams.

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 }) : {}; });Copy the code

Several things are handled here:

  1. Draw the rectangle color block diagram
  2. Map foreground background color
  3. Implement style Settings according to the I j pixel level
  • Icon realize

An icon is a graph that draws an image in the middle of the canvas and can specify the width, height and image address.

chart.annotation().shape({
  render: (container) = > {
    container.addShape('image', {
      attrs: {
        // Central location
        x: (width - imageWdith) / 2.y: (height - imageHeight) / 2./ wide/high
        width: imageWdith,
        height: imageHeight,
        // Image address
        img: image, }, }); }});Copy the code

use

How to use it comes last. Since g2plot-qrcode is an extension of G2Plot, it is used in exactly the same way as G2Plot’s built-in charts.

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

const qr = new G2Plot('container', {
  // Code text
  data: 'Hello, g2plot qrcode! './ / spacing
  padding: 8./ wide/high
  width: 120.height: 120.// Background foreground color
  backgroundColor: 'white'.foregroundColor: 'black'.typeNumber: 0.correctLevel: 'H'.// L M H Q
  // Style customization
  pixelStyle: (pixelData) = > ({}),
}, adaptor, defaultOptions);

qr.render();
Copy the code

Subsequent planning

The benefits of qr code based on G2Plot are as follows:

  1. The color block style of each cell can be varied and customized at will
  2. Two-dimensional code appearance, update animation can be very cool
  3. Qr codes are no longer static images, but can be dynamically interactive

The above is also the follow-up planning content, welcome interested students to do. The full code is here and it relies on G2Plot to also welcome star and use it.