Skip to content

Commit

Permalink
fix renderbase 二维码bug 保留边框选项 svg 宽度高度增加配置 (latentcat#11)
Browse files Browse the repository at this point in the history 
* 删除 npm源

* 修复renderBase 二维码颜色没有转换字符串

* fix 生成svg 错误

* 1.增加isSpace判断是否预留间隔
  • Loading branch information
@gexin1
gexin1 authored Jul 13, 2020
1 parent a723ed2 commit 60fd5ff
Show file tree
Hide file tree
Showing 10 changed files with 39 additions and 51 deletions.
1 change: 0 additions & 1 deletion .npmrc
View file

This file was deleted.

2 changes: 1 addition & 1 deletion dist/beautifyQrcode.js
View file

Large diffs are not rendered by default.

12 changes: 3 additions & 9 deletions src/renderer/renderer25D/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,9 @@ function viewBox(qrcode) {
if (!qrcode) return '0 0 0 0';

const nCount = qrcode.getModuleCount();
return (
String(-nCount) +
' ' +
String(-nCount / 2) +
' ' +
String(nCount * 2) +
' ' +
String(nCount * 2)
);
return qrcode.$options.isSpace
? `${-nCount} ${-nCount / 2} ${nCount * 2} ${nCount * 2}`
: `${-nCount + 3} ${-nCount / 2} ${nCount * 2 - 6} ${nCount * 2 - 6}`;
}
const schema25D = yup.object().shape({
// 柱体高度
Expand Down
10 changes: 5 additions & 5 deletions src/renderer/rendererBase/listPoints.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,10 @@ export default function listPoints(qrcode, params) {
if (posType === 0) {
pointList.push(
`<rect
width=${1}
height=${1}
width="${1}"
height="${1}"
key="${id++}"
fill=${posColor}
fill="${posColor}"
x="${x}"
y="${y}"
/>`
Expand All @@ -194,8 +194,8 @@ export default function listPoints(qrcode, params) {
pointList.push(
`<rect
opacity="${opacity}"
width=${size}
height=${size}
width="${size}"
height="${size}"
key="${id++}"
fill="${otherColor}"
x="${x + (1 - size) / 2}"
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/rendererDSJ/listPoints.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ export default function listPoints(qrcode, params) {
y2="${y + 3 - width1 / Math.sqrt(8)}"
fill="none"
stroke="#0B2D97"
stroke-width=${width1}
stroke-width="${width1}"
/>`
);
g1.push(
Expand Down
10 changes: 5 additions & 5 deletions src/renderer/rendererFunc/listPoints.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,11 @@ export default function listPoints(qrcode, params) {
`<circle
key="${id++}"
fill="none"
stroke-width=${nCount / 15}
stroke=${otherColor2}
cx=${nCount / 2}
cy=${nCount / 2}
r=${((nCount / 2) * Math.sqrt(2) * 13) / 40}
stroke-width="${nCount / 15}"
stroke="${otherColor2}"
cx="${nCount / 2}"
cy="${nCount / 2}"
r="${((nCount / 2) * Math.sqrt(2) * 13) / 40}"
/>`
);
}
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/rendererLine/listPoints.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,8 @@ export default function listPoints(qrcode, params) {
if (posType === 0) {
pointList.push(
`<rect
width=${1}
height=${1}
width="${1}"
height="${1}"
key="${id++}"
fill="${posColor}"
x="${x}"
Expand Down
20 changes: 8 additions & 12 deletions src/renderer/rendererResImage/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,11 @@ function getViewBox(qrcode) {
if (!qrcode) return '0 0 0 0';

const nCount = qrcode.getModuleCount() * 3;
return (
String(-nCount / 5) +
' ' +
String(-nCount / 5) +
' ' +
String(nCount + (nCount / 5) * 2) +
' ' +
String(nCount + (nCount / 5) * 2)
);
return qrcode.$options.isSpace
? `${-nCount / 5} ${-nCount / 5} ${nCount + (nCount / 5) * 2} ${
nCount + (nCount / 5) * 2
}`
: `${0} ${0} ${nCount} ${nCount}`;
}

function getGrayPointList(params, size, black, white) {
Expand Down Expand Up @@ -62,7 +58,7 @@ function getGrayPointList(params, size, black, white) {

const RendererResImage = ({ qrcode, params }) => {
const otherColor = params[5];

const { width, height } = qrcode.$options;
return new Promise((resolve, reject) => {
getGrayPointList(
params,
Expand All @@ -73,8 +69,8 @@ const RendererResImage = ({ qrcode, params }) => {
.then((gpl) => {
const svg = `<svg
className="Qr-item-svg"
width="100%"
height="100%"
width="${width}"
height="${height}"
viewBox="${getViewBox(qrcode)}"
fill="white"
xmlns="http://www.w3.org/2000/svg"
Expand Down
7 changes: 4 additions & 3 deletions src/utils/qrcodeHandler.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,21 @@ export function encodeData(options) {
options = {
...{
render: 'canvas',
width: 256,
height: 256,
width: "100%",
height: "100%",
typeNumber: -1,
correctLevel: 1,
background: '#ffffff',
foreground: '#000000',
isSpace:true
},
...options,
};

const qrcode = new QRCodeEncoder(options.typeNumber, options.correctLevel);
qrcode.addData(options.text);
qrcode.make();

qrcode.$options=options;
return qrcode;
}

Expand Down
22 changes: 10 additions & 12 deletions src/utils/renderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,12 @@ export function createRenderer(renderer) {
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)
);
// 不留间隔
return qrcode.$options.isSpace
? `${-nCount / 5} ${-nCount / 5} ${nCount + (nCount / 5) * 2} ${
nCount + (nCount / 5) * 2
}`
: `${0} ${0} ${nCount} ${nCount}`;
};

renderer = {
Expand All @@ -31,10 +28,11 @@ export function createRenderer(renderer) {
};

return ({ qrcode, params }) => {
const { width, height } = qrcode.$options;
return `
<svg className="Qr-item-svg" width="100%" height="100%" viewBox="${renderer.getViewBox(
qrcode
)}" fill="white"
<svg width="${width}" height="${height}" viewBox="${renderer.getViewBox(
qrcode
)}" fill="white"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
${renderer.listPoints(qrcode, params).join('')}
</svg>
Expand Down

0 comments on commit 60fd5ff

Please sign in to comment.