HTML5 Canvas Zoom 在不同的点上不起作用答案

【问题标题】：HTML5 Canvas Zoom on different points not workingHTML5 Canvas Zoom 在不同的点上不起作用
【发布时间】：2020-10-27 20:35:36
【问题描述】：

我正在尝试在 HTML5 Canvas 中实现缩放。我遇到了其他解释如何做到这一点的线程，但它们利用了画布的上下文，存储了以前的转换。我想避免这种情况。

到目前为止，我设法做到以下几点 (https://jsfiddle.net/wfqzr538/)

<!DOCTYPE html>
<html>

<body style="margin: 0">
  <canvas id="canvas" width="400" height="400" style="border: 1px solid #d3d3d3"></canvas>
  <script>
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");
    let cursorX = 0,
      cursorY = 0;
    let zoom = 1;

    canvas.onmousemove = mouseMove;
    window.onkeydown = keyDown;

    draw();

    function mouseMove(evt) {
      cursorX = evt.clientX;
      cursorY = evt.clientY;
    }

    function keyDown(evt) {
      if (evt.key == "p") {
        zoom += 0.1;
      }
      if (evt.key == "m") {
        zoom -= 0.1;
      }
      draw();
    }

    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

      const translationX = -cursorX * (zoom - 1);
      const translationY = -cursorY * (zoom - 1);
      context.translate(translationX, translationY);
      context.scale(zoom, zoom);

      context.fillRect(100, 100, 30, 30);

      context.scale(1 / zoom, 1 / zoom);
      context.translate(-translationX, -translationY);
    }
  </script>
</body>

</html>

如果我在同一位置缩放，上面的代码可以工作，但一旦我改变它就会中断。例如，如果我在正方形的左上角放大两次，它就可以工作。但是，如果我在左上角缩放一次，然后在右下角缩放，它就会中断。

我已经尝试解决这个问题一段时间了。我认为它没有考虑以前在画布上进行的翻译，但我不确定。

非常感谢您的帮助。

【问题讨论】：

标签： javascript html html5-canvas

【解决方案1】：

不保持以前的状态

如果您不想保持之前的转换状态，那么您将无法做您想做的事情。

有很多方法可以保持以前的状态

以前的世界状态

您可以变换所有对象的世界状态，实际上是将先前的变换嵌入到对象的坐标中。

例如缩放和平移

object.x = object.x * zoom + translate.x;
object.y = object.y * zoom + translate.y;
object.w *= zoom;
object.h *= zoom;

然后使用默认变换进行绘制

ctx.setTransform(1,0,0,1,0,0);
ctx.fillRect(object.x, object.y, object.w, object.h);

之前的转换状态

要缩放某个点（绝对像素坐标），您需要知道之前的原点在哪里，这样您就可以确定缩放点与该原点的距离并在缩放时正确移动它。

您的代码不跟踪原点，实际上它假定它始终位于 0,0。

示例

该示例使用表示转换的数组跟踪先前的transform 状态。它等同于您的代码定义为translation 和zoom。

  // from your code
  context.translate(translationX, translationY);
  context.scale(zoom, zoom);

  // is 
  transform = [zoom, 0, 0, zoom, translationX, translationY];

该示例还更改了缩放速率。在您的代码中，您从缩放中添加和减去，这将导致负缩放，并且在放大时需要永远达到大比例。比例作为标量应用，例如zoom *= SCLAE_FACTOR

函数zoomAt在画布上的给定点放大或缩小

const ctx = canvas.getContext("2d");
const transform = [1,0,0,1,0,0];
const SCALE_FACTOR = 1.1;
const pointer = {x: 0, y: 0};
var zoom = 1;
canvas.addEventListener("mousemove", mouseMove);
addEventListener("keydown", keyDown);
draw();
function mouseMove(evt) {
    pointer.x = evt.clientX;
    pointer.y = evt.clientY;
    drawPointer();
}
function keyDown(evt) {
    if (evt.key === "p") { zoomAt(SCALE_FACTOR, pointer) }
    if (evt.key === "m") { zoomAt(1 / SCALE_FACTOR, pointer) }
}
function zoomAt(amount, point) {
    zoom *= amount;
    transform[0] = zoom;  // scale x
    transform[3] = zoom;  // scale y
    transform[4] = point.x - (point.x - transform[4]) * amount;
    transform[5] = point.y - (point.y - transform[5]) * amount;
    draw();
}
function draw() {
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.setTransform(...transform);
    ctx.fillRect(100, 100, 30, 30);
}
function drawPointer() {
    draw();
    ctx.lineWidth = 1;
    ctx.strokeStyle = "black";
    const invScale = 1 / transform[0]; // Assumes uniform scale
    const x = (pointer.x - transform[4]) * invScale;
    const y = (pointer.y - transform[5]) * invScale;
    const size = 10 * invScale;
    ctx.beginPath();
    ctx.lineTo(x - size, y);
    ctx.lineTo(x + size, y);
    ctx.moveTo(x, y - size);
    ctx.lineTo(x, y + size);
    ctx.setTransform(1, 0, 0, 1, 0, 0); // to ensure line width is 1 px
    ctx.stroke();
    ctx.font = "16px arial";
    ctx.fillText("Pointer X: " + x.toFixed(2) + "  Y: " + y.toFixed(2), 10, 20);
}

* {margin: 0px}
canvas { border: 1px solid #aaa }

&lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;

更新

我添加了函数drawPointer，它使用变换计算指针世界位置，在该位置渲染十字准线并显示坐标。

【讨论】：

鉴于示例中的代码，我们如何将屏幕坐标转换为画布坐标？我知道我们可以用变换矩阵的逆来做一些事情，但我不能在我正在使用的代码库中这样做。我设法计算出公式focusPoint + (cursor - focusPoint) / zoom，但在不同坐标上多次缩放后它会中断。
@jnforja 我已经用新功能 drawPointer 更新了答案，它可以满足我的需求。将画布坐标（屏幕）转换为世界（转换后的）坐标。将世界转换为屏幕sx = wx * transform[0] + transform[4]; sy = wy * transform[3] + transform[5];，其中wx、wy 是世界坐标。