React Canvas：平移/缩放点

Question

我正在按照 YouTube 教程制作绘图应用程序。

他构建了一个缩放功能，只能放大到画布的中间。我想像谷歌地图一样实现缩放，以便光标保持在同一点上。

useLayoutEffect(() => {
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    const scaledWidth = canvas.width * scale;
    const scaledHeight = canvas.height * scale;

    const scaleOffsetX = (scaledWidth - canvas.width) * 0.5;
    const scaleOffsetY = (scaledHeight - canvas.height) * 0.5;

    setScaleOffset((prevValue) => ({
      x: scaleOffsetX,
      y: scaleOffsetY,
    }));

    ctx.save();
    ctx.translate(
      panOffset.x * scale - scaleOffsetX,
      panOffset.y * scale - scaleOffsetY
    );
    ctx.scale(scale, scale);

    elements.forEach((element) => {
      if (action === "writing" && selectedElement.id === element.id) return;
      drawElement(ctx, element);
    });
    ctx.restore();
  }, [elements, action, selectedElement, panOffset, scale]);

我已经尝试了我能想到的一切，并浏览了每个论坛帖子，但找不到任何对我来说足够有意义的东西，我可以将其插入到我现有的代码中。我尝试过矩阵乘法（我不理解背后的数学原理，所以我只能做复制/粘贴）。

通过将视口和缩放画布大小之间的差值减半的计算来偏移比例。我尝试将 0.5 更改为鼠标在屏幕上的百分比值（视口宽度的 0.5），效果很好，直到我移动鼠标并且整个画布突然移动。

Answer 1

如果要实现“缩放到点”或“缩放到光标”，可以通过计算光标位置的差异来实现。您必须在缩放之前和缩放之后获取鼠标位置并获取偏移量。