背景
H5中会遇到生成二维码的功能需求,如网页名片、双屏互动等场景。
实现方法
主要用到一个生成二维码图片的插件QRCode.js(插件下载及文档说明在底部参考链接)。说两种使用环境,第一种是在网页中直接使用,第二种是在Cocos中使用。
第一种,在网页中直接使用方法很简单,添加Dom结构,引入javascript库文件,然后设置调用参数即可,
// 设置参数方式
var qrcode = new QRCode('qrcode', {
text: 'your content', // 可以是地址链接
width: 256,
height: 256,
colorDark : '#000000', // 前景颜色
colorLight : '#ffffff' // 背景颜色
});
第二种,在Cocos中,先使用插件算法库得到二维矩阵数据(由true和false组成),然后根据每个小块的值去判断采用前景色或者背景色用cc.Graphic绘图,也就是画黑白块。
// 生成二维码,url为二维码内容或者地址链接
createQRCode: function(url){
var qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
qrcode.addData(url);
qrcode.make();
var ctx = this.mGraphics.getComponent(cc.Graphics);
// 计算组成二维码每个小块的尺寸
var tileW = this.mGraphics.node.width / qrcode.getModuleCount();
var tileH = this.mGraphics.node.height / qrcode.getModuleCount();
// Graphics绘图
for (var row = 0; row < qrcode.getModuleCount(); row++) {
for (var col = 0; col < qrcode.getModuleCount(); col++) {
// 根据小块的值判断采用前景色或者背景色绘制
if (qrcode.isDark(row, col)) {
ctx.fillColor = cc.Color.BLACK;
} else {
ctx.fillColor = cc.Color.WHITE;
}
var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
ctx.rect(Math.round(col * tileW), Math.round(row * tileH), w, h);
ctx.fill();
}
}
}
备注
市面上有二维码接口提供商(微微二维码),按等级付费或者按次付费。
二维码接口文档 & SDK下载:http://www.wwei.cn/qrcode-docsdk.html
阿里云市场彩色二维码生成与解码:
https://market.aliyun.com/products/57126001/cmapi021204.html#sku=yuncode1520400000
参考链接
QRCode.js 生成二维码 - 前端开发仓库:http://code.ciaoca.com/javascript/qrcode/
H5案例分享:生成简易二维码:https://www.h5anli.com/articles/201701/createqr.html
Creator1.4单个Graphics的DrawCall...:http://forum.cocos.com/t/creator1-4-graphics-drawcall/44339
二维码实现【纯js算法库+cc.Graphic实现】:http://forum.cocos.com/t/js-cc-graphic/51566