缩放后保持图像居中

Question

我在画布上绘制了一张图片，想要能够以任意比例缩放，并将图像保持在中心。为了实现这个目的，我的方法是改变画布上下文的缩放比例，并重新绘制图像，但我需要计算新图像的左上角位置，否则它就无法居中。

function zoom( canvas, context, scale ) {
    var image = new Image();
    image.src = canvas.toDataURL( 'image/png' );
    canvas.clearRect( 0, 0, canvas.width, canvas.height );
    context.scale( scale, scale );
    var x = ???,
        y = ???;
    context.drawImage( image, x, y );
}

问题是如何计算 x 和 y，以使其适用于任何比例尺。我已经找到了一些特殊情况，但找不到通用规律。当比例尺为0.5时，保持图像居中的规则是：

var x = canvas.width / 2,
    y = canvas.height / 2;

当比例尺为2时，规则如下：

var x = -canvas.width / 4,
    y = -canvas.height / 4;

当比例尺为3时，规则如下：

var x = -canvas.width / 3,
    y = -canvas.height / 3;

那么一般规则是什么？还是有更好的方法？

- Sophivorus

Answer 1

为了中心。

最好这样做。`ctx` 是画布上下文。

// scale the coordinate system to required scale and set the origin (0,0) 
// to the center of the canvas
ctx.setTransform(scale, 0, 0, scale, ctx.canvas.width * 0.5, ctx.canvas.height * 0.5);
ctx.drawImage(image, image.width * -0.5, image.height * -0.5); // draw the image offset by half

或者你可以避免设置转换，只需绘制缩放后的图像。

// get the position is half of the canvas width minus the scaled width of the image 
var x = (ctx.canvas.width - image.width * scale) * 0.5;
var y = (ctx.canvas.height - image.height * scale) * 0.5;
ctx.drawImage(image, x, y, image.width * scale, image.height * scale); // drw image with scaled width and height 

或者按照你的要求，调整画布的大小并保持原点在左上角。由于画布的实际大小不会改变，你需要反转缩放变化，这意味着将其大小除以缩放比例而不是乘以。

ctx.scale(scale, scale);
var x = (ctx.canvas.width / scale - image.width) * 0.5;
var y = (ctx.canvas.height / scale - image.height) * 0.5;
ctx.drawImage(image, x, y);

- Blindman67

---

非常感谢，答案完美无缺。 - Sophivorus

上一个对我有用，因为我没有改变原始画布的大小，而是使用ctx.scale来进行缩放。 - Niranth Reddy

哇，这里涉及到一些坐标几何。 - user10595057

Answer 2

  getWidth() {
        return this.rect.width * this.scale;
    }

    getHeight() {
        return this.rect.height * this.scale;
    }

    setScale(scale) {

        const oldWidth = this.getWidth();
        const oldHeight = this.getHeight();
        this.scale = scale;
        const newWidth = this.getWidth();
        const newHeight = this.getHeight();

        const addedWidth = newWidth - oldWidth;
        const addedHeight = newHeight - oldHeight;

        this.rect.pos.x -= addedWidth / 2;
        this.rect.pos.y -= addedHeight / 2;
    }

- francojohnc