remove title

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 = () => (
         <div className="Qr-Centered">
             <div className="Qr-div-table">
                 <ParamCorrectLevelViewer/>
-                <ParamTitleViewer/>
                 <ParamIconViewer/>
                 <ParamListViewer/>
             </div>

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 (
             <React.Fragment>
                 <FrameworkParam paramName={"图标源"}>
@@ -34,8 +34,10 @@ const ParamIcon = ({icon, onChange}) => (
                 className="Qr-select"
                 value={icon.enabled}
                 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={3}>自定义</option>
             </select>
         </FrameworkParam>
         <IconParams icon={icon} onChange={onChange}/>

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 {createRenderer, defaultDrawIcon} from "../style/Renderer";
-import {rand} from "../../utils/util";
+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(<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({
     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 = (

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(<rect key={id++} width={iconSize} height={iconSize} rx="2" ry="2" fill="#FFFFFF" x={iconXY} y={iconXY} />);
-    }
 
-    if (icon && iconEnabled) {
+    // draw icon
-        pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
+    if (icon) {
-    }
+        const iconEnabled = getExactValue(icon.enabled, 0);
+        const {src, scale} = icon;
 
-    if (title && titleEnabled) {
+        const iconSize = Number(nCount * (scale > .33 ? .33 : scale));
-        // const svgWidth = styles.svg && styles.svg.width ? styles.svg.width.replace("px", "") : 300;
+        const iconXY = (nCount - iconSize) / 2;
-        // 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 fontY = titleVerticalAlign === "middle"
+        if (icon && iconEnabled) {
-            ? (icon ? (iconXY + iconSize) : (nCount / 2 + titleFontSize * .5))
+            pointList.push(<rect key={id++} width={iconSize} height={iconSize} rx="2" ry="2" fill="#FFFFFF" x={iconXY} y={iconXY} />);
-            : Number(nCount + nCount / 5) - titleFontSize * .5;
+            pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
-
+        }
-        pointList.push(<text key={id++} x={nCount / 2} y={fontY} fill={titleFontColor} style={{ ...titleStyle, fontSize: titleFontSize }} textAnchor="middle">{text}</text>)
     }
 
     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 })}
             </svg>
         );
     }
 }
 
 export default React.memo(Renderer, areEqual)
+export { defaultDrawIcon, defaultViewBox }