时间戳

首页 > 解决方案 > HTML5 Canvas ~ 缩放并保持当前 Canvas 相对偏移量（视口中心点）

javascript - HTML5 Canvas ~ 缩放并保持当前 Canvas 相对偏移量（视口中心点）

问题描述

上的帖子 放大一点（使用比例和平移）
并没有完全提供我正在寻找的答案；也就是说，“如何在缩放画布后将画布上位于视口窗口中心的当前点保持在相同的相对位置？”

标签： javascripthtmlhtml5-canvasscalescaletransform

解决方案

画布偏移

上面的蓝色矩形代表视口（监视器）。

红色矩形代表当前超出视口的画布。

当您缩放画布时，如何将红点保持在相同的相对位置？

让我们看一下 x 维度：

画布的当前宽度为 100 = 30 + 50 + 20

如果我们缩放 2 倍，则当前宽度变为 200 = 60 + 100 + 40；但是，视口仅代表新的 100 宽度中的 50：200 = 60 + (25 + 50 + 25) + 40

您真正关心的数字是放置画布的 x 和 y 偏移量；目前 x 偏移量为 -30。新的偏移量，使红点在 2 倍缩放后保持在相同的相对位置将是 -85 = (-1)*(60 + 25)。

新的相对位置将是 110 = 60 + 25 + 25（第二个 25 是视口尺寸的一半）。请注意，55 x 2 = 110。

在代码中：

    boundingBoxLeft = boundingBox.left;
    beginCanvasWidth = canvas.width;
    canvas.width = canvasWidth*scaleFactor;
    var scaleChange = canvas.width/beginCanvasWidth;

    var leftOffset = ((-1)*boundingBoxLeft*scaleChange) + 
            (((window.innerWidth*scaleChange) - window.innerWidth)/2);

推荐阅读