样式顺序调整

This commit is contained in:
ciaochaos 2020-09-01 19:26:07 +08:00
parent f87632dd8d
commit 9b1decd573
6 changed files with 281 additions and 45 deletions

View File

@ -176,6 +176,7 @@
border: rgba(0,0,0,0.12) solid 2px; border: rgba(0,0,0,0.12) solid 2px;
width: calc((100vw - 56px) / 2); width: calc((100vw - 56px) / 2);
height: calc((100vw - 56px) / 2); height: calc((100vw - 56px) / 2);
background: rgba(255,255,255,0.5);
} }
@media (min-width: 500px) { @media (min-width: 500px) {

View File

@ -9,7 +9,7 @@ const IconParams = ({ icon, onChange }) => {
const { enabled, src, scale } = icon; const { enabled, src, scale } = icon;
const components = []; const components = [];
if (getExactValue(enabled, 0) == 3) { if (getExactValue(enabled, 0) == 1) {
components.push( components.push(
<FrameworkParam paramName={"图标源"}> <FrameworkParam paramName={"图标源"}>
<ParamIconSrcViewer icon={icon} onChange={onChange}/> <ParamIconSrcViewer icon={icon} onChange={onChange}/>
@ -34,15 +34,17 @@ const IconParams = ({ icon, onChange }) => {
const ParamIcon = ({icon, onChange}) => ( const ParamIcon = ({icon, onChange}) => (
<React.Fragment> <React.Fragment>
<FrameworkParam paramName={"启用图标"}> <FrameworkParam paramName={"图标"}>
<select <select
className="Qr-select" className="Qr-select"
value={icon.enabled} value={icon.enabled}
onChange={(e) => onChange({...icon, enabled: e.target.value})}> onChange={(e) => onChange({...icon, enabled: e.target.value})}>
<option value={0}></option> <option value={0}></option>
<option value={1}>微信</option> <option value={1}>自定义</option>
<option value={2}>支付宝</option> <option value={2}>微信 </option>
<option value={3}>自定义</option> <option value={3}>微信</option>
<option value={4}>微信支付</option>
<option value={5}>支付宝</option>
</select> </select>
</FrameworkParam> </FrameworkParam>
<IconParams icon={icon} onChange={onChange}/> <IconParams icon={icon} onChange={onChange}/>

View File

@ -2,6 +2,13 @@ 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";
const X = [ Math.sqrt(3)/2, 1/2];
const Y = [-Math.sqrt(3)/2, 1/2];
const Z = [0, 0];
const matrixString = 'matrix(' + String(X[0]) + ', ' + String(X[1]) + ', ' + String(Y[0]) + ', ' + String(Y[1]) + ', ' + String(Z[0]) + ', ' + String(Z[1]) + ')'
function listPoints({ qrcode, params, icon }) { function listPoints({ qrcode, params, icon }) {
if (!qrcode) return [] if (!qrcode) return []
@ -19,12 +26,6 @@ function listPoints({ qrcode, params, icon }) {
let rightColor = params[4]; let rightColor = params[4];
let id = 0; let id = 0;
const X = [-Math.sqrt(3)/2, 1/2];
const Y = [ Math.sqrt(3)/2, 1/2];
const Z = [0, 0];
const matrixString = 'matrix(' + String(X[0]) + ', ' + String(X[1]) + ', ' + String(Y[0]) + ', ' + String(Y[1]) + ', ' + String(Z[0]) + ', ' + String(Z[1]) + ')'
if (height <= 0) height = 1.0; if (height <= 0) height = 1.0;
if (height2 <= 0) height2 = 1.0; if (height2 <= 0) height2 = 1.0;
@ -77,6 +78,143 @@ function getParamInfo() {
]; ];
} }
let defaultDrawIcon = function ({ qrcode, params, title, icon }) {
if (!qrcode) return []
let id = 0;
const nCount = qrcode.getModuleCount();
const pointList = [];
const sq25 = "M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z";
// draw icon
if (icon) {
const iconEnabled = getExactValue(icon.enabled, 0);
const {src, scale} = icon;
const iconSize = Number(nCount * (scale > 33 ? 33 : scale) / 100);
const iconXY = (nCount - iconSize) / 2;
if (icon && iconEnabled) {
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) + ')'} />
</g>
);
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"/>
</clipPath>
<g clipPath="url(#clip-path)">
<image overflow="visible" key={id++} xlinkHref={src} width={iconSize} x={iconXY} y={iconXY} />
</g>
</g>
);
}
}
return pointList;
}
let builtinDrawIcon = function ({ qrcode, params, title, icon }) {
if (!qrcode) return []
let id = 0;
const nCount = qrcode.getModuleCount();
const pointList = [];
const sq25 = "M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z";
// draw icon
if (icon) {
const iconMode = getExactValue(icon.enabled, 0);
const {src, scale} = icon;
const iconSize = Number(nCount * (scale > 33 ? 33 : scale) / 100);
const iconXY = (nCount - iconSize) / 2;
const WeChatIconSmall = (
<g>
<rect width="100" height="100" fill="#07c160"/>
<path d="M39.061,44.018a4.375,4.375,0,1,1,4.374-4.375,4.375,4.375,0,0,1-4.374,4.375m21.877,0a4.375,4.375,0,1,1,4.376-4.375,4.375,4.375,0,0,1-4.376,4.375M28.522,69.063a2.184,2.184,0,0,1,.92,1.782,2.581,2.581,0,0,1-.116.7c-.552,2.06-1.437,5.361-1.478,5.516a3.237,3.237,0,0,0-.177.8,1.093,1.093,0,0,0,1.094,1.093,1.243,1.243,0,0,0,.633-.2L36.581,74.6a3.427,3.427,0,0,1,1.742-.5,3.3,3.3,0,0,1,.965.144A38.825,38.825,0,0,0,50,75.739c18.123,0,32.816-12.242,32.816-27.346S68.122,21.049,50,21.049,17.185,33.29,17.185,48.393c0,8.239,4.42,15.656,11.337,20.67" fill="#fff"/>
</g>
)
const WeChatIcon = (
<g>
<rect width="100" height="100" fill="#07c160"/>
<path d="M48.766,39.21a2.941,2.941,0,1,1,2.918-2.94,2.929,2.929,0,0,1-2.918,2.94m-16.455,0a2.941,2.941,0,1,1,2.918-2.941,2.93,2.93,0,0,1-2.918,2.941m8.227-17.039c-13.632,0-24.682,9.282-24.682,20.732,0,6.247,3.324,11.87,8.528,15.67a1.662,1.662,0,0,1,.691,1.352,1.984,1.984,0,0,1-.087.528c-.415,1.563-1.081,4.064-1.112,4.181a2.449,2.449,0,0,0-.132.607.825.825,0,0,0,.823.828.914.914,0,0,0,.474-.154l5.405-3.144a2.57,2.57,0,0,1,1.31-.382,2.442,2.442,0,0,1,.725.109,28.976,28.976,0,0,0,8.057,1.137c.455,0,.907-.012,1.356-.032a16.084,16.084,0,0,1-.829-5.082c0-10.442,10.078-18.908,22.511-18.908.45,0,.565.015,1.008.037-1.858-9.9-11.732-17.479-24.046-17.479" fill="#fff"/>
<path d="M70.432,55.582A2.589,2.589,0,1,1,73,52.994a2.578,2.578,0,0,1-2.568,2.588m-13.713,0a2.589,2.589,0,1,1,2.568-2.588,2.578,2.578,0,0,1-2.568,2.588m20.319,16a16.3,16.3,0,0,0,7.106-13.058c0-9.542-9.208-17.276-20.568-17.276s-20.57,7.734-20.57,17.276S52.216,75.8,63.576,75.8a24.161,24.161,0,0,0,6.714-.947,2.079,2.079,0,0,1,.6-.091,2.138,2.138,0,0,1,1.092.319l4.5,2.62a.78.78,0,0,0,.4.129.688.688,0,0,0,.685-.691,2.081,2.081,0,0,0-.11-.5l-.927-3.486a1.641,1.641,0,0,1-.073-.44,1.385,1.385,0,0,1,.577-1.126" fill="#fff"/>
</g>
)
const WeChatPayIcon = (
<g>
<rect width="100" height="100" fill="#07c160"/>
<path d="M41.055,57.675a2.183,2.183,0,0,1-2.893-.883l-.143-.314L32.046,43.37a1.133,1.133,0,0,1-.105-.461,1.094,1.094,0,0,1,1.748-.877l7.049,5.019a3.249,3.249,0,0,0,2.914.333L76.8,32.63c-5.942-7-15.728-11.581-26.8-11.581-18.122,0-32.813,12.243-32.813,27.345,0,8.24,4.42,15.656,11.338,20.669a2.185,2.185,0,0,1,.919,1.781,2.569,2.569,0,0,1-.116.7c-.552,2.062-1.437,5.362-1.478,5.516a3.212,3.212,0,0,0-.177.8,1.094,1.094,0,0,0,1.1,1.094,1.236,1.236,0,0,0,.631-.2L36.583,74.6a3.438,3.438,0,0,1,1.742-.5,3.281,3.281,0,0,1,.965.145A38.844,38.844,0,0,0,50,75.739c18.122,0,32.813-12.243,32.813-27.345a23.668,23.668,0,0,0-3.738-12.671L41.3,57.537Z" fill="#fff"/>
</g>
)
const AlipayIcon = (
<g>
<rect width="100" height="100" fill="#009ce1"/>
<path d="M100,67.856c-.761-.1-4.8-.8-17.574-5.066-4.012-1.339-9.4-3.389-15.395-5.552A80.552,80.552,0,0,0,75.4,36.156H55.633v-7.1H79.848V25.094H55.633V13.258H45.749a1.68,1.68,0,0,0-1.733,1.707V25.094H19.524v3.963H44.016v7.1H23.8V40.12H63.013a69.579,69.579,0,0,1-5.65,13.763c-12.724-4.187-26.3-7.58-34.834-5.491C17.074,49.733,13.56,52.125,11.5,54.63,2.02,66.125,8.815,83.585,28.824,83.585c11.831,0,23.228-6.579,32.061-17.417C73.49,72.211,97.914,82.4,100,83.267ZM26.956,76.9c-15.6,0-20.215-12.255-12.5-18.958,2.573-2.266,7.276-3.372,9.782-3.621,9.268-.913,17.846,2.613,27.972,7.541C45.087,71.118,36.023,76.9,26.956,76.9Z" fill="#fff"/>
</g>
)
function builtinIcon() {
if (iconMode === 2) {
return WeChatIconSmall
} else if (iconMode === 3) {
return WeChatIcon
} else if (iconMode === 4) {
return WeChatPayIcon
} else if (iconMode === 5) {
return AlipayIcon
}
}
if (icon && iconMode) {
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) + ')'} />
</g>
);
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"/>
</clipPath>
<g clipPath="url(#clip-path)">
<g transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} >
{builtinIcon()}
</g>
</g>
</g>
);
}
}
return pointList;
}
function drawIcon({ qrcode, icon, params }) {
const iconMode = getExactValue(icon.enabled, 0);
if (iconMode === 1) {
// Custom
// default
return defaultDrawIcon({ qrcode, icon, params });
} else {
return builtinDrawIcon({ qrcode, icon, params });
}
}
function viewBox(qrcode) { function viewBox(qrcode) {
if (!qrcode) return '0 0 0 0'; if (!qrcode) return '0 0 0 0';
@ -87,7 +225,8 @@ function viewBox(qrcode) {
const Renderer25D = createRenderer({ const Renderer25D = createRenderer({
listPoints: listPoints, listPoints: listPoints,
getParamInfo: getParamInfo, getParamInfo: getParamInfo,
getViewBox: viewBox getViewBox: viewBox,
drawIcon: drawIcon
}) })
export default Renderer25D export default Renderer25D

View File

@ -7,8 +7,19 @@ import LinkTrace from "../link/LinkTrace";
function listPoints({ qrcode, params, icon }) { function listPoints({ qrcode, params, icon }) {
if (!qrcode) return [] if (!qrcode) return []
const nCount = qrcode.getModuleCount(); const nCount = qrcode.getModuleCount();
const iconEnabled = getExactValue(icon.enabled, 0);
const {src, scale} = icon;
const iconSize = Number(nCount * (scale > .33 ? .33 : scale));
const iconXY = (nCount - iconSize) / 2;
function nearIcon(x, y) {
return Math.pow((nCount - 1) / 2 - x, 2) + Math.pow((nCount - 1) / 2 - y, 2) < Math.pow(iconSize / 2, 2);
}
const typeTable = getTypeTable(qrcode); const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount); const pointList = new Array(nCount);
@ -65,12 +76,14 @@ function listPoints({ qrcode, params, icon }) {
} }
} }
else { else {
if (type === 0) if (type === 0) {
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} 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) } else if (type === 1) {
if (!(iconEnabled && nearIcon(x, y))) {}
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} 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) } else if (type === 2) {
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)} />) 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)} />)
}
} }
} }
} }
@ -216,43 +229,19 @@ function getParamInfoRandRound() {
]; ];
} }
function drawIcon({ qrcode, icon, params }) {
const iconMode = getExactValue(icon.enabled, 0);
if (iconMode === 1) {
// Wechat
} else if (iconMode === 2) {
// Alipay
// const pointList = [];
// const iconSize = Number(nCount * (scale > .33 ? .33 : scale));
// const iconXY = (nCount - iconSize) / 2;
// pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
// return pointList;
} else if (iconMode === 3) {
// Custom
const {src, scale} = icon;
// default
return defaultDrawIcon({ qrcode, icon, params });
}
}
export const RendererRect = createRenderer({ export const RendererRect = createRenderer({
listPoints: listPoints, listPoints: listPoints,
getParamInfo: getParamInfoRect, getParamInfo: getParamInfoRect,
drawIcon: drawIcon
}); });
export const RendererRound = createRenderer({ export const RendererRound = createRenderer({
listPoints: listPoints, listPoints: listPoints,
getParamInfo: getParamInfoRound, getParamInfo: getParamInfoRound,
drawIcon: drawIcon
}); });
export const RendererRandRound = createRenderer({ export const RendererRandRound = createRenderer({
listPoints: listPoints, listPoints: listPoints,
getParamInfo: getParamInfoRandRound, getParamInfo: getParamInfoRandRound,
drawIcon: drawIcon
}); });
RendererRect.detail = ( RendererRect.detail = (

View File

@ -22,24 +22,129 @@ let defaultDrawIcon = function ({ qrcode, params, title, icon }) {
let id = 0; let id = 0;
const nCount = qrcode.getModuleCount(); const nCount = qrcode.getModuleCount();
const pointList = []; const pointList = [];
const sq25 = "M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z";
// draw icon // draw icon
if (icon) { if (icon) {
const iconEnabled = getExactValue(icon.enabled, 0); const iconEnabled = getExactValue(icon.enabled, 0);
const {src, scale} = icon; const {src, scale} = icon;
const iconSize = Number(nCount * (scale > .33 ? .33 : scale)); const iconSize = Number(nCount * (scale > 33 ? 33 : scale) / 100);
const iconXY = (nCount - iconSize) / 2; const iconXY = (nCount - iconSize) / 2;
if (icon && iconEnabled) { if (icon && iconEnabled) {
pointList.push(<rect key={id++} width={iconSize} height={iconSize} rx="2" ry="2" fill="#FFFFFF" x={iconXY} y={iconXY} />); 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(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />); 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"/>
</clipPath>
<g clipPath="url(#clip-path)">
<image overflow="visible" key={id++} xlinkHref={src} width={iconSize} x={iconXY} y={iconXY} />
</g>
</g>
);
} }
} }
return pointList; return pointList;
} }
let builtinDrawIcon = function ({ qrcode, params, title, icon }) {
if (!qrcode) return []
let id = 0;
const nCount = qrcode.getModuleCount();
const pointList = [];
const sq25 = "M32.048565,-1.29480038e-15 L67.951435,1.29480038e-15 C79.0954192,-7.52316311e-16 83.1364972,1.16032014 87.2105713,3.3391588 C91.2846454,5.51799746 94.4820025,8.71535463 96.6608412,12.7894287 C98.8396799,16.8635028 100,20.9045808 100,32.048565 L100,67.951435 C100,79.0954192 98.8396799,83.1364972 96.6608412,87.2105713 C94.4820025,91.2846454 91.2846454,94.4820025 87.2105713,96.6608412 C83.1364972,98.8396799 79.0954192,100 67.951435,100 L32.048565,100 C20.9045808,100 16.8635028,98.8396799 12.7894287,96.6608412 C8.71535463,94.4820025 5.51799746,91.2846454 3.3391588,87.2105713 C1.16032014,83.1364972 5.01544207e-16,79.0954192 -8.63200256e-16,67.951435 L8.63200256e-16,32.048565 C-5.01544207e-16,20.9045808 1.16032014,16.8635028 3.3391588,12.7894287 C5.51799746,8.71535463 8.71535463,5.51799746 12.7894287,3.3391588 C16.8635028,1.16032014 20.9045808,7.52316311e-16 32.048565,-1.29480038e-15 Z";
// draw icon
if (icon) {
const iconMode = getExactValue(icon.enabled, 0);
const {src, scale} = icon;
const iconSize = Number(nCount * (scale > 33 ? 33 : scale) / 100);
const iconXY = (nCount - iconSize) / 2;
const WeChatIconSmall = (
<g>
<rect width="100" height="100" fill="#07c160"/>
<path d="M39.061,44.018a4.375,4.375,0,1,1,4.374-4.375,4.375,4.375,0,0,1-4.374,4.375m21.877,0a4.375,4.375,0,1,1,4.376-4.375,4.375,4.375,0,0,1-4.376,4.375M28.522,69.063a2.184,2.184,0,0,1,.92,1.782,2.581,2.581,0,0,1-.116.7c-.552,2.06-1.437,5.361-1.478,5.516a3.237,3.237,0,0,0-.177.8,1.093,1.093,0,0,0,1.094,1.093,1.243,1.243,0,0,0,.633-.2L36.581,74.6a3.427,3.427,0,0,1,1.742-.5,3.3,3.3,0,0,1,.965.144A38.825,38.825,0,0,0,50,75.739c18.123,0,32.816-12.242,32.816-27.346S68.122,21.049,50,21.049,17.185,33.29,17.185,48.393c0,8.239,4.42,15.656,11.337,20.67" fill="#fff"/>
</g>
)
const WeChatIcon = (
<g>
<rect width="100" height="100" fill="#07c160"/>
<path d="M48.766,39.21a2.941,2.941,0,1,1,2.918-2.94,2.929,2.929,0,0,1-2.918,2.94m-16.455,0a2.941,2.941,0,1,1,2.918-2.941,2.93,2.93,0,0,1-2.918,2.941m8.227-17.039c-13.632,0-24.682,9.282-24.682,20.732,0,6.247,3.324,11.87,8.528,15.67a1.662,1.662,0,0,1,.691,1.352,1.984,1.984,0,0,1-.087.528c-.415,1.563-1.081,4.064-1.112,4.181a2.449,2.449,0,0,0-.132.607.825.825,0,0,0,.823.828.914.914,0,0,0,.474-.154l5.405-3.144a2.57,2.57,0,0,1,1.31-.382,2.442,2.442,0,0,1,.725.109,28.976,28.976,0,0,0,8.057,1.137c.455,0,.907-.012,1.356-.032a16.084,16.084,0,0,1-.829-5.082c0-10.442,10.078-18.908,22.511-18.908.45,0,.565.015,1.008.037-1.858-9.9-11.732-17.479-24.046-17.479" fill="#fff"/>
<path d="M70.432,55.582A2.589,2.589,0,1,1,73,52.994a2.578,2.578,0,0,1-2.568,2.588m-13.713,0a2.589,2.589,0,1,1,2.568-2.588,2.578,2.578,0,0,1-2.568,2.588m20.319,16a16.3,16.3,0,0,0,7.106-13.058c0-9.542-9.208-17.276-20.568-17.276s-20.57,7.734-20.57,17.276S52.216,75.8,63.576,75.8a24.161,24.161,0,0,0,6.714-.947,2.079,2.079,0,0,1,.6-.091,2.138,2.138,0,0,1,1.092.319l4.5,2.62a.78.78,0,0,0,.4.129.688.688,0,0,0,.685-.691,2.081,2.081,0,0,0-.11-.5l-.927-3.486a1.641,1.641,0,0,1-.073-.44,1.385,1.385,0,0,1,.577-1.126" fill="#fff"/>
</g>
)
const WeChatPayIcon = (
<g>
<rect width="100" height="100" fill="#07c160"/>
<path d="M41.055,57.675a2.183,2.183,0,0,1-2.893-.883l-.143-.314L32.046,43.37a1.133,1.133,0,0,1-.105-.461,1.094,1.094,0,0,1,1.748-.877l7.049,5.019a3.249,3.249,0,0,0,2.914.333L76.8,32.63c-5.942-7-15.728-11.581-26.8-11.581-18.122,0-32.813,12.243-32.813,27.345,0,8.24,4.42,15.656,11.338,20.669a2.185,2.185,0,0,1,.919,1.781,2.569,2.569,0,0,1-.116.7c-.552,2.062-1.437,5.362-1.478,5.516a3.212,3.212,0,0,0-.177.8,1.094,1.094,0,0,0,1.1,1.094,1.236,1.236,0,0,0,.631-.2L36.583,74.6a3.438,3.438,0,0,1,1.742-.5,3.281,3.281,0,0,1,.965.145A38.844,38.844,0,0,0,50,75.739c18.122,0,32.813-12.243,32.813-27.345a23.668,23.668,0,0,0-3.738-12.671L41.3,57.537Z" fill="#fff"/>
</g>
)
const AlipayIcon = (
<g>
<rect width="100" height="100" fill="#009ce1"/>
<path d="M100,67.856c-.761-.1-4.8-.8-17.574-5.066-4.012-1.339-9.4-3.389-15.395-5.552A80.552,80.552,0,0,0,75.4,36.156H55.633v-7.1H79.848V25.094H55.633V13.258H45.749a1.68,1.68,0,0,0-1.733,1.707V25.094H19.524v3.963H44.016v7.1H23.8V40.12H63.013a69.579,69.579,0,0,1-5.65,13.763c-12.724-4.187-26.3-7.58-34.834-5.491C17.074,49.733,13.56,52.125,11.5,54.63,2.02,66.125,8.815,83.585,28.824,83.585c11.831,0,23.228-6.579,32.061-17.417C73.49,72.211,97.914,82.4,100,83.267ZM26.956,76.9c-15.6,0-20.215-12.255-12.5-18.958,2.573-2.266,7.276-3.372,9.782-3.621,9.268-.913,17.846,2.613,27.972,7.541C45.087,71.118,36.023,76.9,26.956,76.9Z" fill="#fff"/>
</g>
)
function builtinIcon() {
if (iconMode === 2) {
return WeChatIconSmall
} else if (iconMode === 3) {
return WeChatIcon
} else if (iconMode === 4) {
return WeChatPayIcon
} else if (iconMode === 5) {
return AlipayIcon
}
}
if (icon && iconMode) {
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"/>
</clipPath>
<g clipPath="url(#clip-path)">
<g transform={'translate('+String(iconXY)+','+String(iconXY)+') ' + 'scale(' + String(iconSize/100) + ',' + String(iconSize/100) + ')'} >
{builtinIcon()}
</g>
</g>
</g>
);
}
}
return pointList;
}
function drawIcon({ qrcode, icon, params }) {
const iconMode = getExactValue(icon.enabled, 0);
if (iconMode === 1) {
// Custom
// default
return defaultDrawIcon({ qrcode, icon, params });
} else {
return builtinDrawIcon({ qrcode, icon, params });
}
}
export function createRenderer(renderer) { export function createRenderer(renderer) {
renderer = extend({ renderer = extend({
getViewBox: defaultViewBox, getViewBox: defaultViewBox,
@ -47,7 +152,7 @@ export function createRenderer(renderer) {
getParamInfo: () => {return []; }, getParamInfo: () => {return []; },
beginRendering: ({ qrcode, params, setParamInfo }) => {}, beginRendering: ({ qrcode, params, setParamInfo }) => {},
beforeListing: ({ qrcode, params, setParamInfo }) => {}, beforeListing: ({ qrcode, params, setParamInfo }) => {},
drawIcon: defaultDrawIcon drawIcon: drawIcon
}, renderer); }, renderer);
return ({ qrcode, params, title, icon, setParamInfo}) => { return ({ qrcode, params, title, icon, setParamInfo}) => {

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: 0.33 }, icon: { enabled: 0, src: '', scale: 25 },
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))