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

Question

如何在 Flutter 中将图像绘制到指定其大小和旋转的 customPaint()？
通常仅使用 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);
}

要获取图像，我使用了此视频中的代码: Custom Paint in Flutter

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

Answer 1

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

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.rotate 或 RotatedBox 并将您的 CustomPaint 包装在其中。