Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

图标修正

This commit is contained in:
ciaochaos 2020-09-01 20:00:11 +08:00
parent 91b19f856a
commit d9d0f2b8f9
4 changed files with 37 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/renderer/Renderer25D.js
View File

@ -2,7 +2,7 @@ import React from "react";
import {ParamTypes} from "../../constant/ParamTypes"; import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler"; import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer"; 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 X = [ Math.sqrt(3)/2, 1/2];
const Y = [-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; const iconXY = (nCount - iconSize) / 2;
if (icon && iconEnabled) { if (icon && iconEnabled) {
const randomIdDefs = getIdNum();
const randomIdClips = getIdNum();
pointList.push( pointList.push(
<g transform={matrixString}> <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) + ')'} /> <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( pointList.push(
<g key={id++} transform={matrixString}> <g key={id++} transform={matrixString}>
<defs> <defs>
<path id="defs-path" d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} /> </defs> <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"> <clipPath id={"clip-path" + randomIdClips}>
<use xlinkHref="#defs-path" overflow="visible"/> <use xlinkHref={"#defs-path" + randomIdDefs} overflow="visible"/>
</clipPath> </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} /> <image overflow="visible" key={id++} xlinkHref={src} width={iconSize} x={iconXY} y={iconXY} />
</g> </g>
</g> </g>
); );
} }
} }
@ -176,6 +180,8 @@ let builtinDrawIcon = function ({ qrcode, params, title, icon }) {
} }
if (icon && iconMode) { if (icon && iconMode) {
const randomIdDefs = getIdNum();
const randomIdClips = getIdNum();
pointList.push( pointList.push(
<g transform={matrixString}> <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) + ')'} /> <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( pointList.push(
<g key={id++} transform={matrixString}> <g key={id++} transform={matrixString}>
<defs> <defs>
<path id="defs-path" d={sq25} fill="#FFF" transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} /> </defs> <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"> <clipPath id={"clip-path" + randomIdClips}>
<use xlinkHref="#defs-path" overflow="visible"/> <use xlinkHref={"#defs-path" + randomIdDefs} overflow="visible"/>
</clipPath> </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) + ')'} > <g transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} >
{builtinIcon()} {builtinIcon()}
</g> </g>

23
src/components/style/Renderer.js
View File

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

2
src/reducers/index.js
View File

@ -13,7 +13,7 @@ const initialState = {
history: [], history: [],
downloadData: [], downloadData: [],
qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}), 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'}, title: { enabled: 0, text: '', color: 'black', size: 20, align: 'middle'},
paramInfo: new Array(16).fill(new Array(16)), paramInfo: new Array(16).fill(new Array(16)),
paramValue: new Array(16).fill(new Array(16)) paramValue: new Array(16).fill(new Array(16))

7
src/utils/util.js
View File

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