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

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。新偏移量，在2x刻度后将红点保持在相同的相对位置将为-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);