QRBTF 开源啦!
求个 Star~
Github 仓库
github.com/ciaochaos/qrbtf
访问网站
qrbtf.com
图文介绍
如何制作一个漂亮的二维码
样式编写
欢迎各位有想法的小伙伴一起设计二维码样式,这里有一份简易指南,带你了解如何撰写第一个自己的二维码样式。
开始之前,你需要
-
安装 Node.js
如果没有安装的话,去 Node.js 官网 下载一个吧。我们使用的 React 需要它。 -
下载我们的项目
在你的 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] // 时钟
参考已有的样式,也不难发现发布参数的方法。如果你有设计、开发的想法,非常期待你原创的二维码样式~
初来乍到,请多包容!