diff --git a/src/components/QrRendererBase.js b/src/components/QrRendererBase.js index 9ca68a6..e50c152 100644 --- a/src/components/QrRendererBase.js +++ b/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 { diff --git a/src/components/QrRendererRound.js b/src/components/QrRendererRound.js index 1709e10..872cf66 100644 --- a/src/components/QrRendererRound.js +++ b/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)) - pointList.push() + if (qrcode.isDark(row, col) && nearBigPoint[row][col] === false) + pointList.push() + } + const vw = [3, -3]; + const vh = [3, -3]; + for (let i = 0; i < bigPosition.length; i++) { + pointList.push() + pointList.push() + for (let w = 0; w < vw.length; w++) { + pointList.push() + } + for (let h = 0; h < vh.length; h++) { + pointList.push() + } } } 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 ( - - {listPoint(this.props)} ); diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 5d5c52e..63357c4 100644 --- a/src/components/Qrcode.css +++ b/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); diff --git a/src/utils/qrcode.js b/src/utils/qrcode.js index ae43719..0ec42e9 100644 --- a/src/utils/qrcode.js +++ b/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++) {