滚动画布图像时，无法修改画布上的测谎仪

Posted 2023-03-05

【中文标题】滚动画布图像时，无法修改画布上的测谎仪

【英文标题】：modifying the polygraph on a canvas is not working when canvas image is scrolled

【发布时间】：2021-11-07 17:38:23

【问题描述】：

我目前遇到的问题是，当我在画布上滚动图像时，无法操作绘制的测谎仪。有没有办法在代码中解决这个问题？

在下面的 jsfiddle.net/heldersepu/egt92403/36 中，它与我在 Validate if mouse position is within rotated rectangle in html5 Canvas 中发布的帖子有关，并得到了 Helder Sepulveda 的帮助。

【参考方案1】：

您正在使用 event.clientY 和 event.clientX 来获取鼠标的位置，这两个属性是相对于屏幕的。

您可以使用 event.pageY 和 event.pageX 来获取相对于文档的坐标（这两个属性不受滚动影响） 或者用 window.scrollY 和 window.scrollX 偏移你自己的位置，一个例子可以在这里看到https://jsfiddle.net/faex5Lqc/2/（重要部分event.clientY - canvas.offsetTop + window.scrollY）