From 38d2e779b6bb10e4a6732b05c225c5cefce8cd68 Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Tue, 1 Sep 2020 15:25:15 +0800 Subject: [PATCH] remove title --- src/components/app/PartParams.js | 2 - src/components/param/disposable/ParamIcon.js | 8 +-- src/components/renderer/RendererBase.js | 28 ++++++++++- src/components/style/Renderer.js | 51 ++++++-------------- 4 files changed, 45 insertions(+), 44 deletions(-) diff --git a/src/components/app/PartParams.js b/src/components/app/PartParams.js index 51bfde0..ce46d13 100644 --- a/src/components/app/PartParams.js +++ b/src/components/app/PartParams.js @@ -2,7 +2,6 @@ import React from 'react'; import './App.css'; import ParamListViewer from "../../containers/param/ParamListViewer"; import ParamCorrectLevelViewer from "../../containers/param/ParamCorrectLevelViewer"; -import ParamTitleViewer from "../../containers/param/disposable/ParamTitleViewer"; import ParamIconViewer from "../../containers/param/disposable/ParamIconViewer"; const PartParams = () => ( @@ -14,7 +13,6 @@ const PartParams = () => (
-
diff --git a/src/components/param/disposable/ParamIcon.js b/src/components/param/disposable/ParamIcon.js index 9180c10..8a714b8 100644 --- a/src/components/param/disposable/ParamIcon.js +++ b/src/components/param/disposable/ParamIcon.js @@ -7,7 +7,7 @@ import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSr const IconParams = ({ icon, onChange }) => { const { enabled, src, scale } = icon; - if (getExactValue(enabled, 0)) { + if (getExactValue(enabled, 0) == 3) { return ( @@ -34,8 +34,10 @@ const ParamIcon = ({icon, onChange}) => ( className="Qr-select" value={icon.enabled} onChange={(e) => onChange({...icon, enabled: e.target.value})}> - - + + + + diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js index f2c01aa..4bf9425 100644 --- a/src/components/renderer/RendererBase.js +++ b/src/components/renderer/RendererBase.js @@ -1,8 +1,8 @@ import React from "react"; import {ParamTypes} from "../../constant/ParamTypes"; import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler"; -import {createRenderer} from "../style/Renderer"; -import {rand} from "../../utils/util"; +import {createRenderer, defaultDrawIcon} from "../style/Renderer"; +import {getExactValue, rand} from "../../utils/util"; import LinkTrace from "../link/LinkTrace"; function listPoints(qrcode, params) { @@ -216,19 +216,43 @@ 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 4c9fa9e..c5d1898 100644 --- a/src/components/style/Renderer.js +++ b/src/components/style/Renderer.js @@ -16,62 +16,38 @@ let defaultViewBox = function (qrcode) { return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2); } -let drawIcon = function (qrcode, title, icon) { +let defaultDrawIcon = function ({ qrcode, params, title, icon }) { if (!qrcode) return [] - if (!title && !icon) return null; let id = 0; - const titleEnabled = getExactValue(title.enabled, 0); - const iconEnabled = getExactValue(icon.enabled, 0); - const {text, color, size, align} = title; - const {src, scale} = icon; - const nCount = qrcode.getModuleCount(); - // const { fontSize, color, verticalAlign, ...titleStyle } = styles.title || {}; - // const titleVerticalAlign = titleAlign || verticalAlign || (icon ? "bottom" : "middle"); - // iconScale = iconScale > .33 ? .33 : iconScale; - const titleStyle = {}; - const titleVerticalAlign = align; - - const iconSize = Number(nCount * (scale > .33 ? .33 : scale)); - const iconXY = (nCount - iconSize) / 2; - const pointList = []; - if ((titleEnabled && align === "middle") || iconEnabled) { - pointList.push(); - } - if (icon && iconEnabled) { - pointList.push(); - } + // draw icon + if (icon) { + const iconEnabled = getExactValue(icon.enabled, 0); + const {src, scale} = icon; - if (title && titleEnabled) { - // const svgWidth = styles.svg && styles.svg.width ? styles.svg.width.replace("px", "") : 300; - // const titleFontSize = Number(nCount + nCount / 5 * 2) * (titleSize || fontSize || 12) / svgWidth; - // const titleFontColor = titleColor || color || "#000000"; - const svgWidth = 300; - const titleFontSize = Number(nCount + nCount / 5 * 2) * size / svgWidth; - const titleFontColor = color; + const iconSize = Number(nCount * (scale > .33 ? .33 : scale)); + const iconXY = (nCount - iconSize) / 2; - const fontY = titleVerticalAlign === "middle" - ? (icon ? (iconXY + iconSize) : (nCount / 2 + titleFontSize * .5)) - : Number(nCount + nCount / 5) - titleFontSize * .5; - - pointList.push({text}) + if (icon && iconEnabled) { + pointList.push(); + pointList.push(); + } } return pointList; } export function createRenderer(renderer) { - - renderer = extend({ getViewBox: defaultViewBox, listPoints: (qrcode, params) => { return []; }, getParamInfo: () => {return []; }, beginRendering: ({ qrcode, params, setParamInfo }) => {}, beforeListing: ({ qrcode, params, setParamInfo }) => {}, + drawIcon: defaultDrawIcon }, renderer); return ({ qrcode, params, title, icon, setParamInfo}) => { @@ -85,10 +61,11 @@ export function createRenderer(renderer) { xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink"> {renderer.beforeListing({ qrcode, params, setParamInfo })} {renderer.listPoints(qrcode, params)} - {drawIcon(qrcode, title, icon)} + {renderer.drawIcon({ qrcode, params, title, icon })} ); } } export default React.memo(Renderer, areEqual) +export { defaultDrawIcon, defaultViewBox }