Javascript/画布：移动和缩放矩形。。。工作但是

我做了一个样品和一个样品。直到我改变大小（正方形）为止，改变正方形大小后，鼠标移动速度比正方形快。我怎样才能修好它

html

按鼠标右键将比例更改为0.5，然后查看问题

javascript

var ctx = test.getContext('2d');
var obj = { x:100,y: 100,width: 100,height: 100}
var mouse = {x:0, y:0, width:10, height:10};

// change zoom to 0.5 
var zoom = 1;
var move = {startX: 0, startY: 0, click: false}; 

setInterval(function(){
    ctx.clearRect(0,0,test.width,test.height);
    ctx.save();
    ctx.scale(zoom,zoom);
    ctx.fillRect(obj.x,obj.y,obj.width,obj.height);
    ctx.restore();
    if(move.click){
        obj.x = mouse.x - move.startX;
        obj.y = mouse.y - move.startY;
    }
},1000/60);

function collision(obj1,obj2){
    if(obj1.x*zoom < obj2.x + obj2.width &&
   (obj1.x + obj1.width)*zoom > obj2.x &&
   obj1.y *zoom < obj2.y + obj2.height &&
   (obj1.height + obj1.y)*zoom > obj2.y){
            return true;
    }
}

window.addEventListener('mousedown', function(e){
    if(collision(obj,mouse)){
        move.click = true;
        move.startX = e.pageX - obj.x;
        move.startY = e.pageY - obj.y;
    }

  if(e.which==3 || e.which==2){
    zoom=0.5;
  }
}, false);

window.addEventListener('mouseup', function(e){
    move.click = false;
}, false);

window.addEventListener('mousemove', function(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}, false);

var ctx=test.getContext（'2d'）；
var obj={x:100，y:100，宽度：100，高度：100}
var鼠标={x:0，y:0，宽度：10，高度：10}；
//将缩放更改为0.5
var-zoom=1；
var move={startX:0，startY:0，click:false}；
setInterval（函数（）{
ctx.clearRect（0,0，测试宽度，测试高度）；
ctx.save（）；
缩放（缩放，缩放）；
ctx.fillRect（对象x、对象y、对象宽度、对象高度）；
ctx.restore（）；
如果（移动。单击）{
obj.x=mouse.x-move.startX；
obj.y=mouse.y-move.startY；
}
},1000/60);
功能冲突（obj1、obj2）{
如果（obj1.x*缩放obj2.x&&
obj1.y*缩放obj2.y）{
返回true；
}
}
window.addEventListener（'mousedown'，函数（e）{
if（碰撞（obj，鼠标））{
move.click=true；
move.startX=e.pageX-obj.x；
move.startY=e.pageY-obj.y；
}
如果（e.which==3 | | e.which==2）{
缩放=0.5；
}
}，假）；
window.addEventListener（'mouseup'，函数（e）{
move.click=false；
}，假）；
window.addEventListener（'mousemove'，函数（e）{
mouse.x=e.pageX；
mouse.y=e.pageY；
}，假）；

你好！我想如果你能更好地组织代码，你会发现错误的。现在，您不知道在哪里以及如何查找它问题是您正在使用

scale

缩放画布，但您没有相应地缩放鼠标距离。基本上，当设置

obj.x

和

obj.y

时，您必须除以

zoom

因子。。。感谢上帝的建议和更新。

var ctx = test.getContext('2d');
var obj = { x:100,y: 100,width: 100,height: 100}
var mouse = {x:0, y:0, width:10, height:10};

// change zoom to 0.5 
var zoom = 1;
var move = {startX: 0, startY: 0, click: false}; 

setInterval(function(){
    ctx.clearRect(0,0,test.width,test.height);
    ctx.save();
    ctx.scale(zoom,zoom);
    ctx.fillRect(obj.x,obj.y,obj.width,obj.height);
    ctx.restore();
    if(move.click){
        obj.x = mouse.x - move.startX;
        obj.y = mouse.y - move.startY;
    }
},1000/60);

function collision(obj1,obj2){
    if(obj1.x*zoom < obj2.x + obj2.width &&
   (obj1.x + obj1.width)*zoom > obj2.x &&
   obj1.y *zoom < obj2.y + obj2.height &&
   (obj1.height + obj1.y)*zoom > obj2.y){
            return true;
    }
}

window.addEventListener('mousedown', function(e){
    if(collision(obj,mouse)){
        move.click = true;
        move.startX = e.pageX - obj.x;
        move.startY = e.pageY - obj.y;
    }

  if(e.which==3 || e.which==2){
    zoom=0.5;
  }
}, false);

window.addEventListener('mouseup', function(e){
    move.click = false;
}, false);

window.addEventListener('mousemove', function(e){
    mouse.x = e.pageX;
    mouse.y = e.pageY;
}, false);