图标修正

latentcat · Sep 1, 2020 · d9d0f2b · d9d0f2b
1 parent 91b19f8
commit d9d0f2b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/src/components/renderer/Renderer25D.js b/src/components/renderer/Renderer25D.js
@@ -2,7 +2,7 @@ import React from "react";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 import {createRenderer} from "../style/Renderer";
-import {getExactValue} from "../../utils/util";
+import {getExactValue, getIdNum} from "../../utils/util";
 
 const X = [ Math.sqrt(3)/2, 1/2];
 const Y = [-Math.sqrt(3)/2, 1/2];
@@ -95,6 +95,9 @@ let defaultDrawIcon = function ({ qrcode, params, title, icon }) {
         const iconXY = (nCount - iconSize) / 2;
 
         if (icon && iconEnabled) {
+
+            const randomIdDefs = getIdNum();
+            const randomIdClips = getIdNum();
             pointList.push(
                 <g transform={matrixString}>
                     <path d={sq25} stroke="#FFF" strokeWidth={100/iconSize * 1} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />
@@ -103,15 +106,16 @@ let defaultDrawIcon = function ({ qrcode, params, title, icon }) {
             pointList.push(
                 <g key={id++} transform={matrixString}>
                     <defs>
-                        <path id="defs-path" d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
-                    <clipPath id="clip-path">
-                        <use xlinkHref="#defs-path"  overflow="visible"/>
+                        <path id={"defs-path" + randomIdDefs} d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
+                    <clipPath id={"clip-path" + randomIdClips}>
+                        <use xlinkHref={"#defs-path" + randomIdDefs}  overflow="visible"/>
                     </clipPath>
-                    <g clipPath="url(#clip-path)">
+                    <g clipPath={"url(#clip-path" + randomIdClips + ")"}>
                         <image overflow="visible" key={id++} xlinkHref={src} width={iconSize} x={iconXY} y={iconXY} />
                     </g>
                 </g>
             );
+
         }
     }
 
@@ -176,6 +180,8 @@ let builtinDrawIcon = function ({ qrcode, params, title, icon }) {
         }
 
         if (icon && iconMode) {
+            const randomIdDefs = getIdNum();
+            const randomIdClips = getIdNum();
             pointList.push(
                 <g transform={matrixString}>
                     <path d={sq25} stroke="#FFF" strokeWidth={100/iconSize * 1} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />
@@ -184,11 +190,11 @@ let builtinDrawIcon = function ({ qrcode, params, title, icon }) {
             pointList.push(
                 <g key={id++} transform={matrixString}>
                     <defs>
-                        <path id="defs-path" d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
-                    <clipPath id="clip-path">
-                        <use xlinkHref="#defs-path"  overflow="visible"/>
+                        <path id={"defs-path" + randomIdDefs} d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
+                    <clipPath id={"clip-path" + randomIdClips}>
+                        <use xlinkHref={"#defs-path" + randomIdDefs}  overflow="visible"/>
                     </clipPath>
-                    <g clipPath="url(#clip-path)">
+                    <g clipPath={"url(#clip-path" + randomIdClips + ")"}>
                         <g transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} >
                             {builtinIcon()}
                         </g>

diff --git a/src/components/style/Renderer.js b/src/components/style/Renderer.js
@@ -1,5 +1,5 @@
 import React, {useEffect} from "react";
-import {extend, getExactValue} from "../../utils/util";
+import {extend, getExactValue, getIdNum} from "../../utils/util";
 
 const Renderer = ({ rendererType, ...other }) => (
     React.createElement(rendererType, other)
@@ -33,20 +33,23 @@ let defaultDrawIcon = function ({ qrcode, params, title, icon }) {
         const iconXY = (nCount - iconSize) / 2;
 
         if (icon && iconEnabled) {
+            const randomIdDefs = getIdNum();
+            const randomIdClips = getIdNum();
             pointList.push(<path d={sq25} stroke="#FFF" strokeWidth={100/iconSize * 1} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />);
             pointList.push(
                 <g key={id++}>
                     <defs>
-                        <path id="defs-path" d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
-                    <clipPath id="clip-path">
-                        <use xlinkHref="#defs-path"  overflow="visible"/>
+                        <path id={"defs-path" + randomIdDefs} d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
+                    <clipPath id={"clip-path" + randomIdClips}>
+                        <use xlinkHref={"#defs-path" + randomIdDefs}  overflow="visible"/>
                     </clipPath>
-                    <g clipPath="url(#clip-path)">
+                    <g clipPath={"url(#clip-path" + randomIdClips + ")"}>
                         <image overflow="visible" key={id++} xlinkHref={src} width={iconSize} x={iconXY} y={iconXY} />
                     </g>
                 </g>
             );
         }
+
     }
 
     return pointList;
@@ -110,15 +113,17 @@ let builtinDrawIcon = function ({ qrcode, params, title, icon }) {
         }
 
         if (icon && iconMode) {
+            const randomIdDefs = getIdNum();
+            const randomIdClips = getIdNum();
             pointList.push(<path d={sq25} stroke="#FFF" strokeWidth={100/iconSize * 1} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />);
             pointList.push(
                 <g key={id++}>
                     <defs>
-                        <path id="defs-path" d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
-                    <clipPath id="clip-path">
-                        <use xlinkHref="#defs-path"  overflow="visible"/>
+                        <path id={"defs-path" + randomIdDefs} d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} />                    </defs>
+                    <clipPath id={"clip-path" + randomIdClips}>
+                        <use xlinkHref={"#defs-path" + randomIdDefs}  overflow="visible"/>
                     </clipPath>
-                    <g clipPath="url(#clip-path)">
+                    <g clipPath={"url(#clip-path" + randomIdClips + ")"}>
                         <g transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} >
                             {builtinIcon()}
                         </g>

diff --git a/src/reducers/index.js b/src/reducers/index.js
@@ -13,7 +13,7 @@ const initialState = {
     history: [],
     downloadData: [],
     qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
-    icon: { enabled: 0, src: '', scale: 25 },
+    icon: { enabled: 0, src: '', scale: 22 },
     title: { enabled: 0, text: '', color: 'black', size: 20, align: 'middle'},
     paramInfo: new Array(16).fill(new Array(16)),
     paramValue: new Array(16).fill(new Array(16))

diff --git a/src/utils/util.js b/src/utils/util.js
@@ -1,11 +1,18 @@
 import {ParamTypes} from "../constant/ParamTypes";
 let seed = 0;
 
+let idNum = 0;
+
 export function rand(min, max) {
     seed = (seed * 9301 + 49297) % 233280;
     return min + (seed / 233280.0) * (max - min);
 }
 
+export function getIdNum() {
+    idNum += 1
+    return idNum.toString()
+}
+
 export function fillEmptyWith(arr, value) {
     for (let i = 0; i < arr.length; i++)
         if (!arr[i]) arr[i] = value;