拖放不能在Retina iPad上正常工作（createjs）

我想創建一個簡單的拖動&下拉式運動，但在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

我與Adobe動畫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上工作正常，但分辨率更糟糕。

解決方法的任何想法？

來源

2016-11-08 kintaro

我的原始答案是錯誤的。

這個問題實際上只是與舞臺縮放這一事實有關，該縮放會縮放您的座標。您可以通過將座標轉換爲當前範圍來解決此問題：

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

希望有所幫助。

來源

2016-11-08 17:52:14 Lanny

感謝您的幫助，但它仍然沒有工作。現在，當我嘗試移動形狀時，它在計算機上「閃爍」（突然改變x/y位置）。我也刪除了抵消，但它仍然是一樣的。 – kintaro

好的問題是設備的像素比例。在iPad上它2而不是1.這固定它：this.x = evt.stageX/window.devicePixelRatio; this.y = evt.stageY/window.devicePixelRatio; – kintaro

我最近有類似的問題。你嘗試過以下嗎？

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？

我希望幫助，

戴夫

來源

2017-04-14 15:28:41

拖放不能在Retina iPad上正常工作（createjs）

回答

相關問題