Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

颜色参数全范围添加

This commit is contained in:
ciaochaos 2020-05-15 18:10:55 +08:00
parent 9dad384580
commit 3551e2c462
6 changed files with 132 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/renderer/Renderer25D.js
View File

@ -14,6 +14,9 @@ function listPoints(qrcode, params) {
let size2 = 1.001; let size2 = 1.001;
let height = params[0]; let height = params[0];
let height2 = params[1]; let height2 = params[1];
let upColor = params[2];
let leftColor = params[3];
let rightColor = params[4];
let id = 0; let id = 0;
const X = [-Math.sqrt(3)/2, 1/2]; const X = [-Math.sqrt(3)/2, 1/2];
@ -29,14 +32,14 @@ function listPoints(qrcode, params) {
for (let y = 0; y < nCount; y++) { for (let y = 0; y < nCount; y++) {
if (qrcode.isDark(x, y) == false) continue; if (qrcode.isDark(x, y) == false) continue;
else if (typeTable[x][y] == QRPointType.POS_OTHER || typeTable[x][y] == QRPointType.POS_CENTER) { else if (typeTable[x][y] == QRPointType.POS_OTHER || typeTable[x][y] == QRPointType.POS_CENTER) {
pointList.push(<rect width={size2} height={size2} key={id++} fill="#FF7F89" x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>); pointList.push(<rect width={size2} height={size2} key={id++} fill={upColor} x={x + (1 - size2)/2} y={y + (1 - size2)/2} transform={matrixString}/>);
pointList.push(<rect width={height2} height={size2} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>); pointList.push(<rect width={height2} height={size2} key={id++} fill={leftColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2 + size2)+','+String(y + (1 - size2)/2)+') '+'skewY(45) '}/>);
pointList.push(<rect width={size2} height={height2} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>); pointList.push(<rect width={size2} height={height2} key={id++} fill={rightColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size2)/2)+','+String(y + size2 + (1 - size2)/2)+') '+'skewX(45) '}/>);
} }
else { else {
pointList.push(<rect width={size} height={size} key={id++} fill="#FF7F89" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>); pointList.push(<rect width={size} height={size} key={id++} fill={upColor} x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
pointList.push(<rect width={height} height={size} key={id++} fill="#FFEBF3" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>); pointList.push(<rect width={height} height={size} key={id++} fill={leftColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2 + size)+','+String(y + (1 - size)/2)+') '+'skewY(45) '}/>);
pointList.push(<rect width={size} height={height} key={id++} fill="#FFD7D9" x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>); pointList.push(<rect width={size} height={height} key={id++} fill={rightColor} x={0} y={0} transform={matrixString+'translate('+String(x + (1 - size)/2)+','+String(y + size + (1 - size)/2)+') '+'skewX(45) '}/>);
} }
} }
} }
@ -56,6 +59,21 @@ function getParamInfo() {
key: '定位点柱体高度', key: '定位点柱体高度',
default: 0.5, default: 0.5,
}, },
{
type: ParamTypes.COLOR_EDITOR,
key: '上侧颜色',
default: '#FF7F89'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '左侧颜色',
default: '#FFD7D9'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '右侧颜色',
default: '#FFEBF3'
},
]; ];
} }

4
src/components/renderer/RendererBase.js
View File

@ -40,10 +40,10 @@ function listPoints(qrcode, params) {
pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} else if (posType == 1) { } else if (posType == 1) {
pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill={posColor} strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
} else if (posType == 2) { } else if (posType == 2) {
pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
for (let w = 0; w < vw.length; w++) { for (let w = 0; w < vw.length; w++) {
pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
} }

18
src/components/renderer/RendererDSJ.js
View File

@ -14,7 +14,8 @@ function listPoints(qrcode, params) {
let width2 = params[0] / 100; let width2 = params[0] / 100;
let width1 = params[1] / 100; let width1 = params[1] / 100;
let posType = params[2]; let width3 = params[2] / 100;
let posType = params[3];
let id = 0; let id = 0;
if (width2 <= 0) width2 = 70; if (width2 <= 0) width2 = 70;
@ -39,11 +40,11 @@ function listPoints(qrcode, params) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="#0B2D97" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill="#0B2D97" x={x} y={y}/>);
} else if (posType == 1) { } else if (posType == 1) {
pointList.push(<rect width={3 - (1 - width2)} height={3 - (1 - width2)} key={id++} fill="#0B2D97" x={x - 1 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>); pointList.push(<rect width={3 - (1 - width3)} height={3 - (1 - width3)} key={id++} fill="#0B2D97" x={x - 1 + (1 - width3)/2} y={y - 1 + (1 - width3)/2}/>);
pointList.push(<rect width={width2} height={3 - (1 - width2)} key={id++} fill="#0B2D97" x={x - 3 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>); pointList.push(<rect width={width3} height={3 - (1 - width3)} key={id++} fill="#0B2D97" x={x - 3 + (1 - width3)/2} y={y - 1 + (1 - width3)/2}/>);
pointList.push(<rect width={width2} height={3 - (1 - width2)} key={id++} fill="#0B2D97" x={x + 3 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>); pointList.push(<rect width={width3} height={3 - (1 - width3)} key={id++} fill="#0B2D97" x={x + 3 + (1 - width3)/2} y={y - 1 + (1 - width3)/2}/>);
pointList.push(<rect width={3 - (1 - width2)} height={width2} key={id++} fill="#0B2D97" x={x - 1 + (1 - width2)/2} y={y - 3 + (1 - width2)/2}/>); pointList.push(<rect width={3 - (1 - width3)} height={width3} key={id++} fill="#0B2D97" x={x - 1 + (1 - width3)/2} y={y - 3 + (1 - width3)/2}/>);
pointList.push(<rect width={3 - (1 - width2)} height={width2} key={id++} fill="#0B2D97" x={x - 1 + (1 - width2)/2} y={y + 3 + (1 - width2)/2}/>); pointList.push(<rect width={3 - (1 - width3)} height={width3} key={id++} fill="#0B2D97" x={x - 1 + (1 - width3)/2} y={y + 3 + (1 - width3)/2}/>);
} }
} }
else if (typeTable[x][y] == QRPointType.POS_OTHER) { else if (typeTable[x][y] == QRPointType.POS_OTHER) {
@ -170,6 +171,11 @@ function getParamInfo() {
key: 'x 宽度', key: 'x 宽度',
default: 70, default: 70,
}, },
{
type: ParamTypes.TEXT_EDITOR,
key: '定位点宽度',
default: 90,
},
{ {
type: ParamTypes.SELECTOR, type: ParamTypes.SELECTOR,
key: '定位点样式', key: '定位点样式',

52
src/components/renderer/RendererImage.js
View File

@ -13,7 +13,10 @@ function listPoints(qrcode, params) {
let type = params[1]; let type = params[1];
let size = params[2] / 100 / 3; let size = params[2] / 100 / 3;
let opacity = params[3] / 100; let opacity = params[3] / 100;
let posType = params[4]; let otherColorDark = params[4];
let otherColorLight = params[5];
let posType = params[6];
let posColor = params[7];
let id = 0; let id = 0;
const vw = [3, -3]; const vw = [3, -3];
@ -29,33 +32,33 @@ function listPoints(qrcode, params) {
if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) { if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
if (qrcode.isDark(x, y)) { if (qrcode.isDark(x, y)) {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorDark} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorDark} cx={x + 0.5} cy={y + 0.5}/>)
} else { } else {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorLight} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="white" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorLight} cx={x + 0.5} cy={y + 0.5}/>)
} }
} }
else if (typeTable[x][y] == QRPointType.POS_CENTER) { else if (typeTable[x][y] == QRPointType.POS_CENTER) {
if (qrcode.isDark(x, y)) { if (qrcode.isDark(x, y)) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} else if (posType == 1) { } else if (posType == 1) {
pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />) pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
} else if (posType == 2) { } else if (posType == 2) {
pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />) pointList.push(<circle key={id++} fill="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
for (let w = 0; w < vw.length; w++) { for (let w = 0; w < vw.length; w++) {
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
} }
for (let h = 0; h < vh.length; h++) { for (let h = 0; h < vh.length; h++) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
} }
} }
} }
@ -64,7 +67,7 @@ function listPoints(qrcode, params) {
else if (typeTable[x][y] == QRPointType.POS_OTHER) { else if (typeTable[x][y] == QRPointType.POS_OTHER) {
if (qrcode.isDark(x, y)) { if (qrcode.isDark(x, y)) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} }
} else { } else {
if (posType == 0) { if (posType == 0) {
@ -76,14 +79,14 @@ function listPoints(qrcode, params) {
else { else {
if (qrcode.isDark(x, y)) { if (qrcode.isDark(x, y)) {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorDark} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorDark} cx={x + 0.5} cy={y + 0.5}/>)
} else { } else {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColorLight} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="white" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColorLight} cx={x + 0.5} cy={y + 0.5}/>)
} }
} }
@ -119,6 +122,16 @@ function getParamInfo() {
key: '信息点不透明度', key: '信息点不透明度',
default: 100, default: 100,
}, },
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点深色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点浅色',
default: '#FFFFFF'
},
{ {
type: ParamTypes.SELECTOR, type: ParamTypes.SELECTOR,
key: '定位点样式', key: '定位点样式',
@ -129,6 +142,11 @@ function getParamInfo() {
"行星", "行星",
] ]
}, },
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点颜色',
default: '#000000'
},
]; ];
} }

44
src/components/renderer/RendererRandRound.js
View File

@ -15,6 +15,8 @@ function listPoints(qrcode, params) {
let opacity = params[2] / 100; let opacity = params[2] / 100;
let posType = params[3]; let posType = params[3];
let id = 0; let id = 0;
let otherColor = params[4];
let posColor = params[5];
const vw = [3, -3]; const vw = [3, -3];
const vh = [3, -3]; const vh = [3, -3];
@ -27,41 +29,41 @@ function listPoints(qrcode, params) {
if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) { if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 2) else if (type == 2)
pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />) pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
} }
else if (typeTable[x][y] == QRPointType.POS_CENTER) { else if (typeTable[x][y] == QRPointType.POS_CENTER) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} else if (posType == 1) { } else if (posType == 1) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
} else if (posType == 2) { } else if (posType == 2) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
for (let w = 0; w < vw.length; w++) { for (let w = 0; w < vw.length; w++) {
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
} }
for (let h = 0; h < vh.length; h++) { for (let h = 0; h < vh.length; h++) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
} }
} }
} }
else if (typeTable[x][y] == QRPointType.POS_OTHER) { else if (typeTable[x][y] == QRPointType.POS_OTHER) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} }
} }
else { else {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 2) else if (type == 2)
pointList.push(<circle opacity={opacity} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />) pointList.push(<circle opacity={opacity} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
} }
} }
} }
@ -101,10 +103,20 @@ function getParamInfo() {
"行星", "行星",
] ]
}, },
{
type: ParamTypes.COLOR_EDITOR,
key: '信息点颜色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点点颜色',
default: '#000000'
}
]; ];
} }
const RendererRandRound = ({ qrcode, params, setParamInfo}) => { const RendererBase = ({ qrcode, params, setParamInfo}) => {
useEffect(() => { useEffect(() => {
setParamInfo(getParamInfo()); setParamInfo(getParamInfo());
}, [setParamInfo]); }, [setParamInfo]);
@ -117,4 +129,4 @@ const RendererRandRound = ({ qrcode, params, setParamInfo}) => {
) )
} }
export default RendererRandRound export default RendererBase

50
src/components/renderer/RendererRound.js
View File

@ -15,6 +15,8 @@ function listPoints(qrcode, params) {
let opacity = params[2] / 100; let opacity = params[2] / 100;
let posType = params[3]; let posType = params[3];
let id = 0; let id = 0;
let otherColor = params[4];
let posColor = params[5];
const vw = [3, -3]; const vw = [3, -3];
const vh = [3, -3]; const vh = [3, -3];
@ -23,45 +25,45 @@ function listPoints(qrcode, params) {
for (let x = 0; x < nCount; x++) { for (let x = 0; x < nCount; x++) {
for (let y = 0; y < nCount; y++) { for (let y = 0; y < nCount; y++) {
if (qrcode.isDark(x, y) === false) continue; if (qrcode.isDark(x, y) == false) continue;
if (typeTable[x][y] === QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) { if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 2) else if (type == 2)
pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />) pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
} }
else if (typeTable[x][y] == QRPointType.POS_CENTER) { else if (typeTable[x][y] == QRPointType.POS_CENTER) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} else if (posType == 1) { } else if (posType == 1) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
} else if (posType == 2) { } else if (posType == 2) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />) pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor} cx={x + 0.5} cy={y + 0.5} r={3} />)
for (let w = 0; w < vw.length; w++) { for (let w = 0; w < vw.length; w++) {
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
} }
for (let h = 0; h < vh.length; h++) { for (let h = 0; h < vh.length; h++) {
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />) pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
} }
} }
} }
else if (typeTable[x][y] == QRPointType.POS_OTHER) { else if (typeTable[x][y] == QRPointType.POS_OTHER) {
if (posType == 0) { if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>); pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
} }
} }
else { else {
if (type == 0) if (type == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
else if (type == 2) else if (type == 2)
pointList.push(<circle opacity={opacity} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />) pointList.push(<circle opacity={opacity} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
} }
} }
} }
@ -101,10 +103,20 @@ function getParamInfo() {
"行星", "行星",
] ]
}, },
] {
type: ParamTypes.COLOR_EDITOR,
key: '信息点颜色',
default: '#000000'
},
{
type: ParamTypes.COLOR_EDITOR,
key: '定位点点颜色',
default: '#000000'
}
];
} }
const RendererRound = ({ qrcode, params, setParamInfo}) => { const RendererBase = ({ qrcode, params, setParamInfo}) => {
useEffect(() => { useEffect(() => {
setParamInfo(getParamInfo()); setParamInfo(getParamInfo());
}, [setParamInfo]); }, [setParamInfo]);
@ -117,4 +129,4 @@ const RendererRound = ({ qrcode, params, setParamInfo}) => {
) )
} }
export default RendererRound export default RendererBase