教程目录
一 实现原理
二 实现过程
三 Demo下载
本教程是在Egret中实现长按识别的二维码,并可以精确定位二维码的位置和大小,支持横屏和竖屏。
一 实现原理
微信中长按识别二维码,需要长按jpg或png等图片上,才会调起识别。
因为egret中的二维码,是绘制在canvas上的,故不能被长按识别。
所以为了解决这个问题,需要在canvas上覆盖一个二维码<img>标签, 达到可以长按识别的需求。
二 实现过程
1 在index.html中为div增加id = gameDiv,以备在egret中调用。
2 创建<img>标签
htmlCodeUrl 为二维码图片地址,比如 "resource/assets/code.jpg"
3 设置<img>标签位置
这里的代码,是让我们可以直接使用egret中的坐标和高宽来设置<img>标签。
因为<img>在index.html上,不是在canvas上,所以不能直接用egret中的高宽和坐标直接设置。
我们需要取body和stage的比例来实现。
index.html浏览器的高宽用document.body.clientWidth获取。
stage的高宽用stage获取。
它们的比例是一致的。
body宽 stage宽
--------- = ------------
body高 stage高
比如
document.body.clientWIdth = 1080
document.body.clientHeight = 1920
stage.stageWidth = 640
stage.stageHeight = 1136
那么egret中的x=100,<img>的left应该等于 100*1080/640 = 168.75
我已经将该工具类封装。示例代码,将一张二维码图片显示到坐标(100,100)位置,高宽为200x200
1
2
3
4
|
var htmlCode : QRCode; htmlCode = new QRCode ( "resource/assets/code.jpg" ) ; htmlCode.setPosition ( 100 , 100 , 200 , 200 ) ; htmlCode.showHtmlCode ( ) ; |
三 Demo下载
https://files-cdn.cnblogs.com/files/gamedaybyday/Egret3.2.6_QRCodeExample.7z