From 26871b5ab7fec19df0e5fd5f3877d2f3c535113e Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Tue, 1 Sep 2020 21:37:42 +0800 Subject: [PATCH] icon scale blur --- src/components/param/disposable/ParamIcon.js | 17 +-- src/components/renderer/RendererResImage.js | 136 ++++++++++++++++++ .../param/disposable/ParamIconViewer.js | 7 +- 3 files changed, 151 insertions(+), 9 deletions(-) diff --git a/src/components/param/disposable/ParamIcon.js b/src/components/param/disposable/ParamIcon.js index 1c54095..ac94339 100644 --- a/src/components/param/disposable/ParamIcon.js +++ b/src/components/param/disposable/ParamIcon.js @@ -5,14 +5,14 @@ import FrameworkParam from "../FrameworkParam"; import {getExactValue} from "../../../utils/util"; import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSrcViewer"; -const IconParams = ({ icon, onChange }) => { +const IconParams = ({ icon, onBlur, onKeyPress }) => { const { enabled, src, scale } = icon; const components = []; if (getExactValue(enabled, 0) == 1) { components.push( - + ); } @@ -23,8 +23,9 @@ const IconParams = ({ icon, onChange }) => { onChange({...icon, scale: e.target.value})} + defaultValue={scale} + onBlur={(e) => onBlur({...icon, scale: e.target.value})} + onKeyPress={(e) => onKeyPress(e, {...icon, scale: e.target.value})} /> ) @@ -32,13 +33,13 @@ const IconParams = ({ icon, onChange }) => { return components; } -const ParamIcon = ({icon, onChange}) => ( +const ParamIcon = ({icon, onBlur, onKeyPress}) => ( - + ) diff --git a/src/components/renderer/RendererResImage.js b/src/components/renderer/RendererResImage.js index de74eb8..5a95753 100644 --- a/src/components/renderer/RendererResImage.js +++ b/src/components/renderer/RendererResImage.js @@ -3,6 +3,7 @@ import {gamma} from "../../utils/imageUtils"; import {ParamTypes} from "../../constant/ParamTypes"; import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler"; import {defaultResImage} from "../../constant/References"; +import {getExactValue, getIdNum} from "../../utils/util"; function listPoints({ qrcode, params, icon }) { if (!qrcode) return [] @@ -155,6 +156,140 @@ function getGrayPointList(params, size, black, white) { }) } +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) { + const randomIdDefs = getIdNum(); + const randomIdClips = getIdNum(); + 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) { + const randomIdDefs = getIdNum(); + const randomIdClips = getIdNum(); + 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 }); + } +} + const RendererResImage = ({qrcode, params, setParamInfo, icon}) => { let otherColor = params[5]; @@ -179,6 +314,7 @@ const RendererResImage = ({qrcode, params, setParamInfo, icon}) => { {gpl.concat(listPoints({ qrcode, params, icon }))} + {drawIcon({ qrcode, params, icon })} ) } diff --git a/src/containers/param/disposable/ParamIconViewer.js b/src/containers/param/disposable/ParamIconViewer.js index 83b9304..2f54a80 100644 --- a/src/containers/param/disposable/ParamIconViewer.js +++ b/src/containers/param/disposable/ParamIconViewer.js @@ -7,8 +7,13 @@ const mapStateToProps = (state, ownProps) => ({ }) const mapDispatchToProps = (dispatch, ownProps) => ({ - onChange: (icon) => { + onBlur: (icon) => { dispatch(changeIcon(icon)) + }, + onKeyPress: (e, icon) => { + if (e.key === 'Enter') { + dispatch(changeIcon(icon)) + } } })