Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

能稍微介绍一下思路吗? #35

Closed
yeqown opened this issue Feb 14, 2022 · 2 comments
Closed

能稍微介绍一下思路吗? #35

yeqown opened this issue Feb 14, 2022 · 2 comments

Comments

@yeqown
Copy link

yeqown commented Feb 14, 2022

我写了一个go的二维码生成工具,但是样式还比较单一,所以想要借鉴一下设计思路。对于 js 研究不深,烦请指教一下,谢谢 🙏

@CPunisher
Copy link
Collaborator

项目挺久没打理了,凭记忆简单说一下。

  1. 首先是二维码的编码,因为涉及复杂的算法所以直接用的现成的库,最后能得到n*n的二进制点阵。
  2. 根据二维码的wiki的介绍,如果已知二维码的大小,就能够知道每一个位置的所代表的信息(比如角上的一堆是一类用于定位的点,中间的包含代表数据的信息点,辅助定位的点,纠错用的点),这一步的分类可见qrcodeEncoder.js,用的方法也比较直观。
  3. 最后就是利用这些信息在不同的位置绘制相应的图形,具体可参考src/components/renderer下的这些样式生成代码。
    简单来说就是:二维遍历图形坐标点,然后添加svg元素,svg元素的坐标、颜色、线条样式等都是很容易控制的。

图形的设计和识别率是最难的地方,好在常用的vx二维码扫描比较强大,只要0点和1点的对比度强一些基本都有实现的可能性。

@yeqown
Copy link
Author

yeqown commented Feb 16, 2022

第三点还不太清晰,我先看看 renderer 的代码吧。我能猜测是,寻找二维码矩阵中的 “模式” (方形4块,一字长形3/4/5/6块)然后用对应的 svg 图形去替换嘛?

@yeqown yeqown closed this as completed Feb 17, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants