Question

有关该帖子， Zoom in on a point (using scale and translate)
并没有提供我一直在寻找的答案；即，“缩放画布后，如何使当前在视口窗口中心的画布上的点保持在相同的相对位置？”

Answer 1

canvas offset

上方的蓝色矩形表示查看端口（监视器）。

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

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

让我们看一下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);

HTML5画布〜缩放并保持当前画布的相对偏移（查看端口中心点）

1 个答案: