教程目录

一 实现原理

二 实现过程

三 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

[AppleScript] 

纯文本查看 复制代码

1 2 3 4

var htmlCode : QRCode;   htmlCode = new QRCode ( "resource/assets/code.jpg" ) ; htmlCode.setPosition ( 100 , 100 , 200 , 200 ) ; htmlCode.showHtmlCode ( ) ;

三

具体代码，请查看demo。