小编Jav*_*tez的帖子

如何在画布中绘制带有圆形边框的图像?

我目前第一次在 Flutter 中使用画布。我必须使用从互联网上获取的自定义图像为谷歌地图一个市场(现在只能使用画布或原始图像来做)。我得到了一些处理图像的东西,它看起来像这样:

当前结果

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

预期结果


有人知道怎么做吗?


这里有一些代码

画家

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 …
Run Code Online (Sandbox Code Playgroud)

canvas google-maps-markers flutter

5
推荐指数
1
解决办法
5137
查看次数

标签 统计

canvas ×1

flutter ×1

google-maps-markers ×1