QRBTF 开源啦!来写个二维码样式吧~

QRBTF 开源啦!来写个二维码样式吧~_第1张图片

QRBTF 开源啦!
求个 Star~

Github 仓库
github.com/ciaochaos/qrbtf

访问网站
qrbtf.com

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

QRBTF 开源啦!来写个二维码样式吧~_第2张图片

样式编写

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

开始之前,你需要

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

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

QRBTF 开源啦!来写个二维码样式吧~_第3张图片

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

  2. 下载我们的项目
    在你的 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 中排列着样式文件与网站二维码列表的对应顺序。

QRBTF 开源啦!来写个二维码样式吧~_第4张图片

QRBTF 开源啦!来写个二维码样式吧~_第5张图片

如何编写样式

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

你可能已经注意到,我们引入了 qrcodenCounttypeTable,分别表示二维码的点阵信息 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] // 时钟

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

初来乍到,请多包容!

你可能感兴趣的:(github,react,nodejs,web,app)