HTML5 Canvas ~ 縮放並保持當前 Canvas 相對偏移（視口中心點）

Question

帖子， 放大一個點（使用縮放和翻譯）
沒有完全提供我正在尋找的答案； 即，“在縮放畫布后，如何將畫布上當前位於視口窗口中心的點保持在相同的相對位置？”

Answer 1

畫布偏移

上面的藍色矩形代表視口（監視器）。

紅色矩形代表當前超出視口的畫布。

當您縮放畫布時，如何將紅點保持在相同的相對位置？

讓我們看看 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);