Javascript 在缩放的HTML5画布上绘制

我有两个重叠画布元素，一个用于显示图像，另一个用于在此图像上绘制具有不同颜色和厚度的线条。我使用jQuery的Panzoom库来缩放图像，效果很好。 但在缩放的画布上绘制时，线点与鼠标单击事件的点不匹配

这个问题有什么简单的解决办法吗

不缩放用于绘制的画布将是一个问题，因为我稍后将使用此画布作为原始图像的其他转换的过滤器，因此它们必须具有相同的大小

也许最好不要使用库，从头开始编写代码，但这似乎需要做很多工作，而且我经验不足，所以我不确定自己是否能做到

---

因此，我需要一些指导原则，这样我就知道该以何种方式思考以及如何开始。

我在另一篇文章中发布了类似的答案，因此我将尝试重用它并对其进行一些修改，以接收点击事件，是的，我从头开始编写了它。这不是很多工作，但这是因为我已经写了很多次这个项目

这是我在一家需要图表应用程序的公司工作时写的一个项目的简介。我假设您要查找的是与缩放图像相关的鼠标坐标

我建议您使用的鼠标坐标实际上是一个百分比系统。缩放图像时，图像为图像原始大小的百分比。您可以将鼠标在画布上的位置反映为缩放图像的百分比：即：x=20%，y=12%。假设您的图像通常为100px宽，100px高，但缩放到200%，使图像为200px乘200px，画布为-20%左，顶部为-20%，单击画布上（0，0）的鼠标将位于缩放图像上的（20%，20%），使您的鼠标坐标位于缩放图像上（40，40）

下面是一个片段：

this.yPos = evt.y;
this.xPos = evt.x;

this.xPercPos = ((this.xPos - Main.canvas.gLeftStart) / (Main.canvas.originW * Main.canvas.zoomX)) * 100;

this.yPercPos = ((this.yPos - Main.canvas.gTopStart) / (Main.canvas.originH * Main.canvas.zoomY)) * 100;

Main.xLabel.innerHTML = Main.xLabel.stndrdText + this.xPercPos.toFixed(3) + '%';
Main.yLabel.innerHTML = Main.yLabel.stndrdText + this.yPercPos.toFixed(3) + '%';

---

您可以包含JSFIDLE吗？一个代码示例？如果没有代码示例，那就没有什么意义了。这很有意义，实际上这是一个非常常见的问题，但是没有多少人要求在缩放图像上提供鼠标坐标。现在请记住，百分比是整个缩放图像的百分比。如果要在鼠标单击点开始绘制直线，可以将这些百分比转换为缩放图像的坐标。