在 Canvas2D HTML5 中拖动放大的图像

Question

我有一个画布，我在其中将视频帧绘制为图像，如下所示：

ctxVideo.drawImage(img, 0, 0, canvasVideo.width * scale, canvasVideo.height * scale);

初始比例为 1.0，当用户点击放大/缩小按钮时它会发生变化，如下所示：

document.getElementById("plus").addEventListener("click", function (e) {
  scale /= scaleMultiplier;
}, false);

document.getElementById("minus").addEventListener("click", function () {
   scale *= scaleMultiplier;
   if (scale < 1.0) {
    scale = 1.0;
 }
}, false);

这工作得很好，它可以正确放大/缩小，但它会放大到画布的左上角。所以，我需要添加拖动功能，以便用户可以看到放大图像的其他部分。

知道如何实现这一目标吗？

Answer 1

最简单的方法可能是使用像 pan-zoom 这样的小型 js 库。否则，您需要自己计算所有偏移量和比例。