为什么Javascript在这里不执行预期的操作

Question

所以我正试图创建一个网站，在其中我可以将这些北约部队放置在地图上。到目前为止一切都很顺利，直到我开始研究缩放功能。目标是以2或0.5的恒定因子缩放地图画布，并且所有单元都将保持其相对于地图的中心位置。然而，由于无法看到小型单元，这些单元将保持相同的大小。

我目前很难理解为什么缩放目前不起作用。快速浏览一下该网站就会发现一些重大缺陷。我怀疑它与这两行有关，draw.js:中缩放(级别(函数的第177行和第178行

draggableElementsA[i].style.top = (draggableElementsA[i].getBoundingClientRect().top + (draggableElementsA[i].getBoundingClientRect().height / 2) - c1) * level - (draggableElementsA[i].getBoundingClientRect().height / 2) + canvas.getBoundingClientRect().top + "px";
draggableElementsA[i].style.left = (draggableElementsA[i].getBoundingClientRect().left + (draggableElementsA[i].getBoundingClientRect().width / 2) - c2) * level - (draggableElementsA[i].getBoundingClientRect().width / 2) + canvas.getBoundingClientRect().left + "px";

应在实际文件中明确上下文。该功能执行一个奇怪的操作：它将单位从屏幕上移开，远远大于任何单独的测量值。非常感谢您的帮助！

Answer 1

我认为在缩放状态下滚动时会出现问题。具体来说，放大、移动对象和取消缩放会导致项目偏移。

记录XY坐标时，特别是在以下两行中：

pos3 = parseInt(e.clientX);
pos4 = parseInt(e.clientY);

记录相对于游戏板顶部的位置，而不仅仅是鼠标光标在屏幕上的位置。