LayaAirマイクロ信号端子長押し識別QRコード

1580 ワード

LayaAirマイクロ信号端子長押し識別QRコード


LayaAirのようなh 5エンジンはCanvasに基づいてページインタラクションを実現し、マイクロ信長はQRコードを識別するにはimgラベルしか識別できない。


ソリューション


仕方なく、やはりimgラベルを選んでCanvasの上にかぶせるしかありません。では、面と向かってレイアウトの問題があります。どのようにCanvasのプリセットの位置と重なるのか、いろいろなスクリーンサイズを合わせなければなりません。cssがうまく游んでいない私にとって、え~时間があれば、cssを補うことができます。


エンジンにはツールがある

public static function fitDOMElementInArea(dom:Object, coordinateSpace:Sprite, x:Number, y:Number, width:Number, height:Number):void
 DOM             。

Parameters

dom:Object — DOM    
 
coordinateSpace:Sprite —     ,   Stage  
 
x:Number —    coordinateSpace x  
 
y:Number —    coordinateSpace y  
 
width:Number —   
 
height:Number —   

実践の使用

//   ,       img
![](code.png)
//   ,          sprite,     code       ,      ide     ,  
//   ,  code, code        sp    
$("#code").show();
Laya.Utils.fitDOMElementInArea($("#code")[0],this.sp,0,0,this.sp.width,this.sp.height);

画像を押すのを止めると、下にスライドするとウィンドウが下に移動します。

$(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()
            });
    }
);