HTML5帆布〜缩放并保持当前的帆布相对偏移(查看端口中心点)

Question

帖子on，放大点（使用比例和翻译）
没有完全提供我想要的答案；哪个是："如何将当前点保留在缩放画布后相同相对位置的画布上的当前点？"

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);