Cocos Creator 教程:生成二維碼

一般做應用推廣時，都會做一個自己的推廣二維碼。由於每個人的推廣二維碼都不一樣，這就需要前端用代碼生成屬於用戶個人的推廣二維碼。話不多說，下面講解如何用Creator 生成用戶專屬推廣二維碼，文章最後會給出Demo供大家參考。

二維碼生成庫

使用QRcode二維碼生成庫。不過這個庫是H5專用的，不過我們可以曲線救國，使用Creator的畫圖組件cc.Graphics，把二維碼畫出來。下面給出如何通過Url得到二維碼的黑白方塊數據。

let qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
qrcode.addData(url);
qrcode.make();

不過如果Url中帶有中文內容，在生成二維碼前就要把字符串轉換成UTF-8，然後再生成二維碼，即：

let url=toUtf8('Cocos Creator 教程:生成二維碼');

還有要注意微博掃一掃：大約200 字以內，微信掃一掃：大約 160字以內，支付寶掃一掃：大約130字符以內，所以一般鏈接不能太長。

設置插件

這一步需要把QRcode設置成插件，看圖pic2:

完整代碼

cc.Class({
	extends: cc.Component,
	properties: {

	},
	// use this for initialization
	onLoad() {
		this.init('http://forum.cocos.com/t/topic/44304/9');
	},

	init(url){
		var ctx = this.node.addComponent(cc.Graphics);
		if (typeof (url) !== 'string') {
			console.log('url is not string',url);
			return;
		}
		this.QRCreate(ctx, url);
	},

	QRCreate(ctx, url) {
		var qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
		qrcode.addData(url);
		qrcode.make();

		ctx.fillColor = cc.Color.BLACK;
		//塊寬高
		var tileW = this.node.width / qrcode.getModuleCount();
		var tileH = this.node.height / qrcode.getModuleCount();

		// draw in the 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;
					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();
				}
			}
		}
	},

});

注意：最好把節點長寬設置爲2的倍數。不然可能會出現無法識別二維碼

最後

如果還有講解不明白的地方，可以下載Demo，進行查看。還有喜歡就動動手指點喜歡，關注我吧，我會不定時更新Cocos Creator教程。

參考

http://forum.cocos.com/t/topic/44304/9