Flutter - 如何使用 Canvas 围绕中心旋转图像？答案

【问题标题】：Flutter - How to rotate an image around the center with Canvas?Flutter - 如何使用 Canvas 围绕中心旋转图像？
【发布时间】：2020-08-31 16:05:15
【问题描述】：

我正在尝试从中心旋转 ui.Image。我可以旋转图像，但图像没有旋转到确切的角度。我已经添加了下面的图片...

当我通过 0 作为工作线的角度时。

现在，当我通过 90 作为角度时，您就可以解决问题了。车子转了90多圈。

现在，当我通过 180 作为角度时，您就可以解决问题了。车子转了180多圈。

这是我的代码：

  Future<ui.Image> getUiImage(String assetImageName, double angle) async {
final ByteData assetImageByteData = await rootBundle.load(imageAssetPath);
image.Image baseSizeImage =
    image.decodeImage(assetImageByteData.buffer.asUint8List());
ui.Codec codec =
    await ui.instantiateImageCodec(image.encodePng(baseSizeImage));
ui.FrameInfo frameInfo = await codec.getNextFrame();
var pictureRecorder = ui.PictureRecorder();
Canvas canvas = Canvas(pictureRecorder);

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

请帮我解决这个问题。

【问题讨论】：

标签： android image flutter dart maps

【解决方案1】：

这可能是因为您使用度数而旋转函数需要弧度。当您插入 90 弧度时，它就相当于 5156.62 度（这会产生将对象旋转 116.62 度的最终效果 - 稍微超过 90 度）

要将angle 转换为弧度，请将值乘以pi/180

double radians = angle * pi / 180;

【讨论】：