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

新样式

This commit is contained in:
ciaochaos 2020-05-06 13:41:33 +08:00
parent c2de38fb3f
commit 3a881918eb
3 changed files with 199 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
src/components/QrRendererDSJ.js Normal file
View File

@ -0,0 +1,192 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
const qrcode = props.qrcode;
const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);
const pointList = [];
const g1 = [];
const g2 = [];
let width2 = props.params[0] / 100;
let width1 = props.params[1] / 100;
let posType = props.params[2];
let id = 0;
if (width2 <= 0) width2 = 80;
let available = [];
let ava2 = [];
for (let x = 0; x < nCount; x++) {
available[x] = [];
ava2[x] = [];
for (let y = 0; y < nCount; y++) {
available[x][y] = true;
ava2[x][y] = true;
}
}
for (let y = 0; y < nCount; y++) {
for (let x = 0; x < nCount; x++) {
if (qrcode.isDark(x, y) == false) continue;
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="#021B6A" x={x} y={y}/>);
} else if (posType == 1) {
pointList.push(<rect width={3 - (1 - width2)} height={3 - (1 - width2)} key={id++} fill="#021B6A" x={x - 1 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>);
pointList.push(<rect width={width2} height={3 - (1 - width2)} key={id++} fill="#021B6A" x={x - 3 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>);
pointList.push(<rect width={width2} height={3 - (1 - width2)} key={id++} fill="#021B6A" x={x + 3 + (1 - width2)/2} y={y - 1 + (1 - width2)/2}/>);
pointList.push(<rect width={3 - (1 - width2)} height={width2} key={id++} fill="#021B6A" x={x - 1 + (1 - width2)/2} y={y - 3 + (1 - width2)/2}/>);
pointList.push(<rect width={3 - (1 - width2)} height={width2} key={id++} fill="#021B6A" x={x - 1 + (1 - width2)/2} y={y + 3 + (1 - width2)/2}/>);
}
}
else if (typeTable[x][y] == QRPointType.POS_OTHER) {
if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="#021B6A" x={x} y={y}/>);
}
}
else {
if (available[x][y] && ava2[x][y] && x < nCount - 2 && y < nCount - 2) {
let ctn = true;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (ava2[x + i][y + j] === false) {
ctn = false;
}
}
}
if (ctn && qrcode.isDark(x + 2, y) && qrcode.isDark(x + 1, y + 1) && qrcode.isDark(x, y + 2) && qrcode.isDark(x + 2, y + 2)) {
g1.push(<line key={id++} x1={x + width1 / Math.sqrt(8)} y1={y + width1 / Math.sqrt(8)} x2={x + 3 - width1 / Math.sqrt(8)} y2={y + 3 - width1 / Math.sqrt(8)} fill="none" stroke="#021B6A" strokeWidth={width1} />)
g1.push(<line key={id++} x1={x + 3 - width1 / Math.sqrt(8)} y1={y + width1 / Math.sqrt(8)} x2={x + width1 / Math.sqrt(8)} y2={y + 3 - width1 / Math.sqrt(8)} fill="none" stroke="#021B6A" strokeWidth={width1} />)
available[x][y] = false;
available[x + 2][y] = false;
available[x][y + 2] = false;
available[x + 2][y + 2] = false;
available[x + 1][y + 1] = false;
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
ava2[x + i][y + j] = false;
}
}
}
}
if (available[x][y] && ava2[x][y] && x < nCount - 1 && y < nCount - 1) {
let ctn = true;
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
if (ava2[x + i][y + j] === false) {
ctn = false;
}
}
}
if (ctn && qrcode.isDark(x + 1, y) && qrcode.isDark(x, y + 1) && qrcode.isDark(x + 1, y + 1)) {
g1.push(<line key={id++} x1={x + width1 / Math.sqrt(8)} y1={y + width1 / Math.sqrt(8)} x2={x + 2 - width1 / Math.sqrt(8)} y2={y + 2 - width1 / Math.sqrt(8)} fill="none" stroke="#021B6A" strokeWidth={width1} />)
g1.push(<line key={id++} x1={x + 2 - width1 / Math.sqrt(8)} y1={y + width1 / Math.sqrt(8)} x2={x + width1 / Math.sqrt(8)} y2={y + 2 - width1 / Math.sqrt(8)} fill="none" stroke="#021B6A" strokeWidth={width1} />)
for (let i = 0; i < 2; i++) {
for (let j = 0; j < 2; j++) {
available[x + i][y + j] = false;
ava2[x + i][y + j] = false;
}
}
}
}
if (available[x][y] && ava2[x][y]) {
if (y === 0 || (y > 0 && (!qrcode.isDark(x, y - 1) || !ava2[x][y - 1]))) {
let start = y;
let end = y;
let ctn = true;
while (ctn && end < nCount) {
if (qrcode.isDark(x, end) && ava2[x][end]) {
end++;
} else {
ctn = false;
}
}
if (end - start > 2) {
for (let i = start; i < end; i++) {
ava2[x][i] = false;
available[x][i] = false;
}
g2.push(<rect width={width2} height={end - start - 1 - (1 - width2)} key={id++} fill="#B71814" x={x + (1 - width2)/2} y={y + (1 - width2)/2}/>)
g2.push(<rect width={width2} height={width2} key={id++} fill="#B71814" x={x + (1 - width2)/2} y={end - 1 + (1 - width2)/2}/>)
}
}
}
if (available[x][y] && ava2[x][y]) {
if (x === 0 || (x > 0 && (!qrcode.isDark(x - 1, y) || !ava2[x - 1][y]))) {
let start = x;
let end = x;
let ctn = true;
while (ctn && end < nCount) {
if (qrcode.isDark(end, y) && ava2[end][y]) {
end++;
} else {
ctn = false;
}
}
if (end - start > 1) {
for (let i = start; i < end; i++) {
ava2[i][y] = false;
available[i][y] = false;
}
g2.push(<rect width={end - start - (1 - width2)} height={width2} key={id++} fill="#F1A11A" x={x + (1 - width2)/2} y={y + (1 - width2)/2}/>)
}
}
}
if (available[x][y]) {
pointList.push(<rect width={width2} height={width2} key={id++} fill="#F1A11A" x={x + (1 - width2)/2} y={y + (1 - width2)/2}/>)
}
}
}
}
for (let i = 0; i < g1.length; i++) {
pointList.push(g1[i]);
}
for (let i = 0; i < g2.length; i++) {
pointList.push(g2[i]);
}
return pointList;
}
class QrRendererDSJ extends React.Component {
constructor(props) {
super(props);
if (this.props.setParamInfo) {
this.props.setParamInfo([
{
key: '信息点缩放',
default: 80,
},
{
key: 'x 宽度',
default: 70,
},
{
key: '定位点样式',
default: 1,
choices: [
"矩形",
"默认",
]
},
]
);
}
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
}
export default QrRendererDSJ

10
src/components/Qrcode.css
View File

@ -105,7 +105,7 @@
}
.Qr-item-image-inner {
opacity: 0.36;
opacity: 0.8;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
@ -331,11 +331,10 @@ input[type="number"]{
.dl-btn {
cursor: pointer;
float: left;
font-size: 1em;
line-height: 1em;
font-size: 0.9em;
line-height: 2em;
margin: 0;
width: calc((100vw - 56px) / 2);
height: 2em;
border-radius: 3em;
outline: none;
padding: 0;
@ -359,7 +358,7 @@ input[type="number"]{
@media (min-width: 500px) {
.dl-btn {
border: rgba(0,0,0,0.12) solid 3px;
font-size: 0.9em;
font-size: 0.8em;
}
}
@ -392,7 +391,6 @@ input[type="number"]{
.dl-btn {
width: 200px;
height: 2em;
}
}

5
src/components/Qrcode.js
View File

@ -14,6 +14,7 @@ import QrRendererRound from "./QrRendererRound";
import QrRendererRandRound from "./QrRendererRandRound";
import QrRendererBlank from "./QrRendererBlank";
import QrRendererRandRect from "./QrRendererRandRect";
import QrRendererDSJ from "./QrRendererDSJ";
const logoStyle = {
background: `url(${logo})`,
@ -25,8 +26,8 @@ const styleList = [
{value: "A1", renderer: QrRendererBase},
{value: "A2", renderer: QrRendererRound},
{value: "A3", renderer: QrRendererRandRound},
{value: "B1", renderer: QrRendererRandRect},
{value: "C1", renderer: QrRendererBlank},
{value: "SP — 1", renderer: QrRendererDSJ},
{value: "SP — 2", renderer: QrRendererRandRect},
{value: "C2", renderer: QrRendererBlank},
{value: "D1", renderer: QrRendererBlank},
{value: "D2", renderer: QrRendererBlank},