光标不按照HTML5画布绘制矩形的位置

我有这样的代码，让我画矩形在画布上： https://jsfiddle.net/6u7bLkwc/4/光标不按照HTML5画布绘制矩形的位置

为了在画布上绘制一个矩形，单击图像，然后拖动你的鼠标。

要重现我的问题，请按照此步骤：

像画在上面mentionned一个矩形。
然后点击ADD TEXT按钮。
现在尝试绘制另一个矩形，您将看到您的光标与矩形的方式不同。

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

我试着这样做：

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

但并没有解决它。

像更新新职位会解决它，但不知道如何处理。

来源

2016-12-05 Jis Maxi

检查以下:) –

解决这不能完全解决了这个问题，请看看这里大约相同的脚本，但仍然存在问题：jsfiddle.net/dkboaq7p/1 –

再次检查你提供的第一个和第二个例子是不同的情况 –

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

的问题是，你是不是计算pageX属性和PageY相对于屏幕的位置，而是到是给你错座标整个页面。

我刚才已经改变了这些：

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

这样：

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

UPDATE

对于您应该只使用getBoundingClientRect（）方法在画布上的一些其他情况获取相对于视口的元素位置，如以下jsfiddle所示：sfiddle.net/dkboaq7p/2

//获取元素的相对位置

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

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

来源

2016-12-05 22:38:13

这完全没有解决问题，请看这里关于相同的脚本，但仍然存在的问题：https://jsfiddle.net/dkboaq7p/1/ –

@JisMaxi https://jsfiddle.net/dkboaq7p/2/ <<检查这个其他情况下，你可以使用getBoundingClientRect（）方法获取相对于页面 –

的元素位置，请看看这里：https://jsfiddle.net/dkboaq7p/3/，添加一个矩形，然后点击'HIDE TEXT'，再次尝试添加矩形，您将再次看到问题。试着解决这最后一个...我认为就像我在帖子中写到的解决方案，必须在隐藏'＃thediv'后获得新的偏移量（以这种方式查看）。 –

光标不按照HTML5画布绘制矩形的位置

回答

相关问题