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

fix param bug

This commit is contained in:
CPunisher 2020-05-06 00:28:35 +08:00
parent 12e506fcd2
commit f5983dcaa8
8 changed files with 35 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/QrRendererBase.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler"; import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {rand} from "../utils/util"; import {defaultRenderer, rand} from "../utils/util";
function listPoint(props) { function listPoint(props) {
if (!props.qrcode) return [] if (!props.qrcode) return []
@ -16,7 +16,6 @@ function listPoint(props) {
let opacity = props.params[2] / 100; let opacity = props.params[2] / 100;
let posType = props.params[3]; let posType = props.params[3];
let id = 0; let id = 0;
console.log(posType)
const vw = [3, -3]; const vw = [3, -3];
const vh = [3, -3]; const vh = [3, -3];
@ -71,13 +70,6 @@ function listPoint(props) {
return pointList; 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 QrRendererBase extends React.Component { class QrRendererBase extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -115,12 +107,7 @@ class QrRendererBase extends React.Component {
} }
render() { render() {
return ( return defaultRenderer(this.props.qrcode, listPoint(this.props));
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
} }
} }

7
src/components/QrRendererBlank.js
View File

@ -1,13 +1,10 @@
import React from "react"; import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {defaultRenderer} from "../utils/util";
class QrRendererBlank extends React.Component { class QrRendererBlank extends React.Component {
render() { render() {
return ( return defaultRenderer(this.props.qrcode);
<svg className="Qr-item-svg" width="100%" height="100%" viewBox="0 0 0 0" fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
</svg>
);
} }
} }

16
src/components/QrRendererRandRect.js
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {rand, randRGB} from "../utils/util"; import {defaultRenderer, rand, randRGB} from "../utils/util";
function listPoint(props) { function listPoint(props) {
if (!props.qrcode) return [] if (!props.qrcode) return []
@ -38,21 +38,9 @@ function listPoint(props) {
return pointList; 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 QrRendererRandRect extends React.Component { class QrRendererRandRect extends React.Component {
render() { render() {
return ( return defaultRenderer(this.props.qrcode, listPoint(this.props));
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
} }
} }

17
src/components/QrRendererRandRound.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler"; import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {rand} from "../utils/util"; import {rand, defaultRenderer} from "../utils/util";
function listPoint(props) { function listPoint(props) {
if (!props.qrcode) return [] if (!props.qrcode) return []
@ -16,7 +16,6 @@ function listPoint(props) {
let opacity = props.params[2] / 100; let opacity = props.params[2] / 100;
let posType = props.params[3]; let posType = props.params[3];
let id = 0; let id = 0;
console.log(posType)
const vw = [3, -3]; const vw = [3, -3];
const vh = [3, -3]; const vh = [3, -3];
@ -71,13 +70,6 @@ function listPoint(props) {
return pointList; 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 { class QrRendererRandRound extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -115,12 +107,7 @@ class QrRendererRandRound extends React.Component {
} }
render() { render() {
return ( return defaultRenderer(this.props.qrcode, listPoint(this.props));
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
} }
} }

17
src/components/QrRendererRound.js
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
import './Qrcode.css' import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler"; import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {rand} from "../utils/util"; import {defaultRenderer, rand} from "../utils/util";
function listPoint(props) { function listPoint(props) {
if (!props.qrcode) return [] if (!props.qrcode) return []
@ -16,7 +16,6 @@ function listPoint(props) {
let opacity = props.params[2] / 100; let opacity = props.params[2] / 100;
let posType = props.params[3]; let posType = props.params[3];
let id = 0; let id = 0;
console.log(posType)
const vw = [3, -3]; const vw = [3, -3];
const vh = [3, -3]; const vh = [3, -3];
@ -71,13 +70,6 @@ function listPoint(props) {
return pointList; 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 QrRendererRound extends React.Component { class QrRendererRound extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -115,12 +107,7 @@ class QrRendererRound extends React.Component {
} }
render() { render() {
return ( return defaultRenderer(this.props.qrcode, listPoint(this.props));
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
} }
} }

11
src/components/Qrcode.js
View File

@ -21,9 +21,6 @@ const logoStyle = {
backgroundPosition: 'left' backgroundPosition: 'left'
}; };
const date = new Date();
const currentYear = date.getFullYear();
const styleList = [ const styleList = [
{value: "A1", renderer: QrRendererBase}, {value: "A1", renderer: QrRendererBase},
{value: "A2", renderer: QrRendererRound}, {value: "A2", renderer: QrRendererRound},
@ -35,6 +32,8 @@ const styleList = [
{value: "D2", renderer: QrRendererBlank}, {value: "D2", renderer: QrRendererBlank},
]; ];
const currentYear = new Date().getFullYear();
class Qrcode extends React.Component { class Qrcode extends React.Component {
paramInfoBuffer; paramInfoBuffer;
paramValueBuffer; paramValueBuffer;
@ -56,8 +55,8 @@ class Qrcode extends React.Component {
paramInfo: [], paramInfo: [],
paramValue: [] paramValue: []
}; };
this.paramInfoBuffer = new Array(10).fill(new Array(10)); this.paramInfoBuffer = new Array(16).fill(new Array(16));
this.paramValueBuffer = new Array(10).fill(new Array(10)); this.paramValueBuffer = new Array(16).fill(new Array(16));
} }
componentDidMount() { componentDidMount() {
@ -123,6 +122,7 @@ class Qrcode extends React.Component {
return ( return (
<select <select
className="Qr-select" className="Qr-select"
key={"select_" + this.state.selectedIndex + "_" + index}
value={this.state.paramValue[this.state.selectedIndex][index]} value={this.state.paramValue[this.state.selectedIndex][index]}
onChange={(e) => this.setParamValue(index, e.target.value)}> onChange={(e) => this.setParamValue(index, e.target.value)}>
{ {
@ -142,6 +142,7 @@ class Qrcode extends React.Component {
return ( return (
<input <input
type="number" type="number"
key={"input_" + this.state.selectedIndex + "_" + index}
className="Qr-input small-input" className="Qr-input small-input"
placeholder="10" placeholder="10"
defaultValue={this.state.paramValue[this.state.selectedIndex][index]} defaultValue={this.state.paramValue[this.state.selectedIndex][index]}

2
src/utils/qrcodeHandler.js
View File

@ -26,7 +26,7 @@ export function getQrcodeData(options) {
width : 256, width : 256,
height : 256, height : 256,
typeNumber : -1, typeNumber : -1,
correctLevel : 0, correctLevel : 1,
background : "#ffffff", background : "#ffffff",
foreground : "#000000" foreground : "#000000"
}, options); }, options);

18
src/utils/util.js
View File

@ -1,3 +1,5 @@
import React from "react";
let seed = 0; let seed = 0;
export function srand(sd) { export function srand(sd) {
@ -13,6 +15,22 @@ export function randRGB(minR, maxR, minG, maxG, minB, maxB) {
return 'rgb(' + parseInt(minR, maxR) + ',' + parseInt(minG, maxG) + ',' + parseInt(minB, maxB) + ')'; return 'rgb(' + parseInt(minR, maxR) + ',' + parseInt(minG, maxG) + ',' + parseInt(minB, maxB) + ')';
} }
export function defaultViewBox(qrcode) {
if (!qrcode) return '0 0 0 0';
const nCount = qrcode.getModuleCount();
return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
}
export function defaultRenderer(qrcode, points) {
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{points}
</svg>
);
}
export function isWeiXin(){ export function isWeiXin(){
const ua = window.navigator.userAgent.toLowerCase(); const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){ if(ua.match(/MicroMessenger/i) == 'micromessenger'){