Egret中实现生成<img>标签的二维码功能。
一 在index.html上给egret的div增加 id = "gameDiv"。我们会根据id获取这个div,并动态添加一个<img>。
<div style="margin: auto; 100%;height: 100%;" class="egret-player" id="gameDiv" data-entry-class="Main" data-orientation="portrait" data-scale-mode="fixedWidth" data-frame-rate="30" data-content-width="640" data-content-height="1136" data-show-paint-rect="false" data-multi-fingered="2" data-show-fps="false" data-show-log="false" data-show-fps-style="x:0,y:0,size:12,textColor:0xffffff,bgAlpha:0.9"> </div>
二 自定义操作<img>的二维码类QRCode
/** * 生成<img>标签二维码 * @author chenkai * @date 2016/12/26 */ class QRCode{ /**二维码img标签*/ private myImg: HTMLImageElement; /**二维码图片地址*/ private imgUrl:string; /**Egret中eui.Image二维码图片,用于定位*/ private codeImg:egret.DisplayObject; /**重置位置*/ private onResize(){ console.log("屏幕旋转,重置二维码位置"); if(this.imgUrl && this.codeImg){ this.showCode(this.imgUrl,this.codeImg); } } /** * 显示二维码 * imgUrl 二维码图片地址 * codeImg egret中二维码图片 (二维码图片容器必须和stage相等高宽) */ public showCode(imgUrl: string, codeImg: egret.DisplayObject): void { this.imgUrl = imgUrl; this.codeImg = codeImg; //横竖屏旋转,重置二维码位置 App.StageUtils.getStage().addEventListener( //这里的App.StageUtils是我自定义的可全局访问的stage,可以替换成你自己的stage egret.StageOrientationEvent.ORIENTATION_CHANGE,this.onResize,this); //二维码不存在,则创建一个 if(this.myImg == null){ var gameDiv = document.getElementById("gameDiv"); this.myImg = document.createElement("img"); this.myImg.src = imgUrl; this.myImg.style.position = "absolute"; this.myImg.style.display = "none"; gameDiv.appendChild(this.myImg); } //竖屏 if(document.body.clientWidth < document.body.clientHeight){ var wScale = document.body.clientWidth / App.StageUtils.stageWidth; var hScale = document.body.clientHeight / App.StageUtils.stageHeight; this.myImg.style.width = codeImg.width * wScale + "px"; this.myImg.style.height = codeImg.height * hScale + "px"; this.myImg.style.left = codeImg.x * wScale + "px"; this.myImg.style.top = codeImg.y * hScale + "px"; this.myImg.style.display = "inline"; //横屏 }else{ var wScale = document.body.clientWidth / App.StageUtils.stageHeight; var hScale = document.body.clientHeight / App.StageUtils.stageWidth; this.myImg.style.width = codeImg.height*wScale + "px"; this.myImg.style.height = codeImg.width*hScale + "px"; this.myImg.style.top = (App.StageUtils.stageWidth - codeImg.x - codeImg.width)*hScale + "px"; this.myImg.style.left = codeImg.y*wScale + "px"; this.myImg.style.display = "inline"; } } /**隐藏二维码*/ public hideCode(): void { if(this.myImg) { this.myImg.style.display = "none"; } } /**销毁*/ public onDestroy(){ App.StageUtils.getStage().removeEventListener(egret.StageOrientationEvent.ORIENTATION_CHANGE,this.onResize,this); this.codeImg = null; } }
三 直接在Egret的exml放置二维码图片,变量名为codeImg
竖屏时效果
横屏时效果
四 使用QRCode生成<img>二维码
var codeImg:eui.Image; //exml上二维码图片
var qrCode:QRCode = new QRCode();
qrCode.showCode("resource/assets/Button/button_down.png", codeImg); //button_down.png 随便找的一个蓝色小方块图片
使用QRCode类,在exml的二维码上覆盖一层<img>标签,这里是蓝色透明的,方便观察覆盖的效果,图片有点模糊,懒得找了 - -!
实际使用时,应该将button_down.png换成你实际的二维码图片。
竖屏时效果
横屏时效果