在 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 比例因子。