2016-11-08 15 views
0

単純なドラッグ&ドロップエクササイズを作成したいが、Retina iPadの "&ドロップドラッグ"は正しく動作していない。Retina iPad(createjs)でドラッグアンドドロップが正しく機能しない

var that = this; 
createjs.Touch.enable(stage); 
stage.enableMouseOver(10); 

function initPage() { 
    var shape = new createjs.Shape(); 
    shape.graphics.beginFill("#999999").drawRoundRect(100,100,140,60,8).endFill(); 
    shape.on("mousedown", function(evt) { 
    this.alpha = 0.8; 
    this.offset = {x: this.x - evt.stageX, y: this.y - evt.stageY}; 
    }); 

    shape.on("pressmove", function(evt) { 
    this.x = evt.stageX + this.offset.x; 
    this.y = evt.stageY + this.offset.y; 
    }); 

    shape.on("pressup", function(evt) { 
    this.alpha = 1; 
    }); 

    that.addChild(shape); 
} 

initPage(); 

私は図形をドラッグすることができますが、より多くの私はそれを動かすには、より多くのそれは私の指から離れる: は、ここでは、コードです。ここで私はちょうど録画したビデオは、次のとおりです。 https://dl.dropboxusercontent.com/u/11697167/animatecc-bug.mp4

私はアドビアニメイトCCで働いている、とエクスポートされたHTMLファイルは、それが網膜のiPadのような高解像度の画面でよく見るようにするには、次のコードが含まれています。

//Code to support hidpi screens and responsive scaling. 
function makeResponsive(isResp, respDim, isScale, scaleType) {  
    var lastW, lastH, lastS=1;  
    window.addEventListener('resize', resizeCanvas);   
    resizeCanvas();  
    function resizeCanvas() {   
     var w = lib.properties.width, h = lib.properties.height;    
     var iw = window.innerWidth, ih=window.innerHeight;   
     var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;   
     if(isResp) {     
      if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {      
       sRatio = lastS;     
      }    
      else if(!isScale) {     
       if(iw<w || ih<h)       
        sRatio = Math.min(xRatio, yRatio);    
      }    
      else if(scaleType==1) {     
       sRatio = Math.min(xRatio, yRatio);    
      }    
      else if(scaleType==2) {     
       sRatio = Math.max(xRatio, yRatio);    
      }   
     }   
     canvas.width = w*pRatio*sRatio;   
     canvas.height = h*pRatio*sRatio; 
     canvas.style.width = preloaderDiv.style.width = w*sRatio+'px';    
     canvas.style.height = preloaderDiv.style.height = h*sRatio+'px'; 
     stage.scaleX = pRatio*sRatio;   
     stage.scaleY = pRatio*sRatio;   
     lastW = iw; lastH = ih; lastS = sRatio;  
    } 
} 
makeResponsive(false,'both',false,1); 

resizeCanvas関数を削除した場合、&ドロップをiPad上でうまくいきますが、解像度がそれほど悪くなっています。

回避策の候補はありますか?

答えて

0

私の元の回答は間違っていました。

この問題は実際には、ステージがスケーリングであり、座標を調整するという事実と関連しています。あなたは現在のスコープにあなたの座標を変換することによってこの問題を解決することができます

shape.on("pressmove", function(evt) { 
    var p = this.globalToLocal(evt.stageX, evt.stageY); 
    this.x = p.x + this.offset.x; 
    this.y = p.y + this.offset.y; 
}); 

役に立てば幸いです。

+0

感謝。形状を動かそうとすると、コンピュータ上で「ちらつき」(突然x/yの位置が変わる)。私もオフセットを削除しましたが、それはまだ同じです。 – kintaro

+1

問題は、デバイスのピクセル比率でした。 iPadでは、1ではなく2になっています。これは修正されました:this.x = evt.stageX/window.devicePixelRatio; this.y = evt.stageY/window.devicePixelRatio; – kintaro

0

私は最近同様の問題がありました。あなたは次のことを試しましたか?

shape.on("pressmove", function(evt) { 
    var p = stage.globalToLocal(evt.stageX, evt.stageY); 
    this.x = p.x + this.offset.x; 
    this.y = p.y + this.offset.y; 
}); 

Animate CC 2017またはAnimate 2015.2を使用していますか?私はそれが役に立てば幸い

デーブあなたの助けが、そのまだ動作していないため

関連する問題