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

丰富 base 样式选项

This commit is contained in:
ciaochaos 2020-05-05 15:11:00 +08:00
parent 358e9c08ee
commit 3e54220e03
2 changed files with 64 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/QrRendererBase.js
View File

@ -1,29 +1,57 @@
import React from "react"; import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {rand} from "../utils/util";
function listPoint(props) { function listPoint(props) {
if (!props.qrcode) return [] if (!props.qrcode) return []
const qrcode = props.qrcode; const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount(); const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = new Array(nCount); const pointList = new Array(nCount);
let type = props.params[1]; let type = props.params[0];
let size = props.params[0] / 100; let size = props.params[1] / 100;
let opacity = props.params[2] / 100;
let posType = props.params[3];
let id = 0; let id = 0;
console.log(posType)
if (size <= 0) size = 1.0 if (size <= 0) size = 1.0
for (let row = 0; row < nCount; row++) { for (let x = 0; x < nCount; x++) {
for (let col = 0; col < nCount; col++) { for (let y = 0; y < nCount; y++) {
if (qrcode.isDark(row, col)) { 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 (type == 0) if (type == 0)
pointList.push(<rect width={size} height={size} key={id++} fill="black" x={row + (1 - size)/2} y={col + (1 - size)/2}/>) pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
else if (type == 1) else if (type == 1)
pointList.push(<circle r={size / 2} key={id++} fill="black" cx={row + 0.5} cy={col + 0.5}/>) pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
}
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
} 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="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
}
}
else if (typeTable[x][y] == QRPointType.POS_OTHER) {
if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
}
}
else {
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}/>)
else if (type == 1)
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
} }
} }
} }
return pointList; return pointList;
} }
@ -39,18 +67,30 @@ class QrRendererBase extends React.Component {
super(props); super(props);
if (this.props.setParamInfo) { if (this.props.setParamInfo) {
this.props.setParamInfo([ this.props.setParamInfo([
{ {
key: '大小', key: '信息点样式',
default: 100 default: 0,
}, choices: [
{ "矩形",
key: '定位点样式', "圆形"
default: 0, ]
choices: [ },
"矩形", {
"圆形" key: '信息点缩放',
] default: 100
} },
{
key: '信息点不透明度',
default: 100,
},
{
key: '定位点样式',
default: 0,
choices: [
"矩形",
"圆形"
]
},
] ]
); );
} }

5
src/components/Qrcode.css
View File

@ -384,4 +384,9 @@ a:hover {
color: #1D1D1F; color: #1D1D1F;
font-size: 14px; font-size: 14px;
} }
}
select {
padding: 0;
background-color: #FFFFFF;
} }