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)

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

1 个答案: