新随机大小样式、定位点接口

src/components/QrRendererBase.js

@@ -21,7 +21,7 @@ function calViewBox(props) {
     if (!props.qrcode) return '0 0 0 0';
 
     const nCount = props.qrcode.getModuleCount();
-    return '0 0 ' + String(nCount) + ' ' + String(nCount);
+    return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
 }
 
 class QrRendererBase extends React.Component {

src/components/QrRendererRound.js

@@ -1,17 +1,88 @@
 import React from "react";
 import './Qrcode.css'
 
+function RandomNum(Min,Max){
+    const Random = Max - Min;
+    const random = Math.random();
+    const num = Min + random * Random;
+    return num;
+}
+
 function listPoint(props) {
     if (!props.qrcode) return []
 
     const qrcode = props.qrcode;
     const nCount = qrcode.getModuleCount();
+    const position = qrcode.getPositionTable();
     const pointList = new Array(nCount);
     let id = 0;
+    var sizeTable = new Array();         //先声明一维
+    for (let i = 0; i < nCount; i++) {          //一维长度为5
+        sizeTable[i] = new Array(i);    //在声明二维
+        for (let j = 0; j < nCount; j++) {      //二维长度为5
+            sizeTable[i][j] = RandomNum(0.33,1);
+        }
+    }
+    var nearPoint = new Array();
+    for (let i = 0; i < nCount; i++) {          //一维长度为5
+        nearPoint[i] = new Array(i);    //在声明二维
+        for (let j = 0; j < nCount; j++) {//二维长度为5
+            nearPoint[i][j] = false;
+        }
+    }
+    var nearBigPoint = new Array();
+    for (let i = 0; i < nCount; i++) {          //一维长度为5
+        nearBigPoint[i] = new Array(i);    //在声明二维
+        for (let j = 0; j < nCount; j++) {//二维长度为5
+            nearBigPoint[i][j] = false;
+        }
+    }
+    for (let i = 0; i < position.length; i++) {
+        for (let r = -2; r <= 2; r++) {
+            for (let c = -2; c <= 2; c++) {
+                if (r == -2 || r == 2 || c == -2 || c == 2
+                    || (r == 0 && c == 0) ) {
+                    nearPoint[position[i][0] + r][position[i][1] + c] = true;
+                    sizeTable[position[i][0] + r][position[i][1] + c] = 0.8;
+                } else {
+                    nearPoint[position[i][0] + r][position[i][1] + c] = true;
+                }
+            }
+        }
+    }
+    for (let i = 8; i < nCount - 7; i++) {
+        sizeTable[i][6] = 0.8;
+        sizeTable[6][i] = 0.8;
+    }
+    const bigPosition = [[3, 3], [3, nCount - 4], [nCount - 4, 3]];
+    for (let i = 0; i < bigPosition.length; i++) {
+        for (let r = -3; r <= 3; r++) {
+            for (let c = -3; c <= 3; c++) {
+                if (r == -3 || r == 3 || c == -3 || c == 3
+                    || (r <= 1 && r >= -1 && c <= 1 && c >= -1) ) {
+                    nearBigPoint[bigPosition[i][0] + r][bigPosition[i][1] + c] = true;
+                } else {
+                    nearBigPoint[bigPosition[i][0] + r][bigPosition[i][1] + c] = true;
+                }
+            }
+        }
+    }
     for (let row = 0; row < nCount; row++) {
         for (let col = 0; col < nCount; col++) {
-            if (qrcode.isDark(row, col))
+            if (qrcode.isDark(row, col) && nearBigPoint[row][col] === false)
-                pointList.push(<use key={id++} fill="black" x={row} y={col} href="#simpleRound"/>)
+                pointList.push(<circle key={id++} fill="black" cx={row + 0.5} cy={col + 0.5} r={0.5 * sizeTable[row][col]} />)
+        }
+        const vw = [3, -3];
+        const vh = [3, -3];
+        for (let i = 0; i < bigPosition.length; i++) {
+            pointList.push(<circle key={id++} fill="black" cx={bigPosition[i][0] + 0.5} cy={bigPosition[i][1] + 0.5} r={1.5} />)
+            pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="currentColor"  cx={bigPosition[i][0] + 0.5} cy={bigPosition[i][1] + 0.5} r={3} />)
+            for (let w = 0; w < vw.length; w++) {
+                pointList.push(<circle key={id++} fill="black" cx={bigPosition[i][0] + vw[w] + 0.5} cy={bigPosition[i][1] + 0.5} r={0.5} />)
+            }
+            for (let h = 0; h < vh.length; h++) {
+                pointList.push(<circle key={id++} fill="black" cx={bigPosition[i][0] + 0.5} cy={bigPosition[i][1] + vh[h] + 0.5} r={0.5} />)
+            }
         }
     }
     return pointList;
@@ -21,15 +92,14 @@ function calViewBox(props) {
     if (!props.qrcode) return '0 0 0 0';
 
     const nCount = props.qrcode.getModuleCount();
-    return '0 0 ' + String(nCount) + ' ' + String(nCount);
+    return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
 }
 
 class QrRendererRound extends React.Component {
     render() {
         return (
-            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} enableBackground={calViewBox(this.props)} fill="white"
                  xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-                <circle fill="black" r={0.6} id="simpleRound"/>
                 {listPoint(this.props)}
             </svg>
         );

src/components/Qrcode.css

@@ -76,7 +76,7 @@
 }
 
 .Qr-item-image {
-    padding: 23px;
+    /*padding: 23px;*/
     background-color: white;
     width: calc((100vw - 56px) / 2);
     height: calc((100vw - 56px) / 2);

src/utils/qrcode.js

@@ -18,8 +18,6 @@
 // QR8bitByte
 //---------------------------------------------------------------------
 
-/*eslint-disable*/
-
 function QR8bitByte(data) {
 	this.mode = QRMode.MODE_8BIT_BYTE;
 	this.data = data;
@@ -48,6 +46,7 @@ function QRCode(typeNumber, errorCorrectLevel) {
 	this.errorCorrectLevel = errorCorrectLevel;
 	this.modules = null;
 	this.moduleCount = 0;
+	this.position = [];
 	this.dataCache = null;
 	this.dataList = [];
 }
@@ -71,6 +70,10 @@ QRCode.prototype = {
 		return this.moduleCount;
 	},
 
+	getPositionTable : function() {
+		return this.position;
+	},
+
 	make : function() {
 		// Calculate automatically typeNumber if provided is < 1
 		if (this.typeNumber < 1 ){
@@ -222,6 +225,8 @@ QRCode.prototype = {
 
 		let pos = QRUtil.getPatternPosition(this.typeNumber);
 
+		this.position = [];
+
 		for (let i = 0; i < pos.length; i++) {
 
 			for (let j = 0; j < pos.length; j++) {
@@ -233,6 +238,8 @@ QRCode.prototype = {
 					continue;
 				}
 
+				this.position.push([row,col]);
+
 				for (let r = -2; r <= 2; r++) {
 
 					for (let c = -2; c <= 2; c++) {