样式合并
This commit is contained in:
parent
d075d494a9
commit
55fc72b34e
|
@ -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(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
|
||||
else if (type == 1)
|
||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
|
||||
else if (type == 2)
|
||||
pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
|
||||
}
|
||||
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
|
||||
if (posType == 0) {
|
||||
|
@ -36,6 +41,15 @@ function listPoint(props) {
|
|||
} else if (posType == 1) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
} else if (posType == 2) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
for (let w = 0; w < vw.length; w++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
|
||||
}
|
||||
for (let h = 0; h < vh.length; h++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeTable[x][y] == QRPointType.POS_OTHER) {
|
||||
|
@ -48,6 +62,8 @@ function listPoint(props) {
|
|||
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
|
||||
else if (type == 1)
|
||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
|
||||
else if (type == 2)
|
||||
pointList.push(<circle opacity={opacity} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -72,7 +88,8 @@ class QrRendererBase extends React.Component {
|
|||
default: 0,
|
||||
choices: [
|
||||
"矩形",
|
||||
"圆形"
|
||||
"圆形",
|
||||
"随机"
|
||||
]
|
||||
},
|
||||
{
|
||||
|
@ -88,7 +105,8 @@ class QrRendererBase extends React.Component {
|
|||
default: 0,
|
||||
choices: [
|
||||
"矩形",
|
||||
"圆形"
|
||||
"圆形",
|
||||
"行星",
|
||||
]
|
||||
},
|
||||
]
|
||||
|
|
|
@ -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(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
|
||||
else if (type == 1)
|
||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
|
||||
else if (type == 2)
|
||||
pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
|
||||
}
|
||||
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
|
||||
if (posType == 0) {
|
||||
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
|
||||
} else if (posType == 1) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
} else if (posType == 2) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
for (let w = 0; w < vw.length; w++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
|
||||
}
|
||||
for (let h = 0; h < vh.length; h++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeTable[x][y] == QRPointType.POS_OTHER) {
|
||||
if (posType == 0) {
|
||||
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (type == 0)
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
|
||||
else if (type == 1)
|
||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
|
||||
else if (type == 2)
|
||||
pointList.push(<circle opacity={opacity} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default QrRendererRandRound
|
|
@ -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(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.4} />)
|
||||
if (typeTable[x][y] === QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
|
||||
if (type == 0)
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
|
||||
else if (type == 1)
|
||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
|
||||
else if (type == 2)
|
||||
pointList.push(<circle key={id++} opacity={opacity} fill="black" cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
|
||||
}
|
||||
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
for (let w = 0; w < vw.length; w++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
|
||||
}
|
||||
for (let h = 0; h < vh.length; h++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
|
||||
if (posType == 0) {
|
||||
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
|
||||
} else if (posType == 1) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
} else if (posType == 2) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={1.5} />)
|
||||
pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke="black" cx={x + 0.5} cy={y + 0.5} r={3} />)
|
||||
for (let w = 0; w < vw.length; w++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
|
||||
}
|
||||
for (let h = 0; h < vh.length; h++) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (typeTable[x][y] != QRPointType.POS_OTHER) {
|
||||
pointList.push(<circle key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
|
||||
else if (typeTable[x][y] == QRPointType.POS_OTHER) {
|
||||
if (posType == 0) {
|
||||
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (type == 0)
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="black" x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
|
||||
else if (type == 1)
|
||||
pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5}/>)
|
||||
else if (type == 2)
|
||||
pointList.push(<circle opacity={opacity} key={id++} fill="black" cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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 (
|
||||
<svg className="Qr-item-svg" width="100%" height="100%" viewBox={calViewBox(this.props)} enableBackground={calViewBox(this.props)} fill="white"
|
||||
<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,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},
|
||||
|
|
Loading…
Reference in New Issue