Drag & Drop не работает должным образом на Retina iPad (createjs)

Question

Я хочу создать простое упражнение перетаскивания, но на iPad Retina "перетаскивание" работает неправильно. Вот код:

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 Animate CC, и экспортированный HTML-файл содержит следующий код, чтобы он выглядел хорошо на экранах с высоким разрешением, таких как 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);   

Если я уберу функцию resizeCanvas, перетаскивание на iPad будет работать нормально, но разрешение будет НАМНОГО хуже.

Есть идеи для обхода?

Answer 1

У меня недавно была похожая проблема. Вы пробовали следующее?

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?

Надеюсь, это поможет,

Дейв

Answer 2

Мой первоначальный ответ был неверным.

Проблема на самом деле просто связана с тем, что этап масштабирования, который масштабирует ваши координаты. Вы можете решить эту проблему путем преобразования ваших координат в текущую область:

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

Надеюсь, это поможет.