样式合并

src/components/QrRendererBase.js

@@ -18,6 +18,9 @@ function listPoint(props) {
     let id = 0;
     console.log(posType)
 
+    const vw = [3, -3];
+    const vh = [3, -3];
+
     if (size <= 0) size = 1.0
 
     for (let x = 0; x < nCount; x++) {
@@ -29,6 +32,8 @@ function listPoint(props) {
                     pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
                 else if (type == 1)
                     pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
             }
             else if (typeTable[x][y] == QRPointType.POS_CENTER) {
                 if (posType == 0) {
@@ -36,6 +41,15 @@ function listPoint(props) {
                 } else if (posType == 1) {
                     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="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                } else if (posType == 2) {
+                    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={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={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
+                    }
                 }
             }
             else if (typeTable[x][y] == QRPointType.POS_OTHER) {
@@ -48,6 +62,8 @@ function listPoint(props) {
                     pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
                 else if (type == 1)
                     pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
             }
         }
     }
@@ -72,7 +88,8 @@ class QrRendererBase extends React.Component {
                     default: 0,
                     choices: [
                         "矩形",
-                        "圆形"
+                        "圆形",
+                        "随机"
                     ]
                 },
                 {
@@ -88,7 +105,8 @@ class QrRendererBase extends React.Component {
                     default: 0,
                     choices: [
                         "矩形",
-                        "圆形"
+                        "圆形",
+                        "行星",
                     ]
                 },
                 ]

src/components/QrRendererRandRound.js

@@ -0,0 +1,127 @@
+import React from "react";
+import './Qrcode.css'
+import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
+import {rand} from "../utils/util";
+
+function listPoint(props) {
+    if (!props.qrcode) return []
+
+    const qrcode = props.qrcode;
+    const nCount = qrcode.getModuleCount();
+    const typeTable = getTypeTable(qrcode);
+    const pointList = new Array(nCount);
+
+    let type = props.params[0];
+    let size = props.params[1] / 100;
+    let opacity = props.params[2] / 100;
+    let posType = props.params[3];
+    let id = 0;
+    console.log(posType)
+
+    const vw = [3, -3];
+    const vh = [3, -3];
+
+    if (size <= 0) size = 1.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) {
+                if (type == 0)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                else if (type == 1)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
+            }
+            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+                if (posType == 0) {
+                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                } else if (posType == 1) {
+                    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="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                } else if (posType == 2) {
+                    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={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={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
+                    }
+                }
+            }
+            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
+                if (posType == 0) {
+                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                }
+            }
+            else {
+                if (type == 0)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                else if (type == 1)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
+            }
+        }
+    }
+
+    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 QrRendererRandRound extends React.Component {
+    constructor(props) {
+        super(props);
+        if (this.props.setParamInfo) {
+            this.props.setParamInfo([
+                    {
+                        key: '信息点样式',
+                        default: 2,
+                        choices: [
+                            "矩形",
+                            "圆形",
+                            "随机"
+                        ]
+                    },
+                    {
+                        key: '信息点缩放',
+                        default: 80
+                    },
+                    {
+                        key: '信息点不透明度',
+                        default: 100,
+                    },
+                    {
+                        key: '定位点样式',
+                        default: 2,
+                        choices: [
+                            "矩形",
+                            "圆形",
+                            "行星",
+                        ]
+                    },
+                ]
+            );
+        }
+    }
+
+    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 QrRendererRandRound

src/components/QrRendererRound.js

@@ -1,7 +1,7 @@
 import React from "react";
-import {srand, rand} from "../utils/util";
 import './Qrcode.css'
 import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
+import {rand} from "../utils/util";
 
 function listPoint(props) {
     if (!props.qrcode) return []
@@ -9,19 +9,39 @@ function listPoint(props) {
     const qrcode = props.qrcode;
     const nCount = qrcode.getModuleCount();
     const typeTable = getTypeTable(qrcode);
-    const pointList = [];
+    const pointList = new Array(nCount);
+
+    let type = props.params[0];
+    let size = props.params[1] / 100;
+    let opacity = props.params[2] / 100;
+    let posType = props.params[3];
+    let id = 0;
+    console.log(posType)
+
     const vw = [3, -3];
     const vh = [3, -3];
 
-    let id = 0;
+    if (size <= 0) size = 1.0
+
     for (let x = 0; x < nCount; x++) {
         for (let y = 0; y < nCount; y++) {
-            if (qrcode.isDark(x, y) == false) continue;
+            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) {
+            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} />)
+                if (type == 0)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                else if (type == 1)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
             }
             else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+                if (posType == 0) {
+                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                } else if (posType == 1) {
+                    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="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                } else if (posType == 2) {
                     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++) {
@@ -31,8 +51,19 @@ function listPoint(props) {
                         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)} />)
+            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
+                if (posType == 0) {
+                    pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                }
+            }
+            else {
+                if (type == 0)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                else if (type == 1)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
+                else if (type == 2)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
             }
         }
     }
@@ -53,21 +84,31 @@ class QrRendererRound extends React.Component {
         if (this.props.setParamInfo) {
             this.props.setParamInfo([
                     {
-                        key: 'Choice 1',
+                        key: '信息点样式',
-                        default: 1
+                        default: 1,
-                    },
-                    {
-                        key: 'Choice 2',
-                        default: 100
-                    },
-                    {
-                        key: 'Select 1',
-                        default: 0,
                         choices: [
-                            "Option 1",
+                            "矩形",
-                            "Option 2"
+                            "圆形",
+                            "随机"
                         ]
-                    }
+                    },
+                    {
+                        key: '信息点缩放',
+                        default: 50
+                    },
+                    {
+                        key: '信息点不透明度',
+                        default: 30,
+                    },
+                    {
+                        key: '定位点样式',
+                        default: 1,
+                        choices: [
+                            "矩形",
+                            "圆形",
+                            "行星",
+                        ]
+                    },
                 ]
             );
         }
@@ -75,7 +116,7 @@ class QrRendererRound extends React.Component {
 
     render() {
         return (
-            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} enableBackground={calViewBox(this.props)} fill="white"
+            <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>

src/components/Qrcode.js

@@ -11,6 +11,7 @@ import logo from '../qrbtf-logo.svg';
 import QrItem from "./QrItem";
 import QrRendererBase from "./QrRendererBase";
 import QrRendererRound from "./QrRendererRound";
+import QrRendererRandRound from "./QrRendererRandRound";
 import QrRendererBlank from "./QrRendererBlank";
 import QrRendererRandRect from "./QrRendererRandRect";
 
@@ -26,8 +27,8 @@ const currentYear = date.getFullYear();
 const styleList = [
     {value: "A1", renderer: QrRendererBase},
     {value: "A2", renderer: QrRendererRound},
+    {value: "A3", renderer: QrRendererRandRound},
     {value: "B1", renderer: QrRendererRandRect},
-    {value: "B2", renderer: QrRendererBlank},
     {value: "C1", renderer: QrRendererBlank},
     {value: "C2", renderer: QrRendererBlank},
     {value: "D1", renderer: QrRendererBlank},