Файл круглого изображения

Question

Я сделал этот код, чтобы получить изображение из магазина и использовать его как значок для маркера карты.

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 ));
});

Этот код работает, но я хочу установить изображение круглой формы, и я не не знаю, как это сделать ...

Если вы также знаете, как добавить круг и анимировать его таким образом, я буду очень доволен:

(я не нашел что-то более представительное, но я просто хочу один круг)

Answer 1

Вы можете использовать Canvas, чтобы нарисовать круглое изображение, и использовать PictureRecorder, чтобы сохранить его как конечное изображение и поместить его в растровое изображение маркера, fyi: Пользовательский маркер

Заменить TextPainter на ImagePainter в статье

ИЛИ

Следуйте этой статье, используя виджет, пользовательский маркер

Answer 2

После некоторого кодирования, исследования и размышления вот мой код:

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> convertImageFileToBitmapDescriptor(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());
}

и вот результат:

спасибо @ Джим Чиу за помощь:)

Answer 3

Самый простой способ округлить изображение с помощью ClipRRect

Чтобы реализовать идеально округленное изображение, вы можете обернуть ваше изображение следующим образом:

double size = 100;
return ClipRRect(
  borderRadius: BorderRadius.circular(size / 2),
  child: Image.file(/*YOUR CHILD */, height: size, width: size,),
);

Answer 4

Вы пробовали это?

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: () {},
    ),
  ),
)

Answer 5

Хотите круглую рамку на изображении, которое не является круглым? Вы можете использовать оформление коробки и установить оформление на круглое изображение.

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