canvas - 如何在 Canvas 中绘制带有圆形边框的图像？

Question

我目前是第一次在 Flutter 中使用 Canvas 。我必须为 Google map 市场(目前只能使用 Canvas 或原始图像来完成)，使用从互联网上获取的自定义图像。我得到了一些处理图像的东西，它看起来像这样:

但我的预期结果应该是圆形的图像。它看起来像这样:

有人知道怎么做吗？

这里是一些代码

画家

class ImageEditor extends CustomPainter {
  ImageEditor({
    this.image,
  });

  ui.Image image;

  @override
  void paint(Canvas canvas, Size size) async{
    canvas.drawImage(image, new Offset(0, -size.height*0.8), new Paint()..style=PaintingStyle.fill);

    final radius = math.min(size.width, size.height) / 8;
    final center = Offset(50, 50);
    Paint paintCircle = Paint()..color = Colors.black;
    Paint paintBorder = Paint()
      ..color = Colors.white
      ..strokeWidth = size.width/36
      ..style = PaintingStyle.stroke;
    canvas.drawCircle(center, radius, paintCircle);
    canvas.drawCircle(center, radius, paintBorder);
  }

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

主类

import 'package:flutter/material.dart';
import 'dart:ui' as ui;
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async';
import 'dart:typed_data';

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

import 'canvas_test.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  ui.Image image;
  bool isImageloaded = false;
  void initState() {
    super.initState();
    init();
  }

  Future <Null> init() async {
    image = await _loadImage("https://<link>");
  }

  Future<ui.Image> _loadImage(String photoUrl) async {
    final cache = DefaultCacheManager();
    final file = await cache.getSingleFile(photoUrl);
    final bytes = new Uint8List.fromList(await file.readAsBytes());

    final Completer<ui.Image> completer = new Completer();
    ui.decodeImageFromList(bytes, (ui.Image img) {
      setState(() {
        isImageloaded = true;
      });
      return completer.complete(img);
    });
    return completer.future;
  }

  Widget _buildImage() {
    if (this.isImageloaded) {
      return new CustomPaint(
        painter: new ImageEditor(image: image),
      );
    } else {
      return new Center(child: new Text('loading'));
    }
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text("First Canvas"),
      ),
      body: Container(
        color: Colors.blueGrey,
        child: Center(
          child: Container(
            width: 80,
            height: 90.0,
            child:  _buildImage(),
            ),
          ),
        ),
      );
  }
}

Answer 1

    @override
    void paint(Canvas canvas, Size size) async{
      final center = Offset(50, 50);
      final radius = math.min(size.width, size.height) / 8;

      // The circle should be paint before or it will be hidden by the path 
      Paint paintCircle = Paint()..color = Colors.black;
      Paint paintBorder = Paint()
        ..color = Colors.white
        ..strokeWidth = size.width/36
        ..style = PaintingStyle.stroke;
      canvas.drawCircle(center, radius, paintCircle);
      canvas.drawCircle(center, radius, paintBorder);

      var drawImageWidth = 0;
      var drawImageHeight = -size.height*0.8;

      Path path = Path()
        ..addOval(Rect.fromLTWH(drawImageWidth, drawImageHeight, image.width, image.height));

      canvas.clipPath(path);

      canvas.drawImage(image, new Offset(drawImageWidth, drawImageHeight), new Paint());

    }

此解决方案允许您在 canvas 上制作圆形图像。