二维码实现【纯js算法库+cc.Graphic实现】

Creator 2.x
#1

最近有人问到二维码实现，其实论坛里有人曾经提过实现方式，即用纯js算法库+cc.Graphic。

@Lyon http://forum.cocos.com/t/topic/44304/10 :+1: :+1:

他的方法是用js二维码算法库得到二维矩阵数据，然后用cc.Graphic绘图API将数据可视化，也就是画黑块。
这样，实现方式统一，也能完美支持所有平台。（native实现需要用到ZXing，各个平台都有）

我把代码稍微整理了一下，qrcode增加了module.exports 模块导出，二维码旋转的问题也修正了

归档.zip (7.4 KB)

26赞
#2

感谢你解决方法，我将你的代码整合成了一个组件文件，直接继承自cc.Graphic，可以用Node控制颜色，在组件上设置内容，可以实时看到变化，用起来更方便了，非常感谢！

image.png762×431 33.2 KB

扫描这个二维码有原码！

8赞
#3

你这二维码跳转到uikiller里了啊，没有二维码的链接呢

#4

不好意思，之前UI组件库与uikiller是一起的，后来分拆成了两个仓库

#5

嗯嗯，早前我就star你的仓库了，https://github.com/ShawnZhang2015/UILoader，没找到二维码的地址呢，链接地址能给我一下吗？多谢了！

#6

MagicComponent组件仓库:
https://github.com/ShawnZhang2015/MagicComponent

#7

MagicComponent 组件目前处于实验阶段，不少组件还存在缺陷
比如二维码组件，1. 只有前景颜色，背景是透明的，需要自己添加背景，而且前景默认是白色， 2. 当字符串比较长时，生成会有些卡顿

#8

谢谢分享，省去了不少事，只需要把当前组件颜色先设置为黑色就可以了

#9

这个稍微改下就可以绘制背景了，不知道这样会不会有性能问题。已经提交。
if (qrcode.isDark(row, col)) {
this._sgNode.fillColor = this.node.color;
this.rect(col * tileW, size - tileH - Math.round(row * tileH), w, h);
this.fill();
} else{
this._sgNode.fillColor = cc.color(255,255,255,255);
this.rect(col * tileW, size - tileH - Math.round(row * tileH), w, h);
this.fill();
}

#10

背景一次性绘制最好。组件已经更新，增加了背景、前景、边距、大小几个属性，拖拽即用。

https://github.com/ShawnZhang2015/MagicComponent

1赞
#11

你好,请问一下如果想将这个二维码单独保存到相册,需要怎么操作呢,有思路吗?拜托

#12 
	let canvas = cc.game.canvas;
	console.log('画布：', canvas);
	let windowWidth = canvas.width
	let windowHeight = canvas.height
	let scale = windowWidth / 640
	let dur = (windowHeight - 1136 * scale) / 2
	let top = (dur + leftTop.y * scale)
	let left = (scale * leftTop.x)
	canvas.toTempFilePath({
		x: left,
		y: top,
		width: wh.x * scale,
		height: wh.y * scale,
		success(res) {
			// .可以保存该截屏图片
			console.log(res)
			wx.saveImageToPhotosAlbum({
				filePath: res.tempFilePath,
				success: succfunc,
				fail: failfunc,
			});
		},
	});
1赞
#13

mark

#14

你好,不是保留截图的图片,是保存单独的二维码,这个有办法实现吗

#15

谢谢分享。 先收藏了

#16

你好，cc版本升级到2.0.6后，做了下修正：this._sgNode.fillColor 改为 this.fillColor。本地查看是正常的，但构建处理运行就有问题。debug半天不知道哪里问题。求助:pray:

image.png835×556 44.6 KB

1赞
#17

mark

#18

我升级到2.0.7也有这个问题。不知道怎么解决，请问您解决了么？

#19

感谢论坛前面的各位做出的贡献，今天拿来用的时候发现2.0以上报错，用了一种变通的方法解决了错误。

  1. creator2.0在继承cc.Graphics组件时，运行会报错，就是那个 updateRenderData 错误，不知道是引擎bug，还是没有实现相关方法，文档也没有说明。
  2. 代码动态添加 cc.Graphics 运行时却不会报错，所以利用这个，稍微改了下，功能还跟之前的一样。
  3. creator2.0里，node坐标跟画出来的二维码坐标不一致（二维码的左下角为node的中心点），我也把这个修改了。
  4. 目前还有一个问题，删除带TTQRcode的节点时，编辑器里会报一个错误，经测试，仅会影响编辑器，但不影响效果。

以上测试环境为2.0.8，已在安卓真机上运行测试过！

TTQRcode.zip (6.9 KB)

4赞
#20

额，刚刚测试不够仔细，发现拖到编辑器里的组件，没有设置node的size，导致无法看到二维码，请添加一行代码：
在 onLoad方法里，在 this.setContent() 之前添加 this.node.setContentSize(this.size, this.size);

1赞