From 3a881918eb0e52426b3cee67be26343f1567ba3c Mon Sep 17 00:00:00 2001 From: ciaochaos <1272777550@qq.com> Date: Wed, 6 May 2020 13:41:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/QrRendererDSJ.js | 192 ++++++++++++++++++++++++++++++++ src/components/Qrcode.css | 10 +- src/components/Qrcode.js | 5 +- 3 files changed, 199 insertions(+), 8 deletions(-) create mode 100644 src/components/QrRendererDSJ.js diff --git a/src/components/QrRendererDSJ.js b/src/components/QrRendererDSJ.js new file mode 100644 index 0000000..1713420 --- /dev/null +++ b/src/components/QrRendererDSJ.js @@ -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(); + } else if (posType == 1) { + pointList.push(); + pointList.push(); + pointList.push(); + pointList.push(); + pointList.push(); + } + } + else if (typeTable[x][y] == QRPointType.POS_OTHER) { + if (posType == 0) { + pointList.push(); + } + } + 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() + g1.push() + 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() + g1.push() + 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() + g2.push() + } + } + } + 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() + } + } + } + if (available[x][y]) { + pointList.push() + } + + + } + } + } + + 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 diff --git a/src/components/Qrcode.css b/src/components/Qrcode.css index 5cb7432..507aae5 100644 --- a/src/components/Qrcode.css +++ b/src/components/Qrcode.css @@ -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; } } diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index 4e17a09..4877cd8 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -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},