新样式

This commit is contained in:
CPunisher 2020-05-08 12:47:23 +08:00
parent ad43a039aa
commit f235315bc3
9 changed files with 55 additions and 24 deletions

View File

@ -1,7 +1,7 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
@ -96,7 +96,12 @@ export default class QrRenderer25D extends React.Component {
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
}
}

View File

@ -1,7 +1,7 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
@ -107,7 +107,12 @@ export default class QrRendererBase extends React.Component {
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
}
}

View File

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

View File

@ -1,7 +1,7 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
@ -186,7 +186,12 @@ export default class QrRendererDSJ extends React.Component {
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
}
}

View File

@ -1,7 +1,7 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer} from "../utils/util";
import {defaultRenderer, defaultViewBox} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
@ -130,7 +130,12 @@ export default class QrRendererImage extends React.Component {
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
}
}

View File

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

View File

@ -1,7 +1,7 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {rand, defaultRenderer} from "../utils/util";
import {rand, defaultRenderer, defaultViewBox} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
@ -107,7 +107,12 @@ export default class QrRendererRandRound extends React.Component {
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
}
}

View File

@ -1,7 +1,7 @@
import React from "react";
import './Qrcode.css'
import {getTypeTable, QRPointType} from "../utils/qrcodeHandler";
import {defaultRenderer, rand} from "../utils/util";
import {defaultRenderer, defaultViewBox, rand} from "../utils/util";
function listPoint(props) {
if (!props.qrcode) return []
@ -107,7 +107,12 @@ export default class QrRendererRound extends React.Component {
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
return (
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(this.props.qrcode)} fill="white"
xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
{listPoint(this.props)}
</svg>
);
}
}

View File

@ -22,14 +22,6 @@ export function defaultViewBox(qrcode) {
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(){
const ua = window.navigator.userAgent.toLowerCase();