Javascript EaselJS-在缩放图像上进行不连续的平移
在本例中,我无法修复平移-除非移动缩放的图像,然后再次缩放(偏移设置为默认值,视图跳转到初始位置),否则平移效果很好。有没有办法解决这个问题?我已经试着解决这个问题三天了,没有任何好结果Javascript EaselJS-在缩放图像上进行不连续的平移,javascript,canvas,zooming,easeljs,panning,Javascript,Canvas,Zooming,Easeljs,Panning,在本例中,我无法修复平移-除非移动缩放的图像,然后再次缩放(偏移设置为默认值,视图跳转到初始位置),否则平移效果很好。有没有办法解决这个问题?我已经试着解决这个问题三天了,没有任何好结果 var canvas= document.getElementById("myCanvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var stage = new createjs.Stage
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: 不过小提琴很棒。我在工作中使用了它,并修复了这个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;
工作起来很有魅力。
我用叉子叉了你的JSFIDLE,并相应地修改了它。