Konva.js中旋转图片后如何在画布上居中？

核心思路是调整Canvas的坐标系原点到画布中心，旋转后再以新原点为基准绘制图片，这样旋转后图片会自然保持居中。具体步骤如下：

• 保存当前Canvas状态
  修改坐标系前，用ctx.save()保存当前绘图状态，避免影响后续绘制操作。

• 平移坐标系原点到画布中心
  计算画布中心坐标，执行ctx.translate(canvas.width/2, canvas.height/2)，把原点移到画布正中间。

• 执行旋转操作
  将角度转为弧度（公式：角度值 * Math.PI / 180），用ctx.rotate(旋转弧度值)完成旋转。

• 调整图片绘制位置
  绘制图片时，把左上角定位到(-img.width/2, -img.height/2)，让图片中心与当前坐标系原点（画布中心）重合，旋转后自然保持居中。

• 恢复Canvas状态
  绘制完成后，用ctx.restore()恢复之前保存的绘图状态，确保后续绘制不受影响。

示例代码片段 #

// 假设canvas、ctx、img已获取，rotation为旋转角度（度数）
const drawCenteredRotatedImage = () => {
  ctx.save();
  
  // 平移原点到画布中心
  ctx.translate(canvas.width / 2, canvas.height / 2);
  // 转弧度并执行旋转
  ctx.rotate((rotation * Math.PI) / 180);
  
  // 绘制图片，偏移自身宽高的一半实现居中
  ctx.drawImage(img, -img.width / 2, -img.height / 2);
  
  ctx.restore();
};

注意：如果你的代码是先绘制图片再旋转，必然会出现偏移问题，必须调整顺序：先平移坐标系→旋转→再绘制图片，这样旋转的是整个坐标系，图片的相对中心位置不会改变。

内容的提问来源于stack exchange，提问作者bonlim