鼠标位置与HTML canvas ondrag不一致

Question

我试图在HTML画布中拖动一些形状，但是在确定鼠标坐标的变化方面我遇到了一个问题[dx，dy]

首先，坐标本身没有问题，存储在mousePos中，因为翻转效果完美无缺。我正在做的是，在第一次进入形状时，保存鼠标坐标。

pos = {x : mousePos[0] , y : mousePos[1]};

然后，onMotion每次鼠标移动时都会更新坐标以及记录当前位置

dx=mousePos[0]-pos.x;
dy=mousePos[1]-pos.y;
pos = {x : mousePos[0] , y : mousePos[1]};

然后我将dx和dy值添加到形状坐标（让我们以一个简单的矩形为例）

ctx.fillRect(0+this.dx,0+this.dy,100+this.dx,100+this.dy);

只要鼠标移动得不太快，它的效果相对较好（尽管不完美）。如果我快速移动鼠标而不离开窗口，矩形就无法赶上鼠标。我能理解是否有延迟赶上鼠标，但delta值如何关闭？显然我们知道我们从哪里开始，即使在这个过程中跳过几十个/几百个像素，最终鼠标应该停止并且应该计算正确的delta值。

任何帮助都会非常感激，因为我在这里遇到了一个概念墙。

Answer 1

当触发onMotion以获取实际位置而不是delta时，您可能会尝试获取e.layerX-Y。这样它就不能“关闭”。

要使用此功能，请将您的形状放入div中，其中style =“padding：0px; margin = 0px;” ，因为该位置是相对于父块的。