在Egret实现二维码长按识别

 

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换成你实际的二维码图片。

 

竖屏时效果

 

横屏时效果