缩放后在 canvas 上绘图
Drawing on canvas after zoom
我正在开发 HTML5 应用程序，它在 canvas 上呈现形状。形状由用户绘制，使用自由绘图。
由于这个答案，我实现了缩放：
但是，一旦 canvas 被缩放，当用户继续绘制时，线条出现偏移。问题是如何平移这些点，以便再次在光标下绘制线条？
当您从 <canvas> 元素获取鼠标坐标时，就 DOM 而言，它们是相对于元素的高度和宽度的。它们不会根据您如何缩放 canvas 的上下文而改变。为了获得光标下 canvas 的坐标，您必须转换它们以匹配 canvas 的当前转换。
// mouse event coordinates
var mouseX;
var mouseY;
// current canvas transforms
var originX;
var originY;
var scale;
// adjust mouse coordinates with canvas context's transforms
var canvasX = mouseX / scale + originX;
var canvasY = mouseY / scale + originY;
// should draw a rectangle with the cursor being directly in the center
context.fillRect(canvasX - 10, canvasY - 10, 20, 20);
我正在开发 HTML5 应用程序，它在 canvas 上呈现形状。形状由用户绘制，使用自由绘图。
由于这个答案，我实现了缩放：
但是，一旦 canvas 被缩放，当用户继续绘制时，线条出现偏移。问题是如何平移这些点，以便再次在光标下绘制线条？
当您从 <canvas> 元素获取鼠标坐标时，就 DOM 而言，它们是相对于元素的高度和宽度的。它们不会根据您如何缩放 canvas 的上下文而改变。为了获得光标下 canvas 的坐标，您必须转换它们以匹配 canvas 的当前转换。
// mouse event coordinates
var mouseX;
var mouseY;
// current canvas transforms
var originX;
var originY;
var scale;
// adjust mouse coordinates with canvas context's transforms
var canvasX = mouseX / scale + originX;
var canvasY = mouseY / scale + originY;
// should draw a rectangle with the cursor being directly in the center
context.fillRect(canvasX - 10, canvasY - 10, 20, 20);