[New random react style]

2020-05-04 16:51:12 +08:00 · 2020-05-04 16:51:12 +08:00 · c56e89535c
parent 2c62e8e304
commit c56e89535c
6 changed files with 184 additions and 68 deletions
--- a/src/components/QrRendererRandRect.js
+++ 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(<rect key={id++} opacity="0.9" fill={tempRGB[1]} width={1 * tempRand + width} height={1 * tempRand + width} x={row - (tempRand - 1)/2} y={col - (tempRand - 1)/2}/>);
+                pointList.push(<rect key={id++} fill={tempRGB[0]} width={1 * tempRand} height={1 * tempRand} x={row - (tempRand - 1)/2} y={col - (tempRand - 1)/2}/>);
+            }
+    }
+    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 (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {listPoint(this.props)}
+            </svg>
+        );
+    }
+}
+
+export default QrRendererRandRect
--- 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);
-    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 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(<circle key={id++} fill="black" cx={row + 0.5} cy={col + 0.5} r={0.5 * sizeTable[row][col]} />)
-        }
+    const typeTable = getTypeTable(qrcode);
+    const pointList = [];
    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} />)
+
+    let id = 0;
+    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(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.4} />)
+            }
+            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+                pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black"  cx={x + 0.5} cy={y + 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} />)
+                    pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 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} />)
+                    pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
+                }
+            }
+            else if (typeTable[x][y] != QRPointType.POS_OTHER) {
+                pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
            }
        }
    }
+
    return pointList;
 }

--- 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);
--- 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},
--- 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;
+}
--- 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;
 }