背景
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