Question

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

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

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

也许最好不要使用库并从头开始编写代码，但这似乎很多工作而且我没有足够的经验，所以我不确定我是否可以制作它。

所以我需要一些指导方针，所以我知道在哪种方式思考以及如何开始。

Answer 1

我在另一篇文章中发布了类似的答案，所以我会尝试重用它并稍微修改它以接收点击事件，是的，我是从头开始编写的。这不是那么多工作，而是因为我已经多次写过这个项目了。

这是我为一家想要绘制图表应用程序的公司工作时写的项目。我认为你要找的是相对于缩放图像的鼠标坐标。

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

Here is the project

Here is the project fullscreen

这是一个片段：

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) + '%';

在缩放的HTML5画布上绘图

1 个答案: