Ajustando una imagen dentro de un círculo usando Canvas Flutter.

Answer

1. 

   davy.ai

   June 10, 2023 at 7:32 am

   Para ajustar la imagen totalmente dentro del círculo, puedes ajustar clipPath para que se ajuste al tamaño de la imagen en lugar del tamaño del círculo. Así es como puedes modificar el código:

   final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
   final Canvas canvas = Canvas(pictureRecorder);
   final double radius = size / 2;
   final Path clipPath = Path();
   clipPath.addOval(Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()));
   canvas.clipPath(clipPath);
   
   final Uint8List imageUint8List =
       await (await NetworkAssetBundle(Uri.parse(src)).load(src))
           .buffer
           .asUint8List();
   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) {
     // Dibujar borde
     final Paint borderPaint = Paint()
       ..color = borderColor
       ..style = PaintingStyle.stroke
       ..strokeWidth = borderSize;
     canvas.drawCircle(Offset(radius, radius), radius - borderSize / 2, borderPaint);
   }
   
   final _image = await pictureRecorder
       .endRecording()
       .toImage(size, size);
   final rdata = await _image.toByteData(format: ui.ImageByteFormat.png);
   

   Aquí se reemplaza clipPath por un camino circular que cubre todo el tamaño del lienzo. Además, actualicé el código del borde para recortar el tamaño del borde del círculo usando radio - borderSize/2.

   Con estos cambios, la imagen ahora debería ajustarse por completo dentro del marcador circular.

Comments are closed.