EaselJS-在缩放的图像上平移 [英] EaselJS - broken panning on zoomed image

问题描述

在此示例中，我无法固定平移-除非您先移动缩放的图像然后再次进行缩放(否则偏移设置为默认值，并且视图跳至初始位置-

I'm having trouble fixing panning in this example - it works fine unless you move the zoomed image and then zoom again(offset is set to default value and the view jumps to initial position - http://jsfiddle.net/p2Qzg/). Any ideas on how to fix that? I've been trying to solve that for three days now, without any good results.

    var canvas= document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;   
var stage = new createjs.Stage("myCanvas");

function addCircle(r,x,y){
    var g=new createjs.Graphics().beginFill("#ff0000").drawCircle(0,0,r);
    var s=new createjs.Shape(g)
    s.x=x;
    s.y=y;
    stage.addChild(s);
    stage.update();
}

addCircle(10,200,100);
addCircle(5,canvas.width/2,canvas.height/2);
addCircle(3,400,400);

canvas.addEventListener("mousewheel", MouseWheelHandler, false);
canvas.addEventListener("DOMMouseScroll", MouseWheelHandler, false);

var zoom;

function MouseWheelHandler(e) {
    if(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))>0)
        zoom=1.1;
    else
        zoom=1/1.1;
    stage.regX += stage.mouseX - stage.regX;
    stage.regY += stage.mouseY - stage.regY;
    stage.x=stage.mouseX;
    stage.y=stage.mouseY;   
    stage.scaleX=stage.scaleY*=zoom;

    stage.update();

}


stage.addEventListener("stagemousedown", function(e) {
    var offset={x:stage.x-e.stageX,y:stage.y-e.stageY};
    stage.addEventListener("stagemousemove",function(ev) {
        stage.x = ev.stageX+offset.x;
        stage.y = ev.stageY+offset.y;
        stage.update();
    });
    stage.addEventListener("stagemouseup", function(){
        stage.removeAllEventListeners("stagemousemove");
    });
}); 

推荐答案

有点旧，但由于它仍然需要anwser:

Kind of old but since it still need an anwser:

虽然很棒的json小提琴.我在工作中使用它来修复错误.

Great json fiddle though. I used it in my work an fixed the bug.

只需替换:

  stage.regX += stage.mouseX - stage.regX;
  stage.regY += stage.mouseY - stage.regY;

使用这些代码行:

var local = stage.globalToLocal(stage.mouseX, stage.mouseY);
stage.regX=local.x;
stage.regY=local.y;

像魅力一样工作. 我分叉了您的jsfiddle并相应地对其进行了更改. http://jsfiddle.net/kz0dL78k/

Works like a charm. I forked of your jsfiddle and changed it accordingly. http://jsfiddle.net/kz0dL78k/

这篇关于EaselJS-在缩放的图像上平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！