remove title
This commit is contained in:
CPunisher
parent
bcb51debde
commit
38d2e779b6
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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={1}>是</option>
|
||||
<option value={0}>无</option>
|
||||
<option value={1}>微信</option>
|
||||
<option value={2}>支付宝</option>
|
||||
<option value={3}>自定义</option>
|
||||
</select>
|
||||
</FrameworkParam>
|
||||
<IconParams icon={icon} onChange={onChange}/>
|
||||
|
|
|
|||
|
|
@ -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(<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 = (
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
|
||||
}
|
||||
// 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 key={id++} x={nCount / 2} y={fontY} fill={titleFontColor} style={{ ...titleStyle, fontSize: titleFontSize }} textAnchor="middle">{text}</text>)
|
||||
if (icon && iconEnabled) {
|
||||
pointList.push(<rect key={id++} width={iconSize} height={iconSize} rx="2" ry="2" fill="#FFFFFF" x={iconXY} y={iconXY} />);
|
||||
pointList.push(<image key={id++} xlinkHref={src} width={iconSize - 2} x={iconXY + 1} y={iconXY + 1} />);
|
||||
}
|
||||
}
|
||||
|
||||
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 }
|
||||
|
|
|
|||
Loading…
Reference in New Issue