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))
+ }
}
})