拖曳Retina iPad（createjs）无法正常工作 [英] Drag & Drop not working properly on Retina iPad (createjs)

问题描述

我想创建一个简单的拖放放弃运动，但在Retina iPad上拖放不能正常工作。
这里是代码：

  var that = this; 
 createjs.Touch.enable（stage）; 
 stage.enableMouseOver（10）; 
 
函数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 Animate CC，导出的HTML文件包含以下代码使其在高分辨率屏幕（如Retina iPad）上看起来很好：

  //支持hidpi屏幕和响应缩放的代码。 
函数makeResponsive（isResp，respDim，isScale，scaleType）{
 var lastW，lastH，lastS = 1; 
 window.addEventListener（'resize'，resizeCanvas）; 
 resizeCanvas（）; 
函数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上正常工作，但分辨率更差。

任何解决方法的想法？

解决方案

最近我也有类似的问题。你有没有尝试过以下？

  shape.on（pressmove，function（evt）{
 var p = stage.globalToLocal（evt.stageX，evt.stageY）; 
 this.x = px + this.offset.x; 
 this.y = py + this.offset.y; 
} ）;您是否使用Animate CC 2017或Animate 2015.2？
 
 $ b $ p 
 
 
我希望有帮助，
 
 
 
 Dave 
 
I want to create a simple drag & drop exercise, but on the Retina iPad "drag & drop" is not working properly.
Here is the code:
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();
I can drag the shape, but the more I move it, the more it moves away from my finger. Here is a video I just recorded:
https://dl.dropboxusercontent.com/u/11697167/animatecc-bug.mp4

I'm working with Adobe Animate CC, and the exported HTML file contains the following code to make it look good on high-res screens like the Retina 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);   
If I remove the resizeCanvas function, drag & drop is working fine on the iPad but the resolution is MUCH worse.

Any ideas for a workaround?
解决方案
I had a similar problem recently. Have you tried the following ?
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;
});
Are you using Animate CC 2017 or Animate 2015.2 ?

I hope that helps,

Dave

                        
这篇关于拖曳Retina iPad（createjs）无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！