feat(module:qrcode): padding & background color for qrcode (#8001)

xItsSky · web-flow · commit 718ba2943c7c · 2023-07-16T15:35:17.000+08:00
* fix(module:qrcode): padding &amp; background color for qrcode

* fix(module:qrcode): code refactoring

* fix(module:qrcode): code refactoring

* fix(module:qrcode): renaming bg color property name

* fix(module:qrcode): provide tests
diff --git a/components/qr-code/demo/background.md b/components/qr-code/demo/background.md
@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 具有自定义背景颜色
+  en-US: With custom background color
+---
+
+## zh-CN
+
+自定义二维码的背景颜色。
+
+## en-US
+
+Customize the background color of the QR Code.
diff --git a/components/qr-code/demo/background.ts b/components/qr-code/demo/background.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-background',
+  template: `
+    <nz-qrcode nzBgColor="#ff6600" nzValue="https://ng.ant.design/"></nz-qrcode>
+    <nz-qrcode nzBgColor="#1677ff" nzValue="https://ng.ant.design/"></nz-qrcode>
+  `,
+  styles: [
+    `
+      nz-qrcode {
+        margin-right: 12px;
+        background-color: #f6f6f6;
+      }
+    `
+  ]
+})
+export class NzDemoQrCodeBackgroundComponent {}
diff --git a/components/qr-code/demo/color.md b/components/qr-code/demo/color.md
@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 5
 title:
   zh-CN: 自定义颜色
   en-US: Custom Color
diff --git a/components/qr-code/demo/download.md b/components/qr-code/demo/download.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 7
 title:
   zh-CN: 下载二维码
   en-US: Download QRCode
diff --git a/components/qr-code/demo/error-level.md b/components/qr-code/demo/error-level.md
@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 6
 title:
   zh-CN: 容错等级
   en-US: Error Level
diff --git a/components/qr-code/demo/padding.md b/components/qr-code/demo/padding.md
@@ -0,0 +1,14 @@
+---
+order: 3
+title:
+  zh-CN: 带衬垫
+  en-US: With padding
+---
+
+## zh-CN
+
+自定义 QR 码的填充。
+
+## en-US
+
+Customize the padding of the QR Code.
diff --git a/components/qr-code/demo/padding.ts b/components/qr-code/demo/padding.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-qr-code-padding',
+  template: `
+    <nz-qrcode [nzPadding]="50" nzValue="https://ng.ant.design/"></nz-qrcode>
+    <nz-qrcode [nzPadding]="[10, 20]" nzValue="https://ng.ant.design/"></nz-qrcode>
+  `,
+  styles: [
+    `
+      nz-qrcode {
+        margin-right: 12px;
+        background-color: #f6f6f6;
+      }
+    `
+  ]
+})
+export class NzDemoQrCodePaddingComponent {}
diff --git a/components/qr-code/doc/index.en-US.md b/components/qr-code/doc/index.en-US.md
@@ -19,17 +19,19 @@ import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
 
 ### nz-qrcode
 
-| Property       | Description                         | Type                              | Default  |
-| -------------- | ----------------------------------- | --------------------------------- | -------- |
-| `[nzValue]`    | scanned link                        | `string`                          | -        |
-| `[nzColor]`    | QR code Color                       | `string`                          | `#000`   |
-| `[nzSize]`     | QR code Size                        | `number`                          | `160`    |
-| `[nzIcon]`     | Icon address in QR code             | `string`                          | -        |
-| `[nzIconSize]` | The size of the icon in the QR code | `number`                          | `40`     |
-| `[nzBordered]` | Whether has border style            | `boolean`                         | `true`   |
-| `[nzStatus]`   | QR code status                      | `'active'｜'expired' ｜'loading'` | `active` |
-| `[nzLevel]`    | Error Code Level                    | `'L'｜'M'｜'Q'｜'H'`              | `M`      |
-| `(nzRefresh)`  | callback                            | `EventEmitter<string>`            | -        |
+| Property              | Description                         | Type                            | Default  |
+|-----------------------|-------------------------------------|---------------------------------|----------|
+| `[nzValue]`           | scanned link                        | `string`                        | -        |
+| `[nzColor]`           | QR code Color                       | `string`                        | `#000`   |
+| `[nzBgColor]` | QR code background color            | `string`                        | `#fff`   |
+| `[nzSize]`            | QR code Size                        | `number`                        | `160`    |
+| `[nzPadding]`         | QR code Padding                     | `number \| number[]`            | `10`     |
+| `[nzIcon]`            | Icon address in QR code             | `string`                        | -        |
+| `[nzIconSize]`        | The size of the icon in the QR code | `number`                        | `40`     |
+| `[nzBordered]`        | Whether has border style            | `boolean`                       | `true`   |
+| `[nzStatus]`          | QR code status                      | `'active'｜'expired' ｜'loading'` | `active` |
+| `[nzLevel]`           | Error Code Level                    | `'L'｜'M'｜'Q'｜'H'`               | `M`      |
+| `(nzRefresh)`         | callback                            | `EventEmitter<string>`          | -        |
 
 ## Note
 
diff --git a/components/qr-code/doc/index.zh-CN.md b/components/qr-code/doc/index.zh-CN.md
@@ -20,17 +20,19 @@ import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';
 
 ### nz-qrcode
 
-| 参数           | 说明                 | 类型                              | 默认值   |
-| -------------- | -------------------- | --------------------------------- | -------- |
-| `[nzValue]`    | 扫描后的地址         | `string`                          | -        |
-| `[nzColor]`    | 二维码颜色           | `string`                          | `#000`   |
-| `[nzSize]`     | 二维码大小           | `number`                          | `160`    |
-| `[nzIcon]`     | 二维码中 icon 地址   | `string`                          | -        |
-| `[nzIconSize]` | 二维码中 icon 大小   | `number`                          | `40`     |
-| `[nzBordered]` | 是否有边框           | `boolean`                         | `true`   |
-| `[nzStatus]`   | 二维码状态           | `'active'｜'expired' ｜'loading'` | `active` |
-| `[nzLevel]`    | 二维码容错等级       | `'L'｜'M'｜'Q'｜'H'`              | `M`      |
-| `(nzRefresh)`  | 点击"点击刷新"的回调 | `EventEmitter<string>`            | -        |
+| 参数           | 说明           | 类型                                | 默认值   |
+| -------------- |--------------|-----------------------------------| -------- |
+| `[nzValue]`    | 扫描后的地址       | `string`                          | -        |
+| `[nzColor]`    | 二维码颜色        | `string`                          | `#000`   |
+| `[nzBgColor]` | 二维码背景颜色      | `string`                        | `#fff`   |
+| `[nzSize]`     | 二维码大小        | `number`                          | `160`    |
+| `[nzPadding]`  | 二维码填充        | `number \| number[]`              | `10`     |
+| `[nzIcon]`     | 二维码中 icon 地址 | `string`                          | -        |
+| `[nzIconSize]` | 二维码中 icon 大小 | `number`                          | `40`     |
+| `[nzBordered]` | 是否有边框        | `boolean`                         | `true`   |
+| `[nzStatus]`   | 二维码状态        | `'active'｜'expired' ｜'loading'`   | `active` |
+| `[nzLevel]`    | 二维码容错等级      | `'L'｜'M'｜'Q'｜'H'`                 | `M`      |
+| `(nzRefresh)`  | 点击"点击刷新"的回调  | `EventEmitter<string>`            | -        |
 
 ## 注意
 
diff --git a/components/qr-code/qrcode.component.ts b/components/qr-code/qrcode.component.ts
@@ -55,7 +55,9 @@ import { drawCanvas, ERROR_LEVEL_MAP, plotQRCodeData } from './qrcode';
 export class NzQRCodeComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
   @ViewChild('canvas', { static: false }) canvas!: ElementRef<HTMLCanvasElement>;
   @Input() nzValue: string = '';
+  @Input() nzPadding: number | number[] = 10;
   @Input() nzColor: string = '#000000';
+  @Input() nzBgColor: string = '#FFFFFF';
   @Input() nzSize: number = 160;
   @Input() nzIcon: string = '';
   @Input() nzIconSize: number = 40;
@@ -110,7 +112,9 @@ export class NzQRCodeComponent implements OnInit, AfterViewInit, OnChanges, OnDe
         plotQRCodeData(this.nzValue, this.nzLevel),
         this.nzSize,
         10,
+        this.nzPadding,
         this.nzColor,
+        this.nzBgColor,
         this.nzIconSize,
         this.nzIcon
       );
diff --git a/components/qr-code/qrcode.spec.ts b/components/qr-code/qrcode.spec.ts
@@ -0,0 +1,25 @@
+import * as QrCode from './qrcode';
+
+describe('qr-code', () => {
+  describe('format padding', () => {
+    it('as number', () => {
+      const padding = 10;
+      expect(QrCode.formatPadding(padding)).toEqual([10, 10, 10, 10]);
+    });
+
+    it('as array of 1', () => {
+      const padding = [10];
+      expect(QrCode.formatPadding(padding)).toEqual([10, 10, 10, 10]);
+    });
+
+    it('as array of 2', () => {
+      const padding = [10, 5];
+      expect(QrCode.formatPadding(padding)).toEqual([10, 5, 10, 5]);
+    });
+
+    it('as array of 4', () => {
+      const padding = [10, 5, 4, 10];
+      expect(QrCode.formatPadding(padding)).toEqual([10, 5, 4, 10]);
+    });
+  });
+});
diff --git a/components/qr-code/qrcode.ts b/components/qr-code/qrcode.ts
@@ -14,7 +14,9 @@ export const ERROR_LEVEL_MAP: { [index in 'L' | 'M' | 'Q' | 'H']: qrcodegen.QrCo
 
 const DEFAULT_SIZE = 160;
 const DEFAULT_SCALE = 10;
+const DEFAULT_PADDING = 10;
 const DEFAULT_COLOR = '#000000';
+const DEFAULT_BACKGROUND_COLOR = '#FFFFFF';
 const DEFAULT_ICONSIZE = 40;
 const DEFAULT_LEVEL: keyof typeof ERROR_LEVEL_MAP = 'M';
 
@@ -33,30 +35,35 @@ export function drawCanvas(
   value: qrcodegen.QrCode | null,
   size = DEFAULT_SIZE,
   scale = DEFAULT_SCALE,
+  padding: number | number[] = DEFAULT_PADDING,
   color = DEFAULT_COLOR,
+  backgroundColor = DEFAULT_BACKGROUND_COLOR,
   iconSize = DEFAULT_ICONSIZE,
   icon?: string
 ): void {
   const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+  const formattedPadding = formatPadding(padding);
   canvas.style.width = `${size}px`;
   canvas.style.height = `${size}px`;
   if (!value) {
     ctx.fillStyle = 'rgba(0, 0, 0, 0)';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     return;
   }
-  canvas.width = value.size * scale;
-  canvas.height = value.size * scale;
+  canvas.width = value.size * scale + formattedPadding[1] + formattedPadding[3];
+  canvas.height = value.size * scale + formattedPadding[0] + formattedPadding[2];
   if (!icon) {
-    drawCanvasColor(ctx, value, scale, color);
+    drawCanvasBackground(ctx, canvas.width, canvas.height, scale, backgroundColor);
+    drawCanvasColor(ctx, value, scale, formattedPadding, backgroundColor, color);
   } else {
     const iconImg = new Image();
     iconImg.src = icon;
     iconImg.crossOrigin = 'anonymous';
     iconImg.width = iconSize * (canvas.width / size);
     iconImg.height = iconSize * (canvas.width / size);
     iconImg.onload = () => {
-      drawCanvasColor(ctx, value, scale, color);
+      drawCanvasBackground(ctx, canvas.width, canvas.height, scale, backgroundColor);
+      drawCanvasColor(ctx, value, scale, formattedPadding, backgroundColor, color);
       const iconCoordinate = canvas.width / 2 - (iconSize * (canvas.width / size)) / 2;
 
       ctx.fillRect(iconCoordinate, iconCoordinate, iconSize * (canvas.width / size), iconSize * (canvas.width / size));
@@ -68,20 +75,51 @@ export function drawCanvas(
         iconSize * (canvas.width / size)
       );
     };
-    iconImg.onerror = () => drawCanvasColor(ctx, value, scale, color);
+    iconImg.onerror = () => {
+      drawCanvasBackground(ctx, canvas.width, canvas.height, scale, backgroundColor);
+      drawCanvasColor(ctx, value, scale, formattedPadding, backgroundColor, color);
+    };
   }
 }
 
 export function drawCanvasColor(
   ctx: CanvasRenderingContext2D,
   value: qrcodegen.QrCode,
   scale: number,
+  padding: number[],
+  backgroundColor: string,
   color: string
 ): void {
   for (let y = 0; y < value.size; y++) {
     for (let x = 0; x < value.size; x++) {
-      ctx.fillStyle = value.getModule(x, y) ? color : 'rgba(0, 0, 0, 0)';
+      ctx.fillStyle = value.getModule(x, y) ? color : backgroundColor;
+      ctx.fillRect(padding[3] + x * scale, padding[0] + y * scale, scale, scale);
+    }
+  }
+}
+
+export function drawCanvasBackground(
+  ctx: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  scale: number,
+  backgroundColor: string
+): void {
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      ctx.fillStyle = backgroundColor;
       ctx.fillRect(x * scale, y * scale, scale, scale);
     }
   }
 }
+
+export function formatPadding(padding: number | number[]): number[] {
+  if (Array.isArray(padding)) {
+    // Build an array of 4 elements and repeat values from padding as necessary to set the value of the array
+    return Array(4)
+      .fill(0)
+      .map((_, index) => padding[index % padding.length]);
+  } else {
+    return [padding, padding, padding, padding];
+  }
+}
