Egret社区
本帖最后由 gamedaybyday 于 2017-4-17 15:09 编辑

教程目录
一 实现原理
二 实现过程
三 Demo下载

本教程是在Egret中实现长按识别的二维码,并可以精确定位二维码的位置和大小,支持横屏和竖屏。

3.jpg




一 实现原理

微信中长按识别二维码,需要长按jpg或png等图片上,才会调起识别。

因为egret中的二维码,是绘制在canvas上的,故不能被长按识别。

所以为了解决这个问题,需要在canvas上覆盖一个二维码<img>标签, 达到可以长按识别的需求。

1.jpg


二 实现过程

1 在index.html中为div增加id = gameDiv,以备在egret中调用。

2.jpg


2 创建<img>标签

htmlCodeUrl 为二维码图片地址,比如 "resource/assets/code.jpg"

11.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

12.jpg


我已经将该工具类封装。示例代码,将一张二维码图片显示到坐标(100,100)位置,高宽为200x200
[AppleScript] 纯文本查看 复制代码
var htmlCode:QRCode;   
htmlCode = new QRCode("resource/assets/code.jpg");
htmlCode.setPosition(100, 100, 200, 200);
htmlCode.showHtmlCode();



三 Demo下载
具体代码,请查看demo。
游客,如果您要查看本帖隐藏内容请回复










分享到 :
18 人收藏

268 个回复

倒序浏览
白菜  略有小成 | 2017-4-17 16:32:00
是这么回事。,。,
sxtaosdo  自成一派 | 2017-4-17 17:04:36
学习了,谢谢~~~~~
小道  登堂入室 | 2017-4-17 18:12:19
学习了  谢谢
周佳鹏  登堂入室 | 2017-4-18 10:11:05
学习要学习
CodeBean  登堂入室 | 2017-4-25 15:22:27
111
ziwn_vip  炉火纯青 | 2017-4-25 15:43:48
goback2008  登堂入室 | 2017-4-26 15:57:59
在native中就行不通了
goback2008  登堂入室 | 2017-4-26 15:58:12
在native中就行不通了
gamedaybyday  初窥堂奥 | 2017-4-26 21:26:08
goback2008 发表于 2017-4-26 15:58
在native中就行不通了

native中没有document啊,所以行不通
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部