新增图片背景样式

This commit is contained in:
ciaochaos 2020-05-06 18:42:14 +08:00
parent bd96341137
commit b3b68fa8e1
3 changed files with 143 additions and 5 deletions

View File

@ -0,0 +1,136 @@
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 / 3;
let opacity = props.params[2] / 100;
let posType = props.params[3];
let id = 0;
const vw = [3, -3];
const vh = [3, -3];
if (size <= 0) size = 1.0
pointList.push(<image key={id++} x="0" y="0" width={nCount} height={nCount} href="http://blog.ciaochaos.com/images/Avatar.jpg"/>);
for (let x = 0; x < nCount; x++) {
for (let y = 0; y < nCount; y++) {
if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
if (qrcode.isDark(x, y)) {
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 == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" 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="white" cx={x + 0.5} cy={y + 0.5}/>)
}
}
else if (typeTable[x][y] == QRPointType.POS_CENTER) {
if (qrcode.isDark(x, y)) {
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="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
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="white" cx={x + 0.5} cy={y + 0.5} r={5} />)
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 (qrcode.isDark(x, y)) {
if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="black" x={x} y={y}/>);
}
} else {
if (posType == 0) {
pointList.push(<rect width={1} height={1} key={id++} fill="white" x={x} y={y}/>);
}
}
}
else {
if (qrcode.isDark(x, y)) {
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 == 0)
pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill="white" 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="white" cx={x + 0.5} cy={y + 0.5}/>)
}
}
}
}
return pointList;
}
export default class QrRendererImage 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: 2,
choices: [
"矩形",
"圆形",
"行星",
]
},
]
);
}
}
render() {
return defaultRenderer(this.props.qrcode, listPoint(this.props));
}
}

View File

@ -16,6 +16,7 @@ import QrRendererRandRound from "./QrRendererRandRound";
import QrRendererBlank from "./QrRendererBlank"; import QrRendererBlank from "./QrRendererBlank";
import QrRendererRandRect from "./QrRendererRandRect"; import QrRendererRandRect from "./QrRendererRandRect";
import QrRendererDSJ from "./QrRendererDSJ"; import QrRendererDSJ from "./QrRendererDSJ";
import QrRendererImage from "./QrRendererImage";
const logoStyle = { const logoStyle = {
background: `url(${logo})`, background: `url(${logo})`,
@ -29,7 +30,7 @@ const styleList = [
{value: "A3", renderer: QrRendererRandRound}, {value: "A3", renderer: QrRendererRandRound},
{value: "SP — 1", renderer: QrRendererDSJ}, {value: "SP — 1", renderer: QrRendererDSJ},
{value: "SP — 2", renderer: QrRendererRandRect}, {value: "SP — 2", renderer: QrRendererRandRect},
{value: "C2", renderer: QrRendererBlank}, {value: "C1", renderer: QrRendererImage},
{value: "D1", renderer: QrRendererBlank}, {value: "D1", renderer: QrRendererBlank},
{value: "D2", renderer: QrRendererBlank}, {value: "D2", renderer: QrRendererBlank},
]; ];

View File

@ -62,8 +62,9 @@ export function getTypeTable(qrcode) {
for (let i = 0; i < PD.length; i++) { for (let i = 0; i < PD.length; i++) {
typeTable[PD[i][0]][PD[i][1]] = QRPointType.POS_CENTER typeTable[PD[i][0]][PD[i][1]] = QRPointType.POS_CENTER
for (let r = -3; r <= 3; r++) { for (let r = -4; r <= 4; r++) {
for (let c = -3; c <= 3; c++) { for (let c = -4; c <= 4; c++) {
if (PD[i][0] + r >= 0 && PD[i][0] + r < nCount && PD[i][1] + c >=0 && PD[i][1] + c < nCount)
if (!(r == 0 && c == 0)) if (!(r == 0 && c == 0))
typeTable[PD[i][0] + r][PD[i][1] + c] = QRPointType.POS_OTHER; typeTable[PD[i][0] + r][PD[i][1] + c] = QRPointType.POS_OTHER;
} }