diff --git a/src/components/QrRendererRandRect.js b/src/components/QrRendererRandRect.js new file mode 100644 index 0000000..4e796cf --- /dev/null +++ b/src/components/QrRendererRandRect.js @@ -0,0 +1,55 @@ +import React from "react"; +import './Qrcode.css' +import {rand, randRGB} from "../utils/util"; + +function listPoint(props) { + if (!props.qrcode) return [] + + const qrcode = props.qrcode; + const nCount = qrcode.getModuleCount(); + const pointList = []; + let id = 0; + + let randArr = []; + for (let row = 0; row < nCount; row++) { + for (let col = 0; col < nCount; col++) { + randArr.push([row,col]); + } + } + randArr.sort(function() { + return (0.5-Math.random()); + }) + + for (let i = 0; i < randArr.length; i++) { + let row = randArr[i][0]; + let col = randArr[i][1]; + if (qrcode.isDark(row, col)) { + let tempRand = rand(0.8, 1.3); + let tempRGB = randRGB(); + let width = 0.15; + pointList.push(); + pointList.push(); + } + } + return pointList; +} + +function calViewBox(props) { + if (!props.qrcode) return '0 0 0 0'; + + const nCount = props.qrcode.getModuleCount(); + return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2); +} + +class QrRendererRandRect extends React.Component { + render() { + return ( + + {listPoint(this.props)} + + ); + } +} + +export default QrRendererRandRect diff --git a/src/components/QrRendererRound.js b/src/components/QrRendererRound.js index 1f5abff..66cb392 100644 --- a/src/components/QrRendererRound.js +++ b/src/components/QrRendererRound.js @@ -1,84 +1,42 @@ import React from "react"; import {srand, rand} from "../utils/util"; import './Qrcode.css' +import {getTypeTable, QRPointType} from "../utils/qrcodeHandler"; function listPoint(props) { if (!props.qrcode) return [] const qrcode = props.qrcode; const nCount = qrcode.getModuleCount(); - const position = qrcode.getPositionTable(); - const pointList = new Array(nCount); + const typeTable = getTypeTable(qrcode); + const pointList = []; + const vw = [3, -3]; + const vh = [3, -3]; + 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] = rand(0.33,0.8); - } - } - 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 x = 0; x < nCount; x++) { + for (let y = 0; y < nCount; y++) { + if (qrcode.isDark(x, y) == false) continue; + + if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) { + pointList.push() + } + else if (typeTable[x][y] == QRPointType.POS_CENTER) { + pointList.push() + pointList.push() + for (let w = 0; w < vw.length; w++) { + pointList.push() + } + for (let h = 0; h < vh.length; h++) { + pointList.push() } } - } - } - 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) && 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() + else if (typeTable[x][y] != QRPointType.POS_OTHER) { + pointList.push() } } } + return pointList; } diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 63357c4..65a0902 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -220,6 +220,34 @@ table { color: rgba(0,0,0,0.6); } +.Qr-select { + line-height: 2em; + box-sizing: border-box; + border-radius: 3em; + outline: none; + text-indent: 1em; + overflow: visible; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + -webkit-transition-duration: 0.2s; /* Safari */ + transition-duration: 0.2s; + -webkit-appearance: none; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + font-family: 'Futura', sans-serif; + color: rgba(0,0,0,0.6); + font-size: 0.9em; + border: rgba(0,0,0,0.12) solid 2px; + width: calc((100vw - 56px) / 2); +} + +@media (min-width: 500px) { + .Qr-select { + border: rgba(0,0,0,0.12) solid 3px; + width: 200px; + } +} + .Qr-input::placeholder { font-family: 'Futura', sans-serif; color: rgba(0,0,0,0.18); diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index eae505d..f38bd91 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -10,6 +10,7 @@ import QrRendererBase from "./QrRendererBase"; import QrRendererRound from "./QrRendererRound"; import QrRendererBlank from "./QrRendererBlank"; import QrItem from "./QrItem"; +import QrRendererRandRect from "./QrRendererRandRect"; const date = new Date(); const currentYear = date.getFullYear(); @@ -36,7 +37,7 @@ function isWeiXin(){ const styleList = [ {value: "A1", renderer: QrRendererBase}, {value: "A2", renderer: QrRendererRound}, - {value: "B1", renderer: QrRendererBlank}, + {value: "B1", renderer: QrRendererRandRect}, {value: "B2", renderer: QrRendererBlank}, {value: "C1", renderer: QrRendererBlank}, {value: "C2", renderer: QrRendererBlank}, diff --git a/src/utils/qrcodeHandler.js b/src/utils/qrcodeHandler.js index 7fb9272..79393c2 100644 --- a/src/utils/qrcodeHandler.js +++ b/src/utils/qrcodeHandler.js @@ -7,6 +7,17 @@ function extend(target, options) { return target } +export var QRPointType = { + DATA: 0, + POS_CENTER: 1, + POS_OTHER: 2, + ALIGN_CENTER: 3, + ALIGN_OTHER: 4, + TIMING: 5, + FORMAT: 6, + VERSION: 7 +} + export function getQrcodeData(options) { if (!options.text || options.text.length <= 0) return null @@ -27,3 +38,54 @@ export function getQrcodeData(options) { return qrcode; } +export function getTypeTable(qrcode) { + const nCount = qrcode.getModuleCount(); + const position = qrcode.getPositionTable(); + const PD = [[3, 3], [3, nCount - 4], [nCount - 4, 3]]; + + let typeTable = new Array(nCount); + for (let i = 0; i < nCount; i++) typeTable[i] = new Array(nCount); + + for (let i = 8; i < nCount - 7; i++) { + typeTable[i][6] = typeTable[6][i] = QRPointType.TIMING; + } + + for (let i = 0; i < position.length; i++) { + typeTable[position[i][0]][position[i][1]] = QRPointType.ALIGN_CENTER; + for (let r = -2; r <= 2; r++) { + for (let c = -2; c <= 2; c++) { + if (!(r == 0 && c == 0)) + typeTable[position[i][0] + r][position[i][1] + c] = QRPointType.ALIGN_OTHER; + } + } + } + + for (let i = 0; i < PD.length; i++) { + typeTable[PD[i][0]][PD[i][1]] = QRPointType.POS_CENTER + for (let r = -3; r <= 3; r++) { + for (let c = -3; c <= 3; c++) { + if (!(r == 0 && c == 0)) + typeTable[PD[i][0] + r][PD[i][1] + c] = QRPointType.POS_OTHER; + } + } + } + + for (let i = 0; i <= 8; i++) { + if (i != 6) typeTable[i][8] = typeTable[8][i] = QRPointType.FORMAT; + if (i < 7) typeTable[nCount - i - 1][8] = QRPointType.FORMAT; + if (i < 8) typeTable[8][nCount - i - 1] = QRPointType.FORMAT; + } + + for (let i = nCount - 11; i <= nCount - 9; i++) { + for (let j = 0; j <= 5; j++) { + typeTable[i][j] = typeTable[j][i] = QRPointType.VERSION; + } + } + + for (let i = 0; i < nCount; i++) { + for (let j = 0; j < nCount; j++) { + if (!typeTable[i][j]) typeTable[i][j] = QRPointType.DATA; + } + } + return typeTable; +} diff --git a/src/utils/util.js b/src/utils/util.js index 78318bf..e46b191 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -6,5 +6,17 @@ export function srand(sd) { export function rand(min, max) { seed = (seed * 9301 + 49297) % 233280; - return min + (seed / 233280.0) * max; + return min + (seed / 233280.0) * (max - min); +} + +export function randRGB() { + let randNum = rand(50,230); + let rgb = []; + rgb.push( + 'rgb(' + String(20 + randNum) + ',' + String(170 - randNum / 2) + ',' + String(60 + randNum * 2) + ')' + ) + rgb.push( + 'rgb(' + String(-20 + randNum) + ',' + String(130 - randNum / 2) + ',' + String(20 + randNum * 2) + ')' + ) + return rgb; }