LayaAir微信端長(zhǎng)按識(shí)別二維碼

LayaAir之類的h5引擎是基于Canvas來實(shí)現(xiàn)頁面交互，微信長(zhǎng)按識(shí)別二維碼只能識(shí)別img標(biāo)簽。

解決方案

沒辦法，還是只能選擇img標(biāo)簽，蓋在Canvas之上。那就迎面而來一個(gè)布局問題，怎么和Canvas上的預(yù)設(shè)位置重合，還要適配各種屏幕尺寸，對(duì)于css玩得不溜的我，誒~有時(shí)間還是惡補(bǔ)一下css。

還好引擎提供了一個(gè)工具方法fitDOMElementInArea

public static function fitDOMElementInArea(dom:Object, coordinateSpace:Sprite, x:Number, y:Number, width:Number, height:Number):void
使DOM元素使用舞臺(tái)內(nèi)的某塊區(qū)域內(nèi)。

Parameters

dom:Object — DOM元素引用
 
coordinateSpace:Sprite — 坐標(biāo)空間，不能是Stage引用
 
x:Number — 相對(duì)于coordinateSpace的x坐標(biāo)
 
y:Number — 相對(duì)于coordinateSpace的y坐標(biāo)
 
width:Number — 寬度
 
height:Number — 高度

使用實(shí)踐

//第一步，創(chuàng)建一個(gè)隱藏的img
![](code.png)
//第二步，在頁面上定義一個(gè)空的sprite，位置大小和code要放得位置一致，可通過代碼或ide直接拖一個(gè)，略過
//第三步，顯示code，將code位置大小和預(yù)設(shè)的sp保持一致
$("#code").show();
Laya.Utils.fitDOMElementInArea($("#code")[0],this.sp,0,0,this.sp.width,this.sp.height);

阻止按住圖片時(shí)，向下滑動(dòng)會(huì)使窗口下移。

$(document).ready(
    
    function(){
        var mobile   = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
        var touchstart = mobile ? "touchstart" : "mousedown";
        var touchend = mobile ? "touchend" : "mouseup";
        var touchmove = mobile ? "touchmove" : "mousemove";
        $('html,body,img,video').on(touchmove,function(e){
                e.preventDefault()
            });
    }
);