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

Question

上的post， Zoom in on a point (using scale and translate)
没有完全提供我正在寻找的答案；即，"How to you keep the current point on the canvas that is centered in the view port window at the same relative position after you scale the canvas?"

Answer 1

canvas offset

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

红色矩形表示 canvas 当前超出视口。

缩放canvas时，如何使红点保持在相同的相对位置？

让我们看看 x 维度：

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

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

您真正关心的数字是定位 canvas 的 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);

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

HTML5 Canvas ~ Zoom and Keep Current Canvas Relative Offset (view port center point)

html

javascript

scale

scaletransform

html5-canvas