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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了颤动 - 如何使用画布围绕中心旋转图像相关的知识,希望对你有一定的参考价值。

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

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

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

Here is my implementation that can be extended

答案

figure 1 figure 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);
}

以上是关于颤动 - 如何使用画布围绕中心旋转图像的主要内容,如果未能解决你的问题,请参考以下文章

如何使用MATLAB围绕不是图像中心点的点旋转图像?

如何在Android中旋转位图,使图像中心平滑,无振荡运动

如何在 Pygame 中围绕偏离中心的枢轴旋转图像

如何通过itext围绕图像中心旋转?

画布从底部中心图像角度旋转?

HTML5 围绕其中心点旋转文本