在 Flutter 中将具有自定义大小和旋转度的图像绘制到 CustomPaint 中

Question

如何customPaint()在 Flutter 中绘制图像以指定其大小和旋转？通常只drawImage()绘制图像，其尺寸是以像素为单位的尺寸。例如，以 40 x 40 的尺寸绘制 40x40 像素的图像。如何绘制相同的图像，但例如大小为 80x80 且旋转为 120°？我试过了，drawAtlas但我在网上找不到任何东西。

这是我必须绘制的代码。（它在屏幕的右上角绘制了一个 20x20 的矩形）。

class ParticlePainter extends CustomPainter {
  final List<GameObject> objects;

  @override
  void paint(Canvas canvas, Size size) {


    canvas.drawRect(

        Rect.fromCenter(
            height: 20,
            width: 20,
            center: Offset(0.0, 0.0)),

        Paint()
          ..color = Colors.red
          ..blendMode = BlendMode.darken);
    }

  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  ParticlePainter(this.objects);
}

为了获取图像，我使用了此视频中的代码：Flutter 中的自定义绘制

Future<Image> _loadImage(File file) async{
   final data = await file.readAsBytesSync();
   return await decodeImageFromList(data);
}

Answer 1

看起来您可以在绘画功能中旋转画布本身。我的代码如下。

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class ParticlePainter extends CustomPainter {
  // final List<GameObject> objects;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();

    final degrees = 120;
    final radians = degrees * math.pi / 180;

    canvas.rotate(radians);

    canvas.drawRect(
        Rect.fromCenter(
          height: 20,
          width: 20,
          center: Offset(
            0.0,
            0.0,
          ),
        ),
        Paint()
          ..color = Colors.red
          ..blendMode = BlendMode.darken);

    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

  // ParticlePainter(this.objects);
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Yay"),
      ),
      body: CustomPaint(
        child: Container(),
        painter: ParticlePainter(),
      ),
    );
  }
}

对我来说，这会导致盒子稍微离开屏幕，但我希望这足以让您继续前进。如果您正在做一些简单的事情，您可能可以使用Transform.rotateorRotatedBox并将其包含CustomPaint在其中。