缩放后保持图像居中

Question

我在 canvas 中绘制了一张图片，我希望能够以任意比例放大和缩小，同时保持图片居中。为此，我的方法是更改 canvas 上下文的比例并重新绘制图像，但我需要计算新图像的左上角，否则它不会居中。

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。我已经弄清楚了一些特殊情况，但我找不到一般规则。当scale为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;

那么一般规则是什么？或者有更好的方法吗？

Answer 1

为中心。

最好这样做。 ctx 是 canvas 上下文

// 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 / 2, ctx.canvas.height / 2);
ctx.drawImage(image,-image.width / 2,-image.height / 2); // 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) / 2;
var y = (ctx.canvas.height - image.height * scale) / 2;
ctx.drawImage(image, x, y, image.width * scale, image.height * scale); // drw image with scaled width and height

或者根据需要缩放 canvas 并将原点保持在左上角。因为 canvas 不会改变它的实际大小，所以你必须反转比例变化，这意味着将它的大小除以比例而不是相乘。

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

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;
    }

缩放后保持图像居中

Keep the image centred after scaling

canvas

html5-canvas