新增样式 C3
This commit is contained in:
parent
1bfebf0e95
commit
aa74af6175
|
@ -51,7 +51,7 @@ const PartMore = () => {
|
|||
</ScrollContainer>
|
||||
<div className="Qr-Centered">
|
||||
<h2>最新消息</h2>
|
||||
<p><b>2020.9.1</b><br/>新增图标插入、 PNG 下载。</p>
|
||||
<p><b>2020.9.1</b><br/>新增 C3 样式、图标插入、 PNG 下载。</p>
|
||||
<p><b>2020.6.29</b><br/>新的反馈渠道!我们开始征集好玩的二维码设计啦,可以是推送尾图、海报等等,快来上传吧。<LinkTrace
|
||||
href='https://qrbtf-com.mikecrm.com/J2wjEEq' rel="noopener noreferrer"
|
||||
target="_blank">点击提交</LinkTrace>。</p>
|
||||
|
|
|
@ -0,0 +1,62 @@
|
|||
import React from "react";
|
||||
import {ParamTypes} from "../../constant/ParamTypes";
|
||||
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
|
||||
import {createRenderer} from "../style/Renderer";
|
||||
import {defaultImage} from "../../constant/References";
|
||||
|
||||
function listPoints({ qrcode, params, icon }) {
|
||||
if (!qrcode) return []
|
||||
|
||||
const nCount = qrcode.getModuleCount();
|
||||
const typeTable = getTypeTable(qrcode);
|
||||
const pointList = new Array(nCount);
|
||||
|
||||
let color = params[1];
|
||||
let opacity = params[2] / 100;
|
||||
let id = 0;
|
||||
|
||||
pointList.push(<image key={id++} x="-0.01" y="-0.01" width={nCount + 0.02} height={nCount + 0.02} xlinkHref={params[0]}/>);
|
||||
pointList.push(<rect key={id++} x="-0.01" y="-0.01" width={nCount + 0.02} height={nCount + 0.02} fill={color} opacity={opacity}/>);
|
||||
|
||||
for (let x = 0; x < nCount; x++) {
|
||||
for (let y = 0; y < nCount; y++) {
|
||||
if (!qrcode.isDark(x, y)) {
|
||||
pointList.push(<rect width={1.02} height={1.02} key={id++} fill="#FFF" x={x - 0.01} y={y - 0.01}/>);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return pointList;
|
||||
}
|
||||
|
||||
function getParamInfo() {
|
||||
return [
|
||||
{
|
||||
type: ParamTypes.UPLOAD_BUTTON,
|
||||
key: '背景图片',
|
||||
default: defaultImage,
|
||||
},
|
||||
{
|
||||
type: ParamTypes.COLOR_EDITOR,
|
||||
key: '覆盖颜色',
|
||||
default: '#000000'
|
||||
},
|
||||
{
|
||||
type: ParamTypes.TEXT_EDITOR,
|
||||
key: '覆盖不透明度',
|
||||
default: 10,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
const RendererImageFill = createRenderer({
|
||||
listPoints: listPoints,
|
||||
getParamInfo: getParamInfo,
|
||||
})
|
||||
|
||||
|
||||
export default RendererImageFill
|
||||
|
||||
RendererImageFill.detail = (
|
||||
<div>图像填充</div>
|
||||
);
|
File diff suppressed because one or more lines are too long
|
@ -12,6 +12,7 @@ import { RendererRandRound, RendererRect, RendererRound } from "../../components
|
|||
import { RendererLine, RendererLine2 } from "../../components/renderer/RendererLine";
|
||||
import { RendererFuncA, RendererFuncB } from "../../components/renderer/RendererFunc";
|
||||
import * as React from "react";
|
||||
import RendererImageFill from "../../components/renderer/RendererImageFill";
|
||||
|
||||
const styles = [
|
||||
{value: "A1", renderer: RendererRect},
|
||||
|
@ -23,6 +24,7 @@ const styles = [
|
|||
{value: "A3", renderer: RendererRandRound},
|
||||
{value: "A — b2", renderer: RendererFuncB},
|
||||
{value: "C1", renderer: RendererImage},
|
||||
{value: "C3", renderer: RendererImageFill},
|
||||
{value: "B1", renderer: Renderer25D},
|
||||
{value: "A — a2", renderer: RendererLine2},
|
||||
{value: "A — b1", renderer: RendererFuncA},
|
||||
|
|
Loading…
Reference in New Issue