【咸鱼教程】Egret可长按识别二维码(精确位置和大小)
教程目录
一 实现原理
二 实现过程
三 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下载
具体代码,请查看demo。
【咸鱼教程】Egret可长按识别二维码(精确位置和大小)的更多相关文章
- spa(单页应用)中,使用history模式时,微信长按识别二维码在ios下失效的问题
spa(单页应用,vue)中,使用history模式时,微信长按识别二维码在ios下失效的问题. 触发条件: spa单页应用: 路由模式 history 从其他页面跳转到带有微信二维码识别的页面(不是 ...
- 移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片【转载】
移动端禁止图片长按和vivo手机点击img标签放大图片,禁止长按识别二维码或保存图片 img{ pointer-events: none; } 源文地址:https://www.cnblogs.com ...
- 微信长按识别二维码,在 vue 项目中的实现
微信长按识别二维码是 QQ 浏览器的内置功能,该功能的基础一定要使用 img 标签引入图片,其他方式的二维码无法识别. 在 vue 中使用 QrcodeVue 插件 demo1 在 template ...
- Emgu-WPF学习使用-识别二维码的位置
原文:Emgu-WPF学习使用-识别二维码的位置 参考链接:http://blog.csdn.net/gaobobo138968/article/details/47663607 我完全参 ...
- UIWebView取消长按放大(用于长按识别二维码)
禁用长按UIWebView时放大镜及选择功能: //通过js调用 - (void)webViewDidFinishLoad:(UIWebView*)webView { // Disable user ...
- 关于ios在H5页面长按识别二维码无效
环境 框架: vue 操作系统: ios 解决 如果你的vue-router用了mode:history: 把它去掉用默认的就OK了
- iOS - WKWebView的使用和长按手势识别二维码并保存
WKWebView的图片二维码使用: .长按手势识别二维码并保存 .识别二维码跳转;不是链接显示内容点击网址跳转 .解决url包含中文不能编码的问题 .文字带链接网址,点击跳转 .纯文本-文字html ...
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
现在扫描二维码已经很普遍,微信扫一扫即可,但是如果二维码是在自己的手机上呢?那就要用到微信里的一个功能了,手指长按二维码,会弹出自动识别的选项,点确定就可以看到二维码的内容了.那么怎么通过前端实现这个 ...
- Python3+qrcode+zxing生成和识别二维码教程
一.安装依赖库 pip install qrcode pillow image zxing pillow是python3中PIL的代替库,image是生成图版需要用到的库 安装image时报错“Cou ...
随机推荐
- SQL随机生成6位数字
SELECT RIGHT(100000000 + CONVERT(bigint, ABS(CHECKSUM(NEWID()))), 6)
- springmvc+jquery实现省市区地址下拉框联动
参考资料:http://www.cnblogs.com/whgw/archive/2012/05/11/2496667.html 1.jsp页面实现 <%@ page language=&quo ...
- python 类属性 、实例属性,可变数据结构作为类属性需要注意的地方
1.一些经典的python错误不去阅读和不重视,就会把错误的做法带入到实际项目中来,甚至造成难以排查问题. 2.有一个大笨猪,按java写观察者模式,java写得是直接在类名下声明一个实例属性(不加s ...
- python2内置属性
# encoding: utf-8 # module __builtin__ # from (built-in) # by generator 1.145 from __future__ import ...
- [转]总结使用Unity 3D优化游戏运行性能的经验
转载自:http://www.gameres.com/msg_221889.html 作者:Amir Fasshihi 流畅的游戏玩法来自流畅的帧率,而我们即将推出的动作平台游戏<Shadow ...
- php根据地理坐标获取国家、省份、城市,及周边数据类
功能:当App获取到用户的地理坐标时,可以根据坐标知道用户当前在那个国家.省份.城市,及周边有什么数据. 原理:基于百度Geocoding API 实现,需要先注册百度开发者,然后申请百度AK(密钥) ...
- MySQL------报错Access denied for user 'root'@'localhost' (using password:NO)解决方法
报错:Access denied for user 'root'@'localhost' (using password:NO) 原因:没有给用户“root'@'localhost”赋予数据库权限 解 ...
- MacOS的多重启动工具
在osx Lion升级到Mavericks后原有的refit(http://refit.sourceforge.net)启动管理工具就失效了,refit已经停止更新,新的分支项目时rEFInd(htt ...
- HttpClientUtil请求http地址的工具类
直接贴代码: import java.io.IOException; import java.util.HashMap; import java.util.Map; import org.apache ...
- nginx_lua_waf 部署、测试记录
ngx_lua_waf ngx_lua_waf是一个基于lua-nginx-module(openresty)的web应用防火墙 源码:https://github.com/loveshell/ngx ...