画布：在所需位置绘制多个旋转和调整大小的图像

Question

我需要将多张图片放入画布中。图像应旋转、调整大小并放置在特定坐标处。所以总的来说我需要

ctx.drawImage(img,left,top, width, height); 

但旋转了。

我想出了这个功能：

function drawRotated(image, context, angle, left, top, width, height) {
    context.save();
    context.translate(width / 2, height / 2);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(image, left - width / 2, top - height / 2, width, height);
    context.restore();
}

但它似乎并没有完全按照需要工作。看起来旋转后我需要使用旋转将图像变成的新宽度和高度重新计算位置。但我无法弄清楚数学。我是否需要实际做三角函数来计算所有这些，还是有一个简单的解决方案？谢谢。

Answer 1

我认为你只需要将翻译步骤替换为

context.translate(left + width / 2, top + height / 2);

同样的旋转，然后

context.drawImage(image, - width / 2, - height / 2, width, height);

因此

function drawRotated(image, context, angle, left, top, width, height) {
    context.save();
    context.translate(left + width / 2, top + height / 2);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(image, - width / 2, - height / 2, width, height);
    context.restore();
}