如何在画布中的单击点上居中和缩放

Question

我正在使用 HTML 画布构建一个小型地理区域的交互式地图。画布将是使用的地图图像的全宽和全高。地图上会有几个点，当点击一个点时，画布应该以这个点为中心，然后放大它。

到目前为止，我已经尝试过在绘图上下文中使用translate，绘制地图图像，使点击的点位于画布的中心，然后使用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

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

如果您有默认为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)

使用固定比例在画布中心的图像上居中点

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

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

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