在 html 画布上缩放鼠标绘图元素

Question

有没有办法在画布上缩放绘图元素？我正在创建一个应用程序，然后用户可以在画布上放置点，但是当我尝试调整浏览器窗口的大小时，所有元素都消失了。

我最初的尝试是计算调整大小前后的屏幕差异。得到百分比后，我只是将比例尺放在画布上，并将第一次绘制时保存的坐标放置在画布上，但仍然不起作用，如果点出现在画布上，则是在画布上没有缩放的同一个地方。有人可以给我一点思路吗？

private calculateCanvasScreenDifference(previousSize, guestScreen) {

    return ((controlScreen - currentSize) * 100) / controlScreen;

}

let difWidthPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousWidth, canvasWidth) * 0.01);

let difHeightPercent = Math.abs(this.calculateCanvasScreenDifference(canvasPreviousHeight, canvasHeight) * 0.01);                        

let scaleX = ((Math.abs(difWidthPercent) <= 1) ? 1.00 - difWidthPercent : difWidthPercent - 1.00);

let scaleY = ((Math.abs(difHeightPercent) <= 1) ? 1.00 - difHeightPercent : difHeightPercent - 1.00);

this.cx.scale(Number(scaleX), Number(scaleY));

...

...

// then start recreating the drawing that was previous saved on an array of object(x, y values)

this.cx.beginPath();

this.cx.arc(coord.x, coord.y, 7, 0, Math.PI * 2, true);

this.cx.stroke();

Answer 1

跟踪画布宽度并从比例因子 1 开始。let originalWidth = canvas.width;let scale = 1;在调整大小时计算新的比例因子。并更新跟踪的画布大小。let scale = newWidth / originalWidth;originalWidth = newWidth;始终对所有绘图使用比例因子。例如context.arc(coord.x * scale, coord.y * scale, radius, 0, Math.PI*2, false);注意：此方法假设原始画布和新画布大小成比例。如果不是，那么您将需要跟踪宽度和高度，并计算单独的 x 和 y 比例因子。