Javascript 在画布中变换，移动时保持精灵处于正确位置

我有一个复杂的问题（至少对我来说），我一整天都在试图解决它，但在解决这个问题的时候运气并不好

我在画布上画了一个简单的圆圈和一个正方形，通过变换可以调整视图的角度

问题是，当我单击并拖动时，对象相对于角度的变化没有正确移动

这是我的绘图代码：

function draw(){

  ctx.clearRect(0,0,canvas.width,canvas.height);
  ctx.save();

  ctx.setTransform(1,0,0,1,canvas.width/2,canvas.height/2);  

  ctx.beginPath();

  var x  = (object.x - (camera.x/1)) * camera.scale;
      x *= transform.x;
  var y  = (object.y - (camera.y/1)) * camera.scale;
      y *= transform.y;

  ctx.rect(x-5, y-5,10,10);
  ctx.fill();

  ctx.restore();
  ctx.save();

  ctx.beginPath();

  ctx.setTransform(transform.x,0,0,transform.y,canvas.width/2,canvas.height/2); 

  var x  = (origin.x - (camera.x/1)) * camera.scale;
      x *= transform.x;
  var y  = (origin.y - (camera.y/1)) * camera.scale;
      y *= transform.y;      

  ctx.arc(x,y,radius,0,Math.PI*2);
  ctx.stroke();

  ctx.restore();

  window.requestAnimationFrame(draw); 

}

鉴于在没有上下文的情况下很难理解我所讲的内容，以及仅仅查看我的代码，我在这里提供了一个工作演示：

重现行为问题：

首先单击并拖动，注意正方形和圆形正确地一起移动

现在用鼠标滚轮调整相机的角度，请注意它们两个角度都正确

但是现在，在该角度，尝试单击并拖动，然后注意到世界空间中两个对象之间的断开连接。它们不再正确地一起移动 旁注：圆圈似乎在角度视图中正确移动，但不是正方形。但不知道为什么

所以这就是我被困的地方，我不知道如何解决它。我希望有人熟悉这些东西，知道如何解决它

---

谢谢

既然您已经设置了变换，就不再需要它了

只需删除以下两行：

 var x = (origin.x - (camera.x / 1)) * camera.scale;
 //x *= transform.x;
 var y = (origin.y - (camera.y / 1)) * camera.scale;
 //y *= transform.y;

更新的代码段：

var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
半径=150；
canvas.addEventListener（'contextmenu'，函数（e）{
e、 预防默认值（）；
}，假）；
canvas.addEventListener（'wheel'，函数（e）{
如果（e.deltaY<0）{
变换y+=0.05；
}否则{
变换y-=0.05；
}
if（变换y<0.7）{
变换y=0.7；
}
if（transform.y>1）{
变换y=1；
}
}，假）；
ctx.strokeStyle='#000000'；
ctx.fillStyle='#000000'；
变量原点={
“x”：50，
y:30
}
变量对象={
“x”：原点.x+半径，
“y”：原点.y-半径
};
变量转换={
“x”：1，
y:1
}
var摄像机={
“x”：0，
“y”：0，
“比例”：1
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.save（）；
ctx.setTransform（1,0,0,1，canvas.width/2，canvas.height/2）；
ctx.beginPath（）；
var x=（object.x-（camera.x/1））*camera.scale；
x*=变换.x；
变量y=（object.y-（camera.y/1））*camera.scale；
y*=变换y；
ctx.rect（x-5，y-5，10，10）；
ctx.fill（）；
ctx.restore（）；
ctx.save（）；
ctx.beginPath（）；
ctx.setTransform（transform.x，0，0，transform.y，canvas.width/2，canvas.height/2）；
var x=（origin.x-（camera.x/1））*camera.scale；
//x*=变换.x；
变量y=（origin.y-（camera.y/1））*camera.scale；
//y*=变换y；
ctx.弧（x，y，半径，0，数学PI*2）；
ctx.stroke（）；
ctx.restore（）；
window.requestAnimationFrame（绘制）；
}
draw（）；
//addEventListener（'mousedown'，函数（e）{cameraAngle（e，this）；}，false）；
canvas.addEventListener（'mousedown'，函数（e）{
移动摄像机（e，这个）；
}，假）；
功能移动摄像机（evt、el）{
var x=evt.offsetX，
y=evt.offsetY；
功能更新（e）{
var difx=x-e.offsetX，
dify=y-e.offsetY；
x=e.offsetX；
y=e.offsetY；
camera.x+=difx；
camera.y+=dify；
}
函数clear（）{
el.removeEventListener（'mousemove'，update，false）；
此.removeEventListener（'mouseup'，clear，false）；
}
el.addEventListener（'mousemove'，update，false）；
document.body.addEventListener（'mouseup'，clear，false）；
}

#画布{
边框：1px纯黑；
}

---

仅供读者参考，重构代码后，在添加相机运动时，此解决方案无法使用，因为静态内容是一个完美的解决方案。但我发布了一个新问题，其中增加了我目前正在努力解决的复杂问题：