Egret中实现生成<img>标签的二维码功能。
一 在index.html上给egret的div增加 id = "gameDiv"。我们会根据id获取这个div,并动态添加一个<img>。
<div style="margin: auto;width: 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换成你实际的二维码图片。
竖屏时效果
横屏时效果