diff --git a/src/components/QrRendererBase.js b/src/components/QrRendererBase.js index 97bf7ee..e5ee63f 100644 --- a/src/components/QrRendererBase.js +++ b/src/components/QrRendererBase.js @@ -18,6 +18,9 @@ function listPoint(props) { let id = 0; console.log(posType) + const vw = [3, -3]; + const vh = [3, -3]; + if (size <= 0) size = 1.0 for (let x = 0; x < nCount; x++) { @@ -29,6 +32,8 @@ function listPoint(props) { pointList.push() else if (type == 1) pointList.push() + else if (type == 2) + pointList.push() } else if (typeTable[x][y] == QRPointType.POS_CENTER) { if (posType == 0) { @@ -36,6 +41,15 @@ function listPoint(props) { } else if (posType == 1) { pointList.push() pointList.push() + } else if (posType == 2) { + pointList.push() + pointList.push() + for (let w = 0; w < vw.length; w++) { + pointList.push() + } + for (let h = 0; h < vh.length; h++) { + pointList.push() + } } } else if (typeTable[x][y] == QRPointType.POS_OTHER) { @@ -48,6 +62,8 @@ function listPoint(props) { pointList.push() else if (type == 1) pointList.push() + else if (type == 2) + pointList.push() } } } @@ -72,7 +88,8 @@ class QrRendererBase extends React.Component { default: 0, choices: [ "矩形", - "圆形" + "圆形", + "随机" ] }, { @@ -88,7 +105,8 @@ class QrRendererBase extends React.Component { default: 0, choices: [ "矩形", - "圆形" + "圆形", + "行星", ] }, ] diff --git a/src/components/QrRendererRandRound.js b/src/components/QrRendererRandRound.js new file mode 100644 index 0000000..3e13998 --- /dev/null +++ b/src/components/QrRendererRandRound.js @@ -0,0 +1,127 @@ +import React from "react"; +import './Qrcode.css' +import {getTypeTable, QRPointType} from "../utils/qrcodeHandler"; +import {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 = new Array(nCount); + + let type = props.params[0]; + let size = props.params[1] / 100; + let opacity = props.params[2] / 100; + let posType = props.params[3]; + let id = 0; + console.log(posType) + + const vw = [3, -3]; + const vh = [3, -3]; + + if (size <= 0) size = 1.0 + + for (let x = 0; x < nCount; x++) { + for (let y = 0; y < nCount; y++) { + 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) + pointList.push() + else if (type == 1) + pointList.push() + else if (type == 2) + pointList.push() + } + else if (typeTable[x][y] == QRPointType.POS_CENTER) { + if (posType == 0) { + pointList.push(); + } else if (posType == 1) { + pointList.push() + pointList.push() + } else if (posType == 2) { + pointList.push() + pointList.push() + for (let w = 0; w < vw.length; w++) { + pointList.push() + } + for (let h = 0; h < vh.length; h++) { + pointList.push() + } + } + } + else if (typeTable[x][y] == QRPointType.POS_OTHER) { + if (posType == 0) { + pointList.push(); + } + } + else { + if (type == 0) + pointList.push() + else if (type == 1) + pointList.push() + else if (type == 2) + pointList.push() + } + } + } + + return pointList; +} + +function calViewBox(props) { + if (!props.qrcode) return '0 0 0 0'; + + const nCount = props.qrcode.getModuleCount(); + return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2); +} + +class QrRendererRandRound extends React.Component { + constructor(props) { + super(props); + if (this.props.setParamInfo) { + this.props.setParamInfo([ + { + key: '信息点样式', + default: 2, + choices: [ + "矩形", + "圆形", + "随机" + ] + }, + { + key: '信息点缩放', + default: 80 + }, + { + key: '信息点不透明度', + default: 100, + }, + { + key: '定位点样式', + default: 2, + choices: [ + "矩形", + "圆形", + "行星", + ] + }, + ] + ); + } + } + + render() { + return ( + + {listPoint(this.props)} + + ); + } +} + +export default QrRendererRandRound diff --git a/src/components/QrRendererRound.js b/src/components/QrRendererRound.js index 1ad1214..164498d 100644 --- a/src/components/QrRendererRound.js +++ b/src/components/QrRendererRound.js @@ -1,7 +1,7 @@ import React from "react"; -import {srand, rand} from "../utils/util"; import './Qrcode.css' import {getTypeTable, QRPointType} from "../utils/qrcodeHandler"; +import {rand} from "../utils/util"; function listPoint(props) { if (!props.qrcode) return [] @@ -9,30 +9,61 @@ function listPoint(props) { const qrcode = props.qrcode; const nCount = qrcode.getModuleCount(); const typeTable = getTypeTable(qrcode); - const pointList = []; + const pointList = new Array(nCount); + + let type = props.params[0]; + let size = props.params[1] / 100; + let opacity = props.params[2] / 100; + let posType = props.params[3]; + let id = 0; + console.log(posType) + const vw = [3, -3]; const vh = [3, -3]; - let id = 0; + if (size <= 0) size = 1.0 + for (let x = 0; x < nCount; x++) { 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) { - pointList.push() + if (typeTable[x][y] === QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) { + if (type == 0) + pointList.push() + else if (type == 1) + pointList.push() + else if (type == 2) + pointList.push() } else if (typeTable[x][y] == QRPointType.POS_CENTER) { - pointList.push() - pointList.push() - for (let w = 0; w < vw.length; w++) { - pointList.push() - } - for (let h = 0; h < vh.length; h++) { - pointList.push() + if (posType == 0) { + pointList.push(); + } else if (posType == 1) { + pointList.push() + pointList.push() + } else if (posType == 2) { + pointList.push() + pointList.push() + for (let w = 0; w < vw.length; w++) { + pointList.push() + } + for (let h = 0; h < vh.length; h++) { + pointList.push() + } } } - else if (typeTable[x][y] != QRPointType.POS_OTHER) { - pointList.push() + else if (typeTable[x][y] == QRPointType.POS_OTHER) { + if (posType == 0) { + pointList.push(); + } + } + else { + if (type == 0) + pointList.push() + else if (type == 1) + pointList.push() + else if (type == 2) + pointList.push() } } } @@ -53,21 +84,31 @@ class QrRendererRound extends React.Component { if (this.props.setParamInfo) { this.props.setParamInfo([ { - key: 'Choice 1', - default: 1 - }, - { - key: 'Choice 2', - default: 100 - }, - { - key: 'Select 1', - default: 0, + key: '信息点样式', + default: 1, choices: [ - "Option 1", - "Option 2" + "矩形", + "圆形", + "随机" ] - } + }, + { + key: '信息点缩放', + default: 50 + }, + { + key: '信息点不透明度', + default: 30, + }, + { + key: '定位点样式', + default: 1, + choices: [ + "矩形", + "圆形", + "行星", + ] + }, ] ); } @@ -75,7 +116,7 @@ class QrRendererRound extends React.Component { render() { return ( - {listPoint(this.props)} diff --git a/src/components/Qrcode.js b/src/components/Qrcode.js index ceef9b0..1ec9493 100644 --- a/src/components/Qrcode.js +++ b/src/components/Qrcode.js @@ -11,6 +11,7 @@ import logo from '../qrbtf-logo.svg'; import QrItem from "./QrItem"; import QrRendererBase from "./QrRendererBase"; import QrRendererRound from "./QrRendererRound"; +import QrRendererRandRound from "./QrRendererRandRound"; import QrRendererBlank from "./QrRendererBlank"; import QrRendererRandRect from "./QrRendererRandRect"; @@ -26,8 +27,8 @@ const currentYear = date.getFullYear(); const styleList = [ {value: "A1", renderer: QrRendererBase}, {value: "A2", renderer: QrRendererRound}, + {value: "A3", renderer: QrRendererRandRound}, {value: "B1", renderer: QrRendererRandRect}, - {value: "B2", renderer: QrRendererBlank}, {value: "C1", renderer: QrRendererBlank}, {value: "C2", renderer: QrRendererBlank}, {value: "D1", renderer: QrRendererBlank},