在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換成你實際的二維碼圖片。

 

豎屏時效果

 

橫屏時效果