Flutter - 如何使用画布围绕中心旋转图像

Question

我正在尝试实现一个自定义画家，可以在画布上绘制图像（缩小版本），并且可以旋转和缩放绘制的图像。

我知道要缩放图像我必须使用缩放方法缩放画布。

现在的问题是如何在其中心（或任何其他点）旋转缩放图像。画布的旋转方法只允许在左上角旋转。

这是我可以扩展的实现

Answer 1

有同样的问题，解决方案只是在三行中制作自己的旋转方法

void rotate(Canvas canvas, double cx, double cy, double angle) {
  canvas.translate(cx, cy);
  canvas.rotate(angle);
  canvas.translate(-cx, -cy);
}

因此，我们首先将画布移向您想要旋转的点。然后我们沿着左上角（Flutter 的默认值）旋转，它在坐标空间中是您想要的枢轴，然后将画布放回所需的位置，并应用旋转。方法非常有效，只需要添加 4 次平移，旋转成本与原始相同。

Answer 2

这可以通过移动坐标空间来实现，如图 1 所示。平移是 C1 和 C2 之间坐标的差异，与图 2 中的 A 和 B 之间完全相同。通过一些几何公式，我们可以计算所需的平移和产生旋转的图像，如下面的方法

ui.Image rotatedImage({ui.Image image, double angle}) {
  var pictureRecorder = ui.PictureRecorder();
  Canvas canvas = Canvas(pictureRecorder);

  final double r = sqrt(image.width * image.width + image.height * image.height) / 2;
  final alpha = atan(image.height / image.width);
  final beta = alpha + angle;
  final shiftY = r * sin(beta);
  final shiftX = r * cos(beta);
  final translateX = image.width / 2 - shiftX;
  final translateY = image.height / 2 - shiftY;
  canvas.translate(translateX, translateY);
  canvas.rotate(angle);
  canvas.drawImage(image, Offset.zero, Paint());

  return pictureRecorder.endRecording().toImage(image.width, image.height);
}

alpha、beta、angle 都是弧度。

这是演示应用程序的回购