[title & icon]

src/actions/index.js

@@ -36,3 +36,17 @@ export const loadDownloadData = (data) => ({
     type: actionTypes.LOAD_DOWNLOAD_DATA,
     data
 })
+
+export const changeTitle = (title) => {
+    return {
+        type: actionTypes.CHANGE_TITLE,
+        title
+    }
+}
+
+export const changeIcon = (icon) => {
+    return {
+        type: actionTypes.CHANGE_ICON,
+        icon
+    }
+}

src/components/app/PartParams.js

@@ -2,6 +2,8 @@ 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 = () => (
     <div className="Qr-titled-nobg">
@@ -12,6 +14,8 @@ const PartParams = () => (
         <div className="Qr-Centered">
             <div className="Qr-div-table">
                 <ParamCorrectLevelViewer/>
+                <ParamTitleViewer/>
+                <ParamIconViewer/>
                 <ParamListViewer/>
             </div>
         </div>

src/components/param/FrameworkParam.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../Qrcode.css';
+
+const FrameworkParam = ({ paramName, children, ...other }) => (
+    <table className="Qr-table" {...other}>
+        <tbody>
+        <tr>
+            <td>{ paramName }</td>
+            <td>
+                { children }
+            </td>
+        </tr>
+        </tbody>
+    </table>
+)
+
+export default FrameworkParam;

src/components/param/ParamColor.js

@@ -42,7 +42,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
                         <div style={styles.cover} onClick={() => setDisplay(false)} />
                         <TwitterPicker
                             key={"input_" + rendererIndex + "_" + paramIndex}
-                            triangle="none"
+                            triangle="hide"
                             color={value}
                             colors={['#FF6900', '#FCB900', '#7BDCB5', '#00D084', '#8ED1FC', '#0693E3', '#ABB8C3', '#EB144C', '#F78DA7', '#9900EF']}
                             onChangeComplete={onChange}

src/components/param/ParamCorrectLevel.js

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types'
-import '../Qrcode.css';
-
-const ParamCorrectLevel = ({value, onChange}) => (
-    <table className="Qr-table">
-        <tbody>
-        <tr>
-            <td>容错率</td>
-            <td>
-                <select
-                    className="Qr-select"
-                    value={value}
-                    onChange={onChange}>
-                    <option value={1}>7%</option>
-                    <option value={0}>15%</option>
-                    <option value={3}>25%</option>
-                    <option value={2}>30%</option>
-                </select>
-            </td>
-        </tr>
-        </tbody>
-    </table>
-)
-
-ParamCorrectLevel.propTypes = {
-    value: PropTypes.number.isRequired,
-    onChange: PropTypes.func.isRequired
-}
-
-export default ParamCorrectLevel;

src/components/param/ParamList.js

@@ -6,6 +6,7 @@ import ParamSelectViewer from "../../containers/param/ParamSelectViewer";
 import ParamColorViewer from "../../containers/param/ParamColorViewer";
 import ParamUploadViewer from "../../containers/param/ParamUploadViewer";
 import ParamCheckBoxViewer from "../../containers/param/ParamCheckBoxViewer";
+import FrameworkParam from "./FrameworkParam";
 
 const mapTypeToComponent = ({
     [ParamTypes.TEXT_EDITOR]: ParamTextViewer,
@@ -18,19 +19,12 @@ const mapTypeToComponent = ({
 const ParamList = ({ rendererIndex, paramInfo }) => (
     paramInfo.map((item, paramIndex) => {
         return (
-            <table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
+            <FrameworkParam key={"tr_" + rendererIndex + "_" + paramIndex} paramName={item.key}>
-                <tbody>
-                    <tr>
-                        <td>{item.key}</td>
-                        <td>
                 {React.createElement(mapTypeToComponent[item.type], {
                     rendererIndex: rendererIndex,
                     paramIndex: paramIndex
                 })}
-                        </td>
+            </FrameworkParam>
-                    </tr>
-                </tbody>
-            </table>
         );
     })
 )

src/components/param/disposable/ParamCorrectLevel.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+
+const ParamCorrectLevel = ({value, onChange}) => (
+    <FrameworkParam paramName={"容错率"}>
+        <select
+            className="Qr-select"
+            value={value}
+            onChange={onChange}>
+            <option value={1}>7%</option>
+            <option value={0}>15%</option>
+            <option value={3}>25%</option>
+            <option value={2}>30%</option>
+        </select>
+    </FrameworkParam>
+)
+
+ParamCorrectLevel.propTypes = {
+    value: PropTypes.number.isRequired,
+    onChange: PropTypes.func.isRequired
+}
+
+export default ParamCorrectLevel;

src/components/param/disposable/ParamIcon.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+import {getExactValue} from "../../../utils/util";
+import ParamIconSrcViewer from "../../../containers/param/disposable/ParamIconSrcViewer";
+
+const IconParams = ({ icon, onChange }) => {
+    const { enabled, src, scale } = icon;
+    if (getExactValue(enabled, 0)) {
+        return (
+            <React.Fragment>
+                <FrameworkParam paramName={"图标源"}>
+                    <ParamIconSrcViewer icon={icon} onChange={onChange}/>
+                </FrameworkParam>
+                <FrameworkParam paramName={"图标缩放"}>
+                    <input
+                        type="number"
+                        className="Qr-input small-input"
+                        value={scale}
+                        onChange={(e) => onChange({...icon, scale: e.target.value})}
+                    />
+                </FrameworkParam>
+            </React.Fragment>
+        )
+    }
+    return null;
+}
+
+const ParamIcon = ({icon, onChange}) => (
+    <React.Fragment>
+        <FrameworkParam paramName={"启用图标"}>
+            <select
+                className="Qr-select"
+                value={icon.enabled}
+                onChange={(e) => onChange({...icon, enabled: e.target.value})}>
+                <option value={0}>否</option>
+                <option value={1}>是</option>
+            </select>
+        </FrameworkParam>
+        <IconParams icon={icon} onChange={onChange}/>
+    </React.Fragment>
+)
+
+ParamIcon.propTypes = {
+    icon: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired
+}
+
+export default ParamIcon;

src/components/param/disposable/ParamTitle.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types'
+import '../../Qrcode.css';
+import FrameworkParam from "../FrameworkParam";
+import {getExactValue} from "../../../utils/util";
+import ParamTitleColorViewer from "../../../containers/param/disposable/ParamTitleColorViewer";
+
+const TitleParams = ({ title, onChange }) => {
+    const { enabled, text, color, size, align } = title;
+    if (getExactValue(enabled, 0)) {
+        return (
+            <React.Fragment>
+                <FrameworkParam paramName={"标题内容"}>
+                    <input
+                        type="text"
+                        className="Qr-input small-input"
+                        value={text}
+                        onChange={(e) => onChange({...title, text: e.target.value})}
+                    />
+                </FrameworkParam>
+                <FrameworkParam paramName={"标题颜色"}>
+                    <ParamTitleColorViewer title={title} onChange={onChange}/>
+                </FrameworkParam>
+                <FrameworkParam paramName={"标题大小"}>
+                    <input
+                        type="number"
+                        className="Qr-input small-input"
+                        value={size}
+                        onChange={(e) => onChange({...title, size: e.target.value})}
+                    />
+                </FrameworkParam>
+                <FrameworkParam paramName={"标题对齐"}>
+                    <select
+                        className="Qr-select"
+                        value={title.align}
+                        onChange={(e) => onChange({...title, align: e.target.value})}>
+                        <option value={"middle"}>中间</option>
+                        <option value={"bottom"}>底部</option>
+                    </select>
+                </FrameworkParam>
+            </React.Fragment>
+        )
+    }
+    return null;
+}
+
+const ParamTitle = ({title, onChange}) => (
+    <React.Fragment>
+        <FrameworkParam paramName={"启用标题"}>
+            <select
+                className="Qr-select"
+                value={title.enabled}
+                onChange={(e) => onChange({...title, enabled: e.target.value})}>
+                <option value={0}>否</option>
+                <option value={1}>是</option>
+            </select>
+        </FrameworkParam>
+        <TitleParams title={title} onChange={onChange}/>
+    </React.Fragment>
+)
+
+ParamTitle.propTypes = {
+    title: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired
+}
+
+export default ParamTitle;

src/components/renderer/RendererFunc.js

@@ -13,7 +13,6 @@ function listPoints(qrcode, params) {
     let type = params[0];
     let size = params[1] / 100;
     let funcType = params[1];
-    let opacity = params[2] / 100;
     let posType = params[3];
     let id = 0;
     let otherColor = params[4];

src/components/style/Renderer.js

@@ -1,5 +1,5 @@
 import React, {useEffect} from "react";
-import {extend} from "../../utils/util";
+import {extend, getExactValue} from "../../utils/util";
 
 const Renderer = ({ rendererType, ...other }) => (
     React.createElement(rendererType, other)
@@ -9,24 +9,72 @@ function areEqual(prevProps, nextProps) {
     return !(prevProps.selected === true || nextProps.selected === true)
 }
 
-export function createRenderer(renderer) {
+let defaultViewBox = function (qrcode) {
-    let defaultViewBox = function (qrcode) {
     if (!qrcode) return '0 0 0 0';
 
     const nCount = qrcode.getModuleCount();
     return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
+}
+
+let drawIcon = function (qrcode, 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) {
+        pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
+    }
+
+    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 fontY = titleVerticalAlign === "middle"
+            ? (icon ? (iconXY + iconSize) : (nCount / 2 + titleFontSize * .5))
+            : Number(nCount + nCount / 5) - titleFontSize * .5;
+
+        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 }) => {},
-        afterListing: ({ qrcode, params, setParamInfo }) => {},
     }, renderer);
 
-    return ({ qrcode, params, setParamInfo}) => {
+    return ({ qrcode, params, title, icon, setParamInfo}) => {
         useEffect(() => {
             setParamInfo(renderer.getParamInfo());
         }, [setParamInfo]);
@@ -37,7 +85,7 @@ 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)}
-                {renderer.afterListing({ qrcode, params, setParamInfo })}
+                {drawIcon(qrcode, title, icon)}
             </svg>
         );
     }

src/constant/ActionTypes.js

@@ -5,4 +5,6 @@ export const actionTypes = {
     CREATE_PARAM: 'CREATE_PARAM',
     CHANGE_PARAM: 'CHANGE_PARAM',
     LOAD_DOWNLOAD_DATA: 'LOAD_DOWNLOAD_DATA',
+    CHANGE_TITLE: 'CHANGE_TITLE',
+    CHANGE_ICON: 'CHANGE_ICON'
 }

src/containers/param/ParamCorrectLevelViewer.js

@@ -1,5 +1,5 @@
 import {changeCorrectLevel} from "../../actions";
-import ParamCorrectLevel from "../../components/param/ParamCorrectLevel";
+import ParamCorrectLevel from "../../components/param/disposable/ParamCorrectLevel";
 import {connect} from "react-redux";
 
 const mapStateToProps = (state) => ({

src/containers/param/disposable/ParamIconSrcViewer.js

@@ -0,0 +1,23 @@
+import { connect } from 'react-redux';
+import {isPicture, toBase64} from "../../../utils/imageUtils";
+import ParamUpload from "../../../components/param/ParamUpload";
+
+const mapStateToProps = (state, ownProps) => ({
+    rendererIndex: -1,
+    paramIndex: -1,
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: (e) => {
+        if (e.target.files.length > 0) {
+            const file = e.target.files[0];
+            if (isPicture(file)) {
+                toBase64(file, 1.0).then(res => {
+                    ownProps.onChange({ ...ownProps.icon, src: res})
+                })
+            }
+        }
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamUpload);

src/containers/param/disposable/ParamIconViewer.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import ParamIcon from "../../../components/param/disposable/ParamIcon";
+import {changeIcon} from "../../../actions";
+
+const mapStateToProps = (state, ownProps) => ({
+    icon: state.icon
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: (icon) => {
+        dispatch(changeIcon(icon))
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamIcon);

src/containers/param/disposable/ParamTitleColorViewer.js

@@ -0,0 +1,16 @@
+import { connect } from 'react-redux';
+import ParamColor from "../../../components/param/ParamColor";
+
+const mapStateToProps = (state, ownProps) => ({
+    rendererIndex: -1,
+    paramIndex: -1,
+    value: state.title.color
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: (color) => {
+        ownProps.onChange({ ...ownProps.title, color: color.hex })
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamColor);

src/containers/param/disposable/ParamTitleViewer.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import ParamTitle from "../../../components/param/disposable/ParamTitle";
+import {changeTitle} from "../../../actions";
+
+const mapStateToProps = (state, ownProps) => ({
+    title: state.title
+})
+
+const mapDispatchToProps = (dispatch, ownProps) => ({
+    onChange: (title) => {
+        dispatch(changeTitle(title))
+    }
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(ParamTitle);

src/containers/style/RendererViewer.js

@@ -7,6 +7,8 @@ const mapStateToProps = (state, ownProps) => ({
     rendererIndex: ownProps.index,
     qrcode: state.qrcode,
     params: fillEmptyWith(state.paramValue[ownProps.index].slice(), 0),
+    title: state.title,
+    icon: state.icon,
     selected: state.selectedIndex === ownProps.index,
 })
 

src/reducers/index.js

@@ -13,6 +13,8 @@ const initialState = {
     history: [],
     downloadData: [],
     qrcode: encodeData({text: QRBTF_URL, correctLevel: 0}),
+    icon: { enabled: 0, src: '', scale: 0.33 },
+    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))
 }
@@ -65,6 +67,16 @@ export default function appReducer(state = initialState, action) {
                 downloadData: action.data
             });
         }
+        case actionTypes.CHANGE_TITLE: {
+            return Object.assign({}, state, {
+                title: Object.assign({}, state.title, action.title)
+            });
+        }
+        case actionTypes.CHANGE_ICON: {
+            return Object.assign({}, state, {
+                icon: Object.assign({}, state.icon, action.icon)
+            });
+        }
         default: return state
     }
 }