Star
最新消息
-
2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。 handleLink(e.target.href) } href='https://github.com/cpunisher/react-qrbtf' rel="noopener noreferrer" target="_blank">访问项目。
-
2020.5.23
网站开源啦！ handleLink(e.target.href) } href='https://github.com/ciaochaos/qrbtf' rel="noopener noreferrer" target="_blank">点击访问 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 handleLink(e.target.href) } href='https://mp.weixin.qq.com/s/GFEMCWQu3e2qhTuBabnHmQ' rel="noopener noreferrer" target="_blank">QRBTF 开源啦！来写个二维码样式吧～。
+
2020.6.11
QRBTF React 组件发布！快在你的应用中引入 react-qrbtf 吧。访问项目。
+
2020.5.23
网站开源啦！点击访问 我们的 Github。期待你也来参与设计、开发！给个 Star 支持一下不？查看文章 QRBTF 开源啦！来写个二维码样式吧～。
2020.5.22
新增 C2 样式、下载计数（好像还不太稳定）、普通二维码上传、颜色选择、背景图片上传、输入提示、桌面端横向滚动提示。
为什么要做一个二维码生成器？
-
看这里， handleLink(e.target.href) } href='https://mp.weixin.qq.com/s/_Oy9I9FqPXhfwN9IUhf6_g' rel="noopener noreferrer" target="_blank">如何制作一个漂亮的二维码 这篇文章简要介绍了我们的初心与愿景。
+
看这里，如何制作一个漂亮的二维码 这篇文章简要介绍了我们的初心与愿景。
这个生成器的特别之处在哪里？
普通的二维码样式单一，不能与环境较好的融合。这一个生成器有着 丰富的参数化样式、基于 SVG 的二维码生成能力，在为我们提供精美样式的同时，不限制参数如数值、颜色、背景图片的选择，又因 SVG 有较好的拓展性，可以完美兼容矢量制图流程。
如何使用？
diff --git a/src/components/link/LinkButton.js b/src/components/link/LinkButton.js
index 0978cfb..1e038e1 100644
--- a/src/components/link/LinkButton.js
+++ b/src/components/link/LinkButton.js
@@ -1,12 +1,12 @@
import React from "react";
import PropTypes from 'prop-types'
import '../Qrcode.css';
-import {handleLink} from "../../utils/gaHelper";
+import LinkTrace from "./LinkTrace";
const LinkButton = ({ href, value }) => (
-
handleLink(href) } href={href} rel="noopener noreferrer" target="_blank">
+
-
+
)
LinkButton.propTypes = {
diff --git a/src/components/link/LinkTrace.js b/src/components/link/LinkTrace.js
new file mode 100644
index 0000000..fbbc6c8
--- /dev/null
+++ b/src/components/link/LinkTrace.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import {handleLink} from "../../utils/gaHelper";
+
+const LinkTrace = (props) => {
+ return (
+
handleLink(props.href)} {...props}>
+ {props.children}
+
+ )
+}
+
+export default LinkTrace;
diff --git a/src/components/renderer/RendererBase.js b/src/components/renderer/RendererBase.js
index 5a76b0c..1e0e29c 100644
--- a/src/components/renderer/RendererBase.js
+++ b/src/components/renderer/RendererBase.js
@@ -3,6 +3,7 @@ import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer";
import {rand} from "../../utils/util";
+import LinkTrace from "../link/LinkTrace";
function listPoints(qrcode, params) {
if (!qrcode) return []
@@ -215,7 +216,7 @@ function getParamInfoRandRound() {
];
}
-export const RendererRect= createRenderer({
+export const RendererRect = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfoRect,
});
@@ -229,3 +230,16 @@ export const RendererRandRound = createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfoRandRound,
});
+
+RendererRect.detail = (
+
生成矩形二维码。
+);
+
+RendererRound.detail = (
+
生成圆形二维码。
+);
+
+
+RendererRandRound.detail = (
+
生成随机点圆形二维码。
+);
diff --git a/src/components/renderer/RendererFunc.js b/src/components/renderer/RendererFunc.js
index f08e1fd..2e3db85 100644
--- a/src/components/renderer/RendererFunc.js
+++ b/src/components/renderer/RendererFunc.js
@@ -2,7 +2,6 @@ import React from "react";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer";
-import {rand} from "../../utils/util";
function listPoints(qrcode, params) {
if (!qrcode) return []
@@ -231,4 +230,4 @@ export const RendererFuncA= createRenderer({
export const RendererFuncB= createRenderer({
listPoints: listPoints,
getParamInfo: getParamInfoFuncB,
-});
\ No newline at end of file
+});
diff --git a/src/components/renderer/RendererLine.js b/src/components/renderer/RendererLine.js
index da9fef1..f1d3b02 100644
--- a/src/components/renderer/RendererLine.js
+++ b/src/components/renderer/RendererLine.js
@@ -2,7 +2,6 @@ import React from "react";
import {ParamTypes} from "../../constant/ParamTypes";
import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
import {createRenderer} from "../style/Renderer";
-import {rand} from "../../utils/util";
function listPoints(qrcode, params) {
if (!qrcode) return []
diff --git a/src/components/style/Style.js b/src/components/style/Style.js
index 7369d07..fe5683b 100644
--- a/src/components/style/Style.js
+++ b/src/components/style/Style.js
@@ -6,7 +6,7 @@ function calClassName(selected) {
return 'Qr-item';
}
-const Style = ({ value, renderer, selected, onSelected }) => (
+const Style = ({ value, renderer, selected, details, onSelected }) => (
@@ -17,6 +17,9 @@ const Style = ({ value, renderer, selected, onSelected }) => (
{value}
+
+ {details}
+
);
diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js
index b221997..11ab504 100644
--- a/src/containers/app/PartDownloadViewer.js
+++ b/src/containers/app/PartDownloadViewer.js
@@ -20,6 +20,7 @@ function saveDB(state, type, updateDownloadData) {
value: value
}
}
+ return {}
}),
history: state.history
}, () => {
diff --git a/src/containers/style/StyleListViewer.js b/src/containers/style/StyleListViewer.js
index a5c5492..6f1e730 100644
--- a/src/containers/style/StyleListViewer.js
+++ b/src/containers/style/StyleListViewer.js
@@ -39,6 +39,7 @@ const mapStateToProps = state => ({
return {
value: style.value,
selected: state.selectedIndex === index,
+ details: style.renderer.detail,
renderer:
}
})
diff --git a/src/utils/qrcodeEncoder.js b/src/utils/qrcodeEncoder.js
index 428c9d6..a93071d 100644
--- a/src/utils/qrcodeEncoder.js
+++ b/src/utils/qrcodeEncoder.js
@@ -199,38 +199,7 @@ QRCode.prototype = {
return pattern;
},
-
- createMovieClip : function(target_mc, instance_name, depth) {
-
- let qr_mc = target_mc.createEmptyMovieClip(instance_name, depth);
- let cs = 1;
-
- this.make();
-
- for (let row = 0; row < this.modules.length; row++) {
-
- let y = row * cs;
-
- for (let col = 0; col < this.modules[row].length; col++) {
-
- let x = col * cs;
- let dark = this.modules[row][col];
-
- if (dark) {
- qr_mc.beginFill(0, 100);
- qr_mc.moveTo(x, y);
- qr_mc.lineTo(x + cs, y);
- qr_mc.lineTo(x + cs, y + cs);
- qr_mc.lineTo(x, y + cs);
- qr_mc.endFill();
- }
- }
- }
-
- return qr_mc;
- },
-
- setupTimingPattern : function() {
+ setupTimingPattern : function() {
for (let r = 8; r < this.moduleCount - 8; r++) {
if (this.modules[r][6] != null) {