javascript - 如何在 Canvas 中的单击点上居中和缩放

Question

我正在使用 HTML Canvas 构建一个小地理区域的交互式 map 。 Canvas 将是所使用的 map 图像的完整宽度和高度。 map 上会点缀一些点，单击其中一个点时， Canvas 应以该点为中心，然后对其进行放大。

到目前为止，我已经尝试过在绘图上下文上使用translate，绘制 map 图像以使单击的点位于 Canvas 的中心，然后使用scale 进行缩放，如下:

var clickX = e.offsetX || (e.pageX - canvas.offsetLeft);
var clickY = e.offsetY || (e.pageY - canvas.offsetTop);

clickedPoint = { x: clickX, y: clickY };

ctx.translate(
    canvas.width/2 - clickedPoint.x,
    canvas.height/2 - clickedPoint.y
);
ctx.scale(2, 2);

但是，当我此时绘制时，图像没有出现在预期的位置。我猜测是因为翻译点在缩放函数之后没有对齐，因为在没有缩放的情况下翻译正确发生，但我似乎无法让它工作 - 谁能解释如何解决这个问题？

编辑:示例链接 - http://staging.clicky.co.uk/canvas/

Answer 1

要在 Canvas 上的某个点进行缩放，您必须知道当前缩放/比例尺和当前原点。如果您不跟踪此信息，您将无法在 Canvas 上的某个点正确缩放。

如果您的比例和原点默认为 scale = 1，并且 origin = {x:0,y:0}

// scale  is current scale
// origin is current origin
function scaleAt (at, amount) { // at in screen coords amount is amount to scale
    scale *= amount;
    origin.x = at.x - (at.x - origin.x) * amount;
    origin.y = at.y - (at.y - origin.y) * amount;
};

var scale = 1;
const origin = {x : 0, y : 0};


// in mouse event
// scale is change in scale
scaleAt(clickedPoint,2); // scale 2 times at clickedPoint
// then set the transform
ctx.setTransform(scale,0,0,scale,origin.x,origin.y)

使用固定比例将图像上的点置于 Canvas 中心中心

// scale and origin from above code.
// newScale is absolute scale
function scaleMoveCenter (point, newScale) { 
    scale = newScale;
    origin.x = canvas.width / 2 - point.x * scale;
    origin.y = canvas.height / 2 - point.y * scale;
}
// in mouse event
scaleMoveCenter (clickedPoint,2);
// then set the transform
ctx.setTransform(scale,0,0,scale,origin.x,origin.y)

如果 Canvas 已经设置了非默认的比例和原点，则需要在该坐标系中找到该点。

// 
const realPos = {};
realPos.x = (clickedPoint.x - origin.x ) / scale;
realPos.y = (clickedPoint.y - origin.y ) / scale;

// increase scale by 2
scaleMoveCenter (realPos ,scale * 2);
// then set the transform
ctx.setTransform(scale,0,0,scale,origin.x,origin.y)