From 3551e2c462984fa20120e47e5bb4fa6f395758f9 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Fri, 15 May 2020 18:10:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=8F=82=E6=95=B0=E5=85=A8?=
 =?UTF-8?q?=E8=8C=83=E5=9B=B4=E6=B7=BB=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/renderer/Renderer25D.js       | 30 ++++++++---
 src/components/renderer/RendererBase.js      |  4 +-
 src/components/renderer/RendererDSJ.js       | 18 ++++---
 src/components/renderer/RendererImage.js     | 52 +++++++++++++-------
 src/components/renderer/RendererRandRound.js | 44 +++++++++++------
 src/components/renderer/RendererRound.js     | 50 ++++++++++++-------
 6 files changed, 132 insertions(+), 66 deletions(-)

diff --git a/src/components/renderer/Renderer25D.js b/src/components/renderer/Renderer25D.js
index 0de8dc2..86ad10b 100644
--- a/src/components/renderer/Renderer25D.js
+++ b/src/components/renderer/Renderer25D.js
@@ -14,6 +14,9 @@ function listPoints(qrcode, params) {
     let size2 = 1.001;
     let height = params[0];
     let height2 = params[1];
+    let upColor = params[2];
+    let leftColor = params[3];
+    let rightColor = params[4];
     let id = 0;
 
     const X = [-Math.sqrt(3)/2, 1/2];
@@ -29,14 +32,14 @@ function listPoints(qrcode, params) {
         for (let y = 0; y < nCount; y++) {
             if (qrcode.isDark(x, y) == false) continue;
             else if (typeTable[x][y] == QRPointType.POS_OTHER || typeTable[x][y] == QRPointType.POS_CENTER) {
-                pointList.push(<rect width={size2} height={size2} key={id++} fill="#FF7F89" x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>);
-                pointList.push(<rect width={height2} height={size2} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>);
-                pointList.push(<rect width={size2} height={height2} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>);
+                pointList.push(<rect width={size2} height={size2} key={id++} fill={upColor} x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>);
+                pointList.push(<rect width={height2} height={size2} key={id++} fill={leftColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>);
+                pointList.push(<rect width={size2} height={height2} key={id++} fill={rightColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>);
             }
             else {
-                pointList.push(<rect width={size} height={size} key={id++} fill="#FF7F89" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
-                pointList.push(<rect width={height} height={size} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>);
-                pointList.push(<rect width={size} height={height} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>);
+                pointList.push(<rect width={size} height={size} key={id++} fill={upColor} x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
+                pointList.push(<rect width={height} height={size} key={id++} fill={leftColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>);
+                pointList.push(<rect width={size} height={height} key={id++} fill={rightColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>);
             }
         }
     }
@@ -56,6 +59,21 @@ function getParamInfo() {
             key: '定位点柱体高度',
             default: 0.5,
         },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '上侧颜色',
+            default: '#FF7F89'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '左侧颜色',
+            default: '#FFD7D9'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '右侧颜色',
+            default: '#FFEBF3'
+        },
     ];
 }
 
diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js
index 30c496d..6a40959 100644
--- a/src/components/renderer/RendererBase.js
+++ b/src/components/renderer/RendererBase.js
@@ -40,10 +40,10 @@ function listPoints(qrcode, params) {
                     pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
                 } else if (posType == 1) {
                     pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill={posColor} strokeWidth="1" stroke="black"  cx={x + 0.5} cy={y + 0.5} r={3} />)
+                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
                 } else if (posType == 2) {
                     pointList.push(<circle key={id++} fill={posColor} 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} />)
+                    pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
                     for (let w = 0; w < vw.length; w++) {
                         pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
                     }
diff --git a/src/components/renderer/RendererDSJ.js b/src/components/renderer/RendererDSJ.js
index c8f667a..8a89321 100644
--- a/src/components/renderer/RendererDSJ.js
+++ b/src/components/renderer/RendererDSJ.js
@@ -14,7 +14,8 @@ function listPoints(qrcode, params) {
 
     let width2 = params[0] / 100;
     let width1 = params[1] / 100;
-    let posType = params[2];
+    let width3 = params[2] / 100;
+    let posType = params[3];
     let id = 0;
 
     if (width2 <= 0) width2 = 70;
@@ -39,11 +40,11 @@ function listPoints(qrcode, params) {
                 if (posType == 0) {
                     pointList.push(<rect width={1} height={1} key={id++} fill="#0B2D97" x={x} y={y}/>);
                 } else if (posType == 1) {
-                    pointList.push(<rect width={3 - (1 - width2)} height={3 - (1 - width2)} key={id++} fill="#0B2D97" x={x - 1 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>);
-                    pointList.push(<rect width={width2} height={3 - (1 - width2)} key={id++} fill="#0B2D97" x={x - 3 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>);
-                    pointList.push(<rect width={width2} height={3 - (1 - width2)} key={id++} fill="#0B2D97" x={x + 3 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>);
-                    pointList.push(<rect width={3 - (1 - width2)} height={width2} key={id++} fill="#0B2D97" x={x - 1 + (1 - width2)/2} y={y - 3 + (1 - width2)/2}/>);
-                    pointList.push(<rect width={3 - (1 - width2)} height={width2} key={id++} fill="#0B2D97" x={x - 1 + (1 - width2)/2} y={y + 3 + (1 - width2)/2}/>);
+                    pointList.push(<rect width={3 - (1 - width3)} height={3 - (1 - width3)} key={id++} fill="#0B2D97" x={x - 1 + (1 - width3)/2} y={y - 1 + (1 - width3)/2}/>);
+                    pointList.push(<rect width={width3} height={3 - (1 - width3)} key={id++} fill="#0B2D97" x={x - 3 + (1 - width3)/2} y={y - 1 + (1 - width3)/2}/>);
+                    pointList.push(<rect width={width3} height={3 - (1 - width3)} key={id++} fill="#0B2D97" x={x + 3 + (1 - width3)/2} y={y - 1 + (1 - width3)/2}/>);
+                    pointList.push(<rect width={3 - (1 - width3)} height={width3} key={id++} fill="#0B2D97" x={x - 1 + (1 - width3)/2} y={y - 3 + (1 - width3)/2}/>);
+                    pointList.push(<rect width={3 - (1 - width3)} height={width3} key={id++} fill="#0B2D97" x={x - 1 + (1 - width3)/2} y={y + 3 + (1 - width3)/2}/>);
                 }
             }
             else if (typeTable[x][y] == QRPointType.POS_OTHER) {
@@ -170,6 +171,11 @@ function getParamInfo() {
             key: 'x 宽度',
             default: 70,
         },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '定位点宽度',
+            default: 90,
+        },
         {
             type: ParamTypes.SELECTOR,
             key: '定位点样式',
diff --git a/src/components/renderer/RendererImage.js b/src/components/renderer/RendererImage.js
index a34e233..380761c 100644
--- a/src/components/renderer/RendererImage.js
+++ b/src/components/renderer/RendererImage.js
@@ -13,7 +13,10 @@ function listPoints(qrcode, params) {
     let type = params[1];
     let size = params[2] / 100 / 3;
     let opacity = params[3] / 100;
-    let posType = params[4];
+    let otherColorDark = params[4];
+    let otherColorLight = params[5];
+    let posType = params[6];
+    let posColor = params[7];
     let id = 0;
 
     const vw = [3, -3];
@@ -29,33 +32,33 @@ function listPoints(qrcode, params) {
             if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
                 if (qrcode.isDark(x, y)) {
                     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}/>)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorDark} 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}/>)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorDark} cx={x + 0.5} cy={y + 0.5}/>)
                 } else {
                     if (type == 0)
-                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorLight} 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="white" cx={x + 0.5} cy={y + 0.5}/>)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorLight} cx={x + 0.5} cy={y + 0.5}/>)
                 }
             }
             else if (typeTable[x][y] == QRPointType.POS_CENTER) {
                 if (qrcode.isDark(x, y)) {
                     if (posType == 0) {
-                        pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                        pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
                     } else if (posType == 1) {
                         pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
-                        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} />)
+                        pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                        pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
                     } else if (posType == 2) {
                         pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
-                        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} />)
+                        pointList.push(<circle key={id++} fill={posColor} 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={posColor}  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} />)
+                            pointList.push(<circle key={id++} fill={posColor} 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} />)
+                            pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
                         }
                     }
                 }
@@ -64,7 +67,7 @@ function listPoints(qrcode, params) {
             else if (typeTable[x][y] == QRPointType.POS_OTHER) {
                 if (qrcode.isDark(x, y)) {
                     if (posType == 0) {
-                        pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
+                        pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
                     }
                 } else {
                     if (posType == 0) {
@@ -76,14 +79,14 @@ function listPoints(qrcode, params) {
             else {
                 if (qrcode.isDark(x, y)) {
                     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}/>)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorDark} 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}/>)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorDark} cx={x + 0.5} cy={y + 0.5}/>)
                 } else {
                     if (type == 0)
-                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
+                        pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorLight} 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="white" cx={x + 0.5} cy={y + 0.5}/>)
+                        pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorLight} cx={x + 0.5} cy={y + 0.5}/>)
                 }
 
             }
@@ -119,6 +122,16 @@ function getParamInfo() {
             key: '信息点不透明度',
             default: 100,
         },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点深色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点浅色',
+            default: '#FFFFFF'
+        },
         {
             type: ParamTypes.SELECTOR,
             key: '定位点样式',
@@ -129,6 +142,11 @@ function getParamInfo() {
                 "行星",
             ]
         },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点颜色',
+            default: '#000000'
+        },
     ];
 }
 
diff --git a/src/components/renderer/RendererRandRound.js b/src/components/renderer/RendererRandRound.js
index 130d7f1..5f90d76 100644
--- a/src/components/renderer/RendererRandRound.js
+++ b/src/components/renderer/RendererRandRound.js
@@ -15,6 +15,8 @@ function listPoints(qrcode, params) {
     let opacity = params[2] / 100;
     let posType = params[3];
     let id = 0;
+    let otherColor = params[4];
+    let posColor = params[5];
 
     const vw = [3, -3];
     const vh = [3, -3];
@@ -27,41 +29,41 @@ function listPoints(qrcode, params) {
 
             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}/>)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} 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}/>)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} 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} />)
+                    pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} 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}/>);
+                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} 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} />)
+                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor}  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} />)
+                    pointList.push(<circle key={id++} fill={posColor} 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={posColor}  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} />)
+                        pointList.push(<circle key={id++} fill={posColor} 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} />)
+                        pointList.push(<circle key={id++} fill={posColor} 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}/>);
+                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} 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}/>)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} 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}/>)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} 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)} />)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
             }
         }
     }
@@ -101,10 +103,20 @@ function getParamInfo() {
                 "行星",
             ]
         },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点点颜色',
+            default: '#000000'
+        }
     ];
 }
 
-const RendererRandRound = ({ qrcode, params, setParamInfo}) => {
+const RendererBase = ({ qrcode, params, setParamInfo}) => {
     useEffect(() => {
         setParamInfo(getParamInfo());
     }, [setParamInfo]);
@@ -117,4 +129,4 @@ const RendererRandRound = ({ qrcode, params, setParamInfo}) => {
     )
 }
 
-export default RendererRandRound
+export default RendererBase
diff --git a/src/components/renderer/RendererRound.js b/src/components/renderer/RendererRound.js
index 801f4fa..81c610d 100644
--- a/src/components/renderer/RendererRound.js
+++ b/src/components/renderer/RendererRound.js
@@ -15,6 +15,8 @@ function listPoints(qrcode, params) {
     let opacity = params[2] / 100;
     let posType = params[3];
     let id = 0;
+    let otherColor = params[4];
+    let posColor = params[5];
 
     const vw = [3, -3];
     const vh = [3, -3];
@@ -23,45 +25,45 @@ function listPoints(qrcode, params) {
 
     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) {
                 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}/>)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} 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}/>)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} 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} />)
+                    pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} 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}/>);
+                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} 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} />)
+                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
+                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor}  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} />)
+                    pointList.push(<circle key={id++} fill={posColor} 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={posColor}  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} />)
+                        pointList.push(<circle key={id++} fill={posColor} 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} />)
+                        pointList.push(<circle key={id++} fill={posColor} 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}/>);
+                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} 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}/>)
+                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} 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}/>)
+                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} 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)} />)
+                    pointList.push(<circle opacity={opacity}  key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
             }
         }
     }
@@ -101,10 +103,20 @@ function getParamInfo() {
                 "行星",
             ]
         },
-    ]
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点点颜色',
+            default: '#000000'
+        }
+    ];
 }
 
-const RendererRound = ({ qrcode, params, setParamInfo}) => {
+const RendererBase = ({ qrcode, params, setParamInfo}) => {
     useEffect(() => {
         setParamInfo(getParamInfo());
     }, [setParamInfo]);
@@ -117,4 +129,4 @@ const RendererRound = ({ qrcode, params, setParamInfo}) => {
     )
 }
 
-export default RendererRound
+export default RendererBase