From 881fe6f9d5aed244f26826b6c952cd0ad393bf53 Mon Sep 17 00:00:00 2001
From: ciaochaos <1272777550@qq.com>
Date: Fri, 15 May 2020 11:37:31 +0800
Subject: [PATCH] =?UTF-8?q?C3=20=E9=A2=9C=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/codeStyles/codeStyleConfig.xml        |  5 +++
 src/components/renderer/RendererResImage.js | 47 +++++++++++++--------
 src/utils/util.js                           |  2 +-
 3 files changed, 36 insertions(+), 18 deletions(-)
 create mode 100644 .idea/codeStyles/codeStyleConfig.xml

diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml
new file mode 100644
index 0000000..a55e7a1
--- /dev/null
+++ b/.idea/codeStyles/codeStyleConfig.xml
@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>
\ No newline at end of file
diff --git a/src/components/renderer/RendererResImage.js b/src/components/renderer/RendererResImage.js
index f3c4887..6633206 100644
--- a/src/components/renderer/RendererResImage.js
+++ b/src/components/renderer/RendererResImage.js
@@ -11,6 +11,8 @@ function listPoints(qrcode, params) {
     const pointList = new Array(nCount);
     let alignType = params[1];
     let timingType = params[2];
+    let otherColor = params[3];
+    let posColor = params[4];
 
     let id = 0;
     for (let x = 0; x < nCount; x++) {
@@ -19,21 +21,21 @@ function listPoints(qrcode, params) {
             if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER) {
                 if (qrcode.isDark(x, y)) {
                     if (alignType === 2) {
-                        pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                        pointList.push(<use key={id++} xlinkHref="#B-black" x={posX - 0.03} y={posY - 0.03}/>)
                     } else {
-                        pointList.push(<use key={id++} xlinkHref="#S-black" x={posX + 1} y={posY + 1}/>)
+                        pointList.push(<use key={id++} xlinkHref="#S-black" x={posX + 1 - 0.01} y={posY + 1 - 0.01}/>)
                     }
                 } else {
                     if (alignType === 0) {
                         pointList.push(<use key={id++} xlinkHref="#S-white" x={posX + 1} y={posY + 1}/>)
                     } else {
-                        pointList.push(<use key={id++} xlinkHref="#B-white" x={posX} y={posY}/>)
+                        pointList.push(<use key={id++} xlinkHref="#B-white" x={posX - 0.03} y={posY - 0.03}/>)
                     }
                 }
             } else if (typeTable[x][y] == QRPointType.TIMING) {
                 if (qrcode.isDark(x, y)) {
                     if (timingType === 2) {
-                        pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                        pointList.push(<use key={id++} xlinkHref="#B-black" x={posX - 0.03} y={posY - 0.03}/>)
                     } else {
                         pointList.push(<use key={id++} xlinkHref="#S-black" x={posX + 1} y={posY + 1}/>)
                     }
@@ -41,24 +43,22 @@ function listPoints(qrcode, params) {
                     if (timingType === 0) {
                         pointList.push(<use key={id++} xlinkHref="#S-white" x={posX + 1} y={posY + 1}/>)
                     } else {
-                        pointList.push(<use key={id++} xlinkHref="#B-white" x={posX} y={posY}/>)
+                        pointList.push(<use key={id++} xlinkHref="#B-white" x={posX - 0.03} y={posY - 0.03}/>)
                     }
                 }
             } else if (typeTable[x][y] == QRPointType.POS_CENTER) {
                 if (qrcode.isDark(x, y)) {
-                    pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                    pointList.push(<use key={id++} fill={posColor} xlinkHref="#B" x={posX - 0.03} y={posY - 0.03}/>)
                 }
             } else if (typeTable[x][y] == QRPointType.POS_OTHER) {
                 if (qrcode.isDark(x, y)) {
-                    pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                    pointList.push(<use key={id++} fill={posColor} xlinkHref="#B" x={posX - 0.03} y={posY - 0.03}/>)
                 } else {
-                    pointList.push(<use key={id++} xlinkHref="#B-white" x={posX} y={posY}/>)
+                    pointList.push(<use key={id++} xlinkHref="#B-white" x={posX - 0.03} y={posY - 0.03}/>)
                 }
             } else {
                 if (qrcode.isDark(x, y)) {
                     pointList.push(<use key={id++} xlinkHref="#S-black" x={posX + 1} y={posY + 1}/>)
-                } else {
-                    pointList.push(<use key={id++} xlinkHref="#S-white" x={posX + 1} y={posY + 1}/>)
                 }
             }
         }
@@ -94,6 +94,16 @@ function getParamInfo() {
                 "黑白",
             ]
         },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点颜色',
+            default: '#000000'
+        },
     ];
 }
 
@@ -105,8 +115,6 @@ export function getViewBox(qrcode) {
 }
 
 function getGrayPointList(imgBase64, size, black, white) {
-    console.log(1)
-
     let canvas = document.createElement('canvas');
     let ctx = canvas.getContext('2d');
     let img = document.createElement('img');
@@ -127,7 +135,7 @@ function getGrayPointList(imgBase64, size, black, white) {
                     let imageData = ctx.getImageData(x, y, 1, 1);
                     let data = imageData.data;
                     let gray = gamma(data[0], data[1], data[2]);
-                    if (Math.random() > gray / 255) gpl.push(<use key={"g_" + x + "_" + y} x={x} y={y} xlinkHref={black} />);
+                    if (Math.random() > gray / 255 && ( x % 3 !== 1 || y % 3 !== 1 ) ) gpl.push(<use key={"g_" + x + "_" + y} x={x} y={y} xlinkHref={black} />);
                 }
             }
             resolve(gpl);
@@ -136,6 +144,9 @@ function getGrayPointList(imgBase64, size, black, white) {
 }
 
 const RendererResImage = ({qrcode, params, setParamInfo}) => {
+    let otherColor = params[3];
+    let posColor = params[4];
+
     useEffect(() => {
         setParamInfo(getParamInfo());
     }, [setParamInfo]);
@@ -149,10 +160,12 @@ const RendererResImage = ({qrcode, params, setParamInfo}) => {
         <svg className="Qr-item-svg" width="100%" height="100%" viewBox={getViewBox(qrcode)} fill="white"
              xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
             <defs>
-                <rect id="B-black" fill="black" width={3} height={3}/>
-                <rect id="B-white" fill="white" width={3} height={3}/>
-                <rect id="S-black" fill="black" width={1} height={1}/>
-                <rect id="S-white" fill="white" width={1} height={1}/>
+                <rect id="B-black" fill={otherColor} width={3.08} height={3.08}/>
+                <rect id="B-white" fill="white" width={3.08} height={3.08}/>
+                <rect id="S-black" fill={otherColor} width={1.02} height={1.02}/>
+                <rect id="S-white" fill="white" width={1.02} height={1.02}/>
+                <rect id="B" width={3.08} height={3.08}/>
+                <rect id="S" width={1.02} height={1.02}/>
             </defs>
             {gpl.concat(listPoints(qrcode, params))}
         </svg>
diff --git a/src/utils/util.js b/src/utils/util.js
index 50ae3e5..bc0d4a4 100644
--- a/src/utils/util.js
+++ b/src/utils/util.js
@@ -66,7 +66,7 @@ export function toBase64(file, width, height) {
             ctx.fillRect(0, 0, width, height)
             ctx.drawImage(img, 0, 0, width, height);
 
-            resolve(canvas.toDataURL(file.type, 0.8));
+            resolve(canvas.toDataURL(file.type, 0.9));
         };
     })
 }