javascript - 光标不跟随在html5 Canvas 中绘制的矩形的位置

Question

我有这段代码，可以让我在 Canvas 上绘制矩形: https://jsfiddle.net/6u7bLkwc/4/

要在 Canvas 上绘制矩形，请单击图像，然后拖动鼠标。

要重现我的问题，请按照以下步骤操作:

• 像上面提到的那样绘制一个矩形。
• 然后点击“添加文本”按钮。
• 现在尝试绘制另一个矩形，您会发现光标与矩形的位置不同。

即使我动态添加或删除页面上的任何元素，如何使我的代码正常工作？

我尝试这样做:

var shape = new Shape(mouseDownX - canvasOffset.left, mouseDownY - canvasOffset.top, mouseX - mouseDownX, mouseY - mouseDownY, color);

但没有解决。

诸如更新新职位之类的事情可以解决它，但不知道如何处理。

Answer 1

在这里检查解决方案:https://jsfiddle.net/6u7bLkwc/9/

问题是您没有计算相对于 Canvas 位置的 PageX 和 PageY，而是计算相对于整个页面的 PageX 和 PageY，这给了您错误的坐标。

我刚刚更改了这些:

mouseDownX = e.pageX;
mouseDownY = e.pageY;

对此:

mouseDownX = e.pageX - this.offsetLeft;
mouseDownY = e.pageY - this.offsetTop;

更新

对于其他一些情况，您应该只在 Canvas 上使用 getBoundingClientRect() 方法来获取相对于视口(viewport)的元素位置，如以下 jsfiddle 显示 sfiddle.net/dkboaq7p/2

//获取元素的相对位置

var canvasPosition=document.getElementById("canvas").getBoundingClientRect();

  mouseDownX =  e.pageX - canvasPosition.left;
  mouseDownY =  e.pageY - canvasPosition.top;