From 9b1decd5739e8b403c4ff35c8212b7faa668c2f5 Mon Sep 17 00:00:00 2001 From: ciaochaos <1272777550@qq.com> Date: Tue, 1 Sep 2020 19:26:07 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E9=A1=BA=E5=BA=8F=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Qrcode.css | 1 + src/components/param/disposable/ParamIcon.js | 12 +- src/components/renderer/Renderer25D.js | 153 ++++++++++++++++++- src/components/renderer/RendererBase.js | 45 +++--- src/components/style/Renderer.js | 113 +++++++++++++- src/reducers/index.js | 2 +- 6 files changed, 281 insertions(+), 45 deletions(-) diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 33cd67e..a0adebc 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -176,6 +176,7 @@ border: rgba(0,0,0,0.12) solid 2px; width: calc((100vw - 56px) / 2); height: calc((100vw - 56px) / 2); + background: rgba(255,255,255,0.5); } @media (min-width: 500px) { diff --git a/src/components/param/disposable/ParamIcon.js b/src/components/param/disposable/ParamIcon.js index 648a1bc..1c54095 100644 --- a/src/components/param/disposable/ParamIcon.js +++ b/src/components/param/disposable/ParamIcon.js @@ -9,7 +9,7 @@ const IconParams = ({ icon, onChange }) => { const { enabled, src, scale } = icon; const components = []; - if (getExactValue(enabled, 0) == 3) { + if (getExactValue(enabled, 0) == 1) { components.push( @@ -34,15 +34,17 @@ const IconParams = ({ icon, onChange }) => { const ParamIcon = ({icon, onChange}) => ( - + diff --git a/src/components/renderer/Renderer25D.js b/src/components/renderer/Renderer25D.js index 9d0e206..a9a82f5 100644 --- a/src/components/renderer/Renderer25D.js +++ b/src/components/renderer/Renderer25D.js @@ -2,6 +2,13 @@ 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"; + +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 }) { if (!qrcode) return [] @@ -19,12 +26,6 @@ function listPoints({ qrcode, params, icon }) { let rightColor = params[4]; 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 (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( + + + + ); + pointList.push( + + + + + + + + + + + ); + } + } + + 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 = ( + + + + + ) + + const WeChatIcon = ( + + + + + + ) + + const WeChatPayIcon = ( + + + + + ) + + const AlipayIcon = ( + + + + + ) + + 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( + + + + ); + pointList.push( + + + + + + + + + {builtinIcon()} + + + + ); + } + } + + 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) { if (!qrcode) return '0 0 0 0'; @@ -87,7 +225,8 @@ function viewBox(qrcode) { const Renderer25D = createRenderer({ listPoints: listPoints, getParamInfo: getParamInfo, - getViewBox: viewBox + getViewBox: viewBox, + drawIcon: drawIcon }) export default Renderer25D diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js index bebf89c..2164c36 100644 --- a/src/components/renderer/RendererBase.js +++ b/src/components/renderer/RendererBase.js @@ -7,8 +7,19 @@ import LinkTrace from "../link/LinkTrace"; function listPoints({ qrcode, params, icon }) { if (!qrcode) return [] - 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 pointList = new Array(nCount); @@ -65,12 +76,14 @@ function listPoints({ qrcode, params, icon }) { } } else { - if (type === 0) + if (type === 0) { pointList.push() - else if (type === 1) + } else if (type === 1) { + if (!(iconEnabled && nearIcon(x, y))) {} pointList.push() - else if (type === 2) + } else if (type === 2) { pointList.push() + } } } } @@ -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(); - // return pointList; - } else if (iconMode === 3) { - // Custom - const {src, scale} = icon; - - // default - return defaultDrawIcon({ qrcode, icon, params }); - } -} - export const RendererRect = createRenderer({ listPoints: listPoints, getParamInfo: getParamInfoRect, - drawIcon: drawIcon }); export const RendererRound = createRenderer({ listPoints: listPoints, getParamInfo: getParamInfoRound, - drawIcon: drawIcon }); export const RendererRandRound = createRenderer({ listPoints: listPoints, getParamInfo: getParamInfoRandRound, - drawIcon: drawIcon }); RendererRect.detail = ( diff --git a/src/components/style/Renderer.js b/src/components/style/Renderer.js index 92e55a9..441b3aa 100644 --- a/src/components/style/Renderer.js +++ b/src/components/style/Renderer.js @@ -22,24 +22,129 @@ let defaultDrawIcon = function ({ qrcode, params, title, icon }) { 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)); + const iconSize = Number(nCount * (scale > 33 ? 33 : scale) / 100); const iconXY = (nCount - iconSize) / 2; if (icon && iconEnabled) { - pointList.push(); - pointList.push(); + pointList.push(); + pointList.push( + + + + + + + + + + + ); } } 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 = ( + + + + + ) + + const WeChatIcon = ( + + + + + + ) + + const WeChatPayIcon = ( + + + + + ) + + const AlipayIcon = ( + + + + + ) + + 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(); + pointList.push( + + + + + + + + + {builtinIcon()} + + + + ); + } + } + + 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) { renderer = extend({ getViewBox: defaultViewBox, @@ -47,7 +152,7 @@ export function createRenderer(renderer) { getParamInfo: () => {return []; }, beginRendering: ({ qrcode, params, setParamInfo }) => {}, beforeListing: ({ qrcode, params, setParamInfo }) => {}, - drawIcon: defaultDrawIcon + drawIcon: drawIcon }, renderer); return ({ qrcode, params, title, icon, setParamInfo}) => { diff --git a/src/reducers/index.js b/src/reducers/index.js index 30fba13..bc48256 100644 --- 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: 0.33 }, + icon: { enabled: 0, src: '', scale: 25 }, 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))