Question

我想创建一个简单的拖动和放大器放下运动，但在Retina iPad＆＃34;拖放＆amp; amp;降＆＃34;工作不正常。这是代码：

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函数，请拖放＆amp; iPad在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;
});

希望有所帮助。

拖拽在Retina iPad上无法正常工作（createjs）

2 个答案: