新样式
This commit is contained in:
parent
f9f5ceb28b
commit
ad43a039aa
|
@ -0,0 +1,102 @@
|
|||
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 = 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;
|
||||
|
||||
const vw = [3, -3];
|
||||
const vh = [3, -3];
|
||||
|
||||
const X = [-Math.sqrt(3)/2, 1/2];
|
||||
const Y = [ Math.sqrt(3)/2, 1/2];
|
||||
const Z = [0, 0];
|
||||
|
||||
const matrixString = 'matrix(' + String(X[0]) + ', ' + String(X[1]) + ', ' + String(Y[0]) + ', ' + String(Y[1]) + ', ' + String(Z[0]) + ', ' + String(Z[1]) + ')'
|
||||
|
||||
|
||||
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;
|
||||
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
|
||||
if (posType == 0) {
|
||||
pointList.push(<rect width={1} height={1} key={id++} fill="rgb(0,0,0)" x={x} y={y} transform={matrixString}/>);
|
||||
pointList.push(<rect opacity={opacity} width={size/2} height={size} key={id++} fill="rgb(225,225,225)" x={0} y={0} transform={matrixString+'translate('+String(x+1)+','+String(y)+') '+'skewY(45) '}/>);
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size/2} key={id++} fill="rgb(240,240,240)" x={0} y={0} transform={matrixString+'translate('+String(x)+','+String(y+1)+') '+'skewX(45) '}/>);
|
||||
}
|
||||
}
|
||||
else if (typeTable[x][y] == QRPointType.POS_OTHER) {
|
||||
if (posType == 0) {
|
||||
pointList.push(<rect width={1} height={1} key={id++} fill="rgb(0,0,0)" x={x} y={y} transform={matrixString}/>);
|
||||
pointList.push(<rect opacity={opacity} width={size/2} height={size} key={id++} fill="rgb(225,225,225)" x={0} y={0} transform={matrixString+'translate('+String(x+1)+','+String(y)+') '+'skewY(45) '}/>);
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size/2} key={id++} fill="rgb(240,240,240)" x={0} y={0} transform={matrixString+'translate('+String(x)+','+String(y+1)+') '+'skewX(45) '}/>);
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (type == 0) {
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="rgb(0,0,0)" x={x + (1 - size)/2} y={y + (1 - size)/2} transform={matrixString}/>);
|
||||
pointList.push(<rect opacity={opacity} width={size/2} height={size} key={id++} fill="rgb(210,210,210)" x={0} y={0} transform={matrixString+'translate('+String(x+1)+','+String(y)+') '+'skewY(45) '}/>);
|
||||
pointList.push(<rect opacity={opacity} width={size} height={size/2} key={id++} fill="rgb(235,235,235)" x={0} y={0} transform={matrixString+'translate('+String(x)+','+String(y+1)+') '+'skewX(45) '}/>);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return pointList;
|
||||
}
|
||||
|
||||
export default class QrRenderer25D extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
if (this.props.setParamInfo) {
|
||||
this.props.setParamInfo([
|
||||
{
|
||||
key: '信息点样式',
|
||||
default: 0,
|
||||
choices: [
|
||||
"矩形",
|
||||
"圆形",
|
||||
"随机"
|
||||
]
|
||||
},
|
||||
{
|
||||
key: '信息点缩放',
|
||||
default: 100
|
||||
},
|
||||
{
|
||||
key: '信息点不透明度',
|
||||
default: 100,
|
||||
},
|
||||
{
|
||||
key: '定位点样式',
|
||||
default: 0,
|
||||
choices: [
|
||||
"矩形",
|
||||
"圆形",
|
||||
"行星",
|
||||
]
|
||||
},
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return defaultRenderer(this.props.qrcode, listPoint(this.props));
|
||||
}
|
||||
}
|
||||
|
|
@ -117,7 +117,7 @@ export default class QrRendererImage extends React.Component {
|
|||
},
|
||||
{
|
||||
key: '定位点样式',
|
||||
default: 2,
|
||||
default: 0,
|
||||
choices: [
|
||||
"矩形",
|
||||
"圆形",
|
||||
|
|
|
@ -16,6 +16,7 @@ import QrRendererRandRound from "./QrRendererRandRound";
|
|||
import QrRendererBlank from "./QrRendererBlank";
|
||||
import QrRendererRandRect from "./QrRendererRandRect";
|
||||
import QrRendererDSJ from "./QrRendererDSJ";
|
||||
import QrRenderer25D from "./QrRenderer25D";
|
||||
import QrRendererImage from "./QrRendererImage";
|
||||
|
||||
const logoStyle = {
|
||||
|
@ -30,8 +31,8 @@ const styleList = [
|
|||
{value: "A3", renderer: QrRendererRandRound},
|
||||
{value: "SP — 1", renderer: QrRendererDSJ},
|
||||
{value: "SP — 2", renderer: QrRendererRandRect},
|
||||
{value: "D1", renderer: QrRenderer25D},
|
||||
{value: "C1", renderer: QrRendererImage},
|
||||
{value: "D1", renderer: QrRendererBlank},
|
||||
{value: "D2", renderer: QrRendererBlank},
|
||||
];
|
||||
|
||||
|
|
Loading…
Reference in New Issue