跟踪相对于元素的光标位置 - javascript / jquery答案

【问题标题】：Track cursor position relative to element - javascript / jquery跟踪相对于元素的光标位置 - javascript / jquery
【发布时间】：2020-01-15 10:14:50
【问题描述】：

我正在尝试创建一个在我的平台上使用的绘图工具，使用以下代码可以正常工作：

draw(event.clientX - image.position.left, event.clientY - image.position.top);

image.position 是正在绘制的图像的位置。有时图像大于容器的高度，这意味着您必须向下滚动。当您向下滚动时，笔会比光标向上绘制。

function draw(x, y) {
    canvas.ctx.beginPath();
    canvas.ctx.strokeStyle = 'black';
    canvas.ctx.moveTo(lastX, lastY);
    canvas.ctx.lineTo(x, y);
    canvas.ctx.closePath();
    canvas.ctx.stroke();
    lastX = x; lastY = y;
}

https://codepen.io/illfre/pen/eYOKKeY

【问题讨论】：

您可以将鼠标监听器直接添加到画布上，并使用offsetX 和offsetY 而不是clientX 和clientY，这是一个示例：codepen.io/asdfgdsfad/pen/vYBrVNx
你测试过我的例子吗？它对我来说似乎工作正常。
是的，它仍然有效。
lastX和lastY有问题，需要用鼠标清除

标签： javascript jquery html5-canvas

【解决方案1】：

正如 Titus 所说，您可以改用画布事件并使用 offsetX 和 offsetY。

draw(event.offsetX, event.offsetY);

我已经更新了我的 copen https://codepen.io/illfre/pen/eYOKKeY

【讨论】：