光标不跟随在 html5 画布中绘制的矩形的位置

Question

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

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

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

• 像上面提到的那样画一个矩形。
• 然后点击添加文本按钮。
• 现在尝试再画一个矩形，你会发现你的光标和矩形不一样。

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

我试着这样做：

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

但没有解决。

像更新新职位这样的事情会解决它，但不知道如何处理。

Answer 1

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

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

我刚刚更改了这些：

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

到这里：

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

更新

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

// 获取元素的相对位置

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

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