flutter - 如何修复 Flutter canvas.drawImageRect 模糊轮廓

Question

我正在使用自定义 Painter 和 canvas.drawImageRect 来绘制图像区域。（下面的完整代码）。我的问题是我的图像轮廓总是模糊或混合：

此捕获来自模拟器。缩放时，可以看到图像矩形的 2 个边缘像素已与背景混合 - 它们具有淡蓝色调。结果在物理设备上是相似的，不同之处在于我模糊了大约 4 个边缘像素而不是 2 个。

如何在没有任何背景混合的情况下为我的图像获得清晰的边框？

谢谢！

下面的代码：

import 'package:flutter/material.dart';
import 'package:network_to_file_image/image_for_canvas.dart';
import 'package:network_to_file_image/network_to_file_image.dart';
import 'dart:ui' as ui;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var myWidth = MediaQuery.of(context).size.width;

    User user = User(
      filename: null,
      url: "https://homepages.cae.wisc.edu/~ece533/images/baboon.png",
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
          width: myWidth,
          height: myWidth,
          child: CustomPaint(
              painter: ImagePainter(user, loadCallback: (_, __, ___) {
            setState(() {});
          }))),
    );
  }
}

class ImagePainter extends CustomPainter {
  final User user;
  final LoadCallback<User> loadCallback;

  ImagePainter(
    this.user, {
    required this.loadCallback,
  });

  @override
  void paint(Canvas canvas, Size size) {
    canvas.save();
    canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height),
        Paint()..color = Colors.blue);
    canvas.restore();

    var imageForCanvas = _imageForCanvas();
    ui.Image? image = imageForCanvas.image(user);

    if (image != null) {
      canvas.save();
      canvas.drawImageRect(
        image,
        Rect.fromLTWH(
          12,
          12,
          256,
          256,
        ),
        Rect.fromLTWH(
          50,
          50,
          size.width - 100,
          size.height - 100,
        ),
        Paint()
      );
      canvas.restore();
    }
  }

  ImageForCanvas<User> _imageForCanvas() => ImageForCanvas<User>(
        imageProviderSupplier: (User user) => NetworkToFileImage(
          file: null,
          url: user.url,
        ),
        keySupplier: (User user) => user.url!,
        loadCallback: loadCallback,
      );

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

class User {
  final String? filename;
  final String? url;

  User({
    this.filename,
    this.url,
  });
}

这是 pubspec.yaml：

name: reporo
description: A new Flutter project.
version: 1.0.0+1

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  network_to_file_image: ^3.0.0

  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true