Flutter画布绘制插件canvas_test的使用

canvas_test 是一个用于编写Canvas操作测试的工具类，它支持与dart:ui中的常规Canvas类相同的API（理论上；任何缺失的命令可以根据需要添加）。此外，这个类还是一个Matcher，允许它在expect()调用中使用，如下面的例子所示。

主要特性

• 匹配器功能：两个模拟画布只有在它们具有相同数量的命令，并且每对相应的命令匹配时才会匹配。
• 变换命令合并：连续的变换命令（translate()、scale()、rotate()和transform()）总是合并成一个单一的组合变换。例如，先调用translate(10, 10)再调用translate(30, -10)将与单个translate(40, 0)相匹配。
• 部分指定命令：某些命令（如drawLine()和drawRect()）的paint参数是可选的。如果提供了该参数，则会检查实际使用的Paint；如果没有提供，匹配仍然成功。
• 数值组件的近似匹配：涉及数值组件（即坐标、尺寸等）的命令将以默认绝对容差1e-10进行近似匹配。

示例代码解析

以下是一个完整的示例demo，展示了如何使用CustomPainter来绘制矩形，并结合canvas_test来进行单元测试。

示例应用代码

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: Colors.white,
          padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 80),
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: Colors.black,
            child: CustomPaint(painter: RectanglePainter()),
          ),
        ),
      ),
    );
  }
}

class RectanglePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 4.0
      ..color = Colors.indigo;

    canvas.drawRect(
      const Rect.fromLTWH(100, 100, 100, 100),
      paint,
    );
  }

  @override
  bool shouldRepaint(RectanglePainter oldDelegate) => false;
}

测试代码

为了确保RectanglePainter的行为符合预期，我们可以使用canvas_test包来进行测试。

首先，在pubspec.yaml文件中添加依赖：

dev_dependencies:
  canvas_test: ^latest_version

然后创建测试文件test/rectangle_painter_test.dart，内容如下：

import 'package:canvas_test/canvas_test.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:your_project_name/main.dart'; // 替换为你的项目名称

void main() {
  testWidgets('RectanglePainter draws a rectangle', (WidgetTester tester) async {
    final canvas = MockCanvas();

    // 创建一个RectanglePainter实例并调用其paint方法
    final painter = RectanglePainter();
    painter.paint(canvas, const Size(800, 600));

    // 检查画布上是否绘制了预期的矩形
    expect(
      canvas,
      MockCanvas()
        ..drawRect(const Rect.fromLTWH(100, 100, 100, 100), Paint())
        ..translate(0, 0), // 如果有其他变换可以继续添加
    );
  });
}

通过这种方式，你可以验证RectanglePainter是否按照预期绘制了矩形。如果有更多的绘制逻辑或变换操作，可以在MockCanvas中添加相应的命令以进行更全面的测试。

希望这些信息能帮助你更好地理解和使用canvas_test插件！如果你有任何问题或需要进一步的帮助，请随时提问。