QRBTF 开源啦！来写个二维码样式吧～

QRBTF 开源啦！
求个 Star～

Github 仓库
github.com/ciaochaos/qrbtf
点击 阅读原文 即可访问

访问网站
qrbtf.com

图文介绍
如何制作一个漂亮的二维码

样式编写

欢迎各位有想法的小伙伴一起设计二维码样式，这里有一份简易指南，带你了解如何撰写第一个自己的二维码样式。

开始之前，你需要

1. 会一点点的 Javascript
   如果一点都不会，参考 这篇文章^[1] 快速入门吧。

2. 了解一下 SVG
   我们的二维码是基于 SVG 生成的，SVG 是非常优秀的矢量格式，可读性非常强，可以看看 这份指南^[2]。

3. 安装 Node.js
   如果没有安装的话，去 Node.js 官网^[3] 下载一个吧。我们使用的 React 需要它。

4. 下载我们的项目
   在你的 CMD 或是终端里输入下面这四条命令，如果 git clone 不方便的话，可以直接在 Github 页面下载 ZIP 压缩包。
   如果 npm install 报错，尝试入 sudo npm install 并输入电脑密码。

git clone https://github.com/ciaochaos/qrbtf.git
cd qrbtf
npm install
npm start

如果一切顺利，你会在输入 npm start 后看到浏览器中打开了 QRBTF 的网页，这时你就可以进行本地调试啦。

二维码样式文件在哪里

打开下载的目录，在 src/components/renderer 中即可看到所有的样式，在 src/containers/style/StyleListViewer.js 中排列着样式文件与网站二维码列表的对应顺序。

如何编写样式

参考已有的几个样式，即可对我们的样式编写逻辑有初步了解。

你可能已经注意到，我们引入了 qrcode、nCount 和 typeTable，分别表示二维码的点阵信息 qrcode.isDark(x, y)、二维码的行数列数以及各个点的分类。

const nCount = qrcode.getModuleCount();
const typeTable = getTypeTable(qrcode);

二维码的点分类如下，均为布尔值。

typeTable.DATA[x][y] // 信息点
typeTable.POS_CENTER[x][y] // 定位中心
typeTable.POS_OTHER[x][y] // 定位点
typeTable.ALIGN_CENTER[x][y] // 对齐中心
typeTable.ALIGN_OTHER[x][y] // 对齐点
typeTable.FORMAT[x][y] // 格式信息点
typeTable.VERSION[x][y] // 版本信息点
typeTable.TIMING[x][y] // 时钟

参考已有的样式，也不难发现发布参数的方法。如果你有设计、开发的想法，非常期待你原创的二维码样式～

初来乍到，请多包容！

参考资料