flutter - 圆形图像文件

Question

我执行此代码是为了从 firestore 获取图像并将其用作地图标记的图标。

final StorageReference storageReference =
FirebaseStorage().ref().child("ProfilePictures/" + widget.userId);
String avatarDownloadPath = await storageReference.getDownloadURL();
final File _avatar = await DefaultCacheManager().getSingleFile(avatarDownloadPath);
Uint8List __avatar = await _avatar.readAsBytes();
BitmapDescriptor avatar = BitmapDescriptor.fromBytes(__avatar);

setState(() {
  _markers.add(Marker(markerId: MarkerId("UserPosition"), position: userLocation, icon: avatar ));
});

此代码有效，但我想将图像设置为圆形，但我不知道该怎么做......

如果您还知道如何在周围添加一个圆圈并像这样为其设置动画，我会非常满意：

（我没有找到更具代表性的东西，但我只想要一个圆圈）

score 6 · Accepted Answer

感谢@Jim Chiu，这是我的实现：

import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

Future<BitmapDescriptor> convertImageFileToCustomBitmapDescriptor(File imageFile,
    {int size = 150,
    bool addBorder = false,
    Color borderColor = Colors.white,
    double borderSize = 10,
    String title,
    Color titleColor = Colors.white,
    Color titleBackgroundColor = Colors.black}) async {
  final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
  final Canvas canvas = Canvas(pictureRecorder);
  final Paint paint = Paint()..color;
  final TextPainter textPainter = TextPainter(
    textDirection: TextDirection.ltr,
  );
  final double radius = size / 2;

  //make canvas clip path to prevent image drawing over the circle
  final Path clipPath = Path();
  clipPath.addRRect(RRect.fromRectAndRadius(
      Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
      Radius.circular(100)));
  clipPath.addRRect(RRect.fromRectAndRadius(
      Rect.fromLTWH(0, size * 8 / 10, size.toDouble(), size * 3 / 10),
      Radius.circular(100)));
  canvas.clipPath(clipPath);

  //paintImage
  final Uint8List imageUint8List = await imageFile.readAsBytes();
  final ui.Codec codec = await ui.instantiateImageCodec(imageUint8List);
  final ui.FrameInfo imageFI = await codec.getNextFrame();
  paintImage(
      canvas: canvas,
      rect: Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
      image: imageFI.image);

  if (addBorder) {
    //draw Border
    paint..color = borderColor;
    paint..style = PaintingStyle.stroke;
    paint..strokeWidth = borderSize;
    canvas.drawCircle(Offset(radius, radius), radius, paint);
  }

  if (title != null) {
    if (title.length > 9) {
      title = title.substring(0, 9);
    }
    //draw Title background
    paint..color = titleBackgroundColor;
    paint..style = PaintingStyle.fill;
    canvas.drawRRect(
        RRect.fromRectAndRadius(
            Rect.fromLTWH(0, size * 8 / 10, size.toDouble(), size * 3 / 10),
            Radius.circular(100)),
        paint);

    //draw Title
    textPainter.text = TextSpan(
        text: title,
        style: TextStyle(
          fontSize: radius / 2.5,
          fontWeight: FontWeight.bold,
          color: titleColor,
        ));
    textPainter.layout();
    textPainter.paint(
        canvas,
        Offset(radius - textPainter.width / 2,
            size * 9.5 / 10 - textPainter.height / 2));
  }

  //convert canvas as PNG bytes
  final _image =
      await pictureRecorder.endRecording().toImage(size, (size * 1.1).toInt());
  final data = await _image.toByteData(format: ui.ImageByteFormat.png);

  //convert PNG bytes as BitmapDescriptor
  return BitmapDescriptor.fromBytes(data.buffer.asUint8List());
}

结果如下：

score 4 · Accepted Answer

可以使用Canvas绘制圆形图像，使用PictureRecorder保存为最终图像，放入marker bitmapdescriptor，fyi：自定义marker

将文章中的TextPainter替换为ImagePainter

或者

通过使用小部件、自定义标记来关注本文

score -2 · Accepted Answer

你想要一个非圆形图像上的圆形边框吗？您可以使用盒子装饰并将装饰设置为圆形图像。

https://medium.com/@boldijar.paul/circle-image-view-in-flutter-965963c46cf5

score -3 · Accepted Answer

你试过这个吗？

Material(
  elevation: 4.0,
  shape: CircleBorder(),
  clipBehavior: Clip.hardEdge,
  color: Colors.transparent,
  child: Ink.image(
    image: AssetImage('assets/profile_default.jpg'),
    fit: BoxFit.cover,
    width: 120.0,
    height: 120.0,
    child: InkWell(
      onTap: () {},
    ),
  ),
)

flutter - 圆形图像文件

4 回答 4

Related

Reference