【问题标题】:Fitting Image inside a circle using canvas flutter使用画布颤动将图像拟合到一个圆圈内
【发布时间】:2021-11-27 18:13:47
【问题描述】:
final ui.PictureRecorder pictureRecorder = ui.PictureRecorder();
final Canvas canvas = Canvas(pictureRecorder);
final Paint paint = Paint()..color;
final double radius = size / 2;
final Path clipPath = Path();
clipPath.addRRect(RRect.fromRectAndRadius(
    Rect.fromLTWH(0, 0, size.toDouble(), size.toDouble()),
    Radius.circular(100)));
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) {
  //draw Border
  paint..color = borderColor;
  paint..style = PaintingStyle.stroke;
  paint..strokeWidth = borderSize;
  canvas.drawCircle(Offset(radius, radius), radius, paint);
}
final _image = await pictureRecorder
    .endRecording()
    .toImage(size, (size * 1.1).toInt());
final rdata = await _image.toByteData(format: ui.ImageByteFormat.png);

代码如上。当然,我今天刚刚了解了画布,我一直在尝试拼凑代码,这些代码将适合圆圈内的图像用作地图的标记。然而,生成的图像如下所示:

我需要它完全适合。

【问题讨论】:

  • 我没有尝试看看这是否有效,但尝试将fit: BoxFit.cover 添加到您的paintImage 函数参数中
  • 谢谢你,它成功了!

标签: flutter dart canvas dart-ui


【解决方案1】:

添加

Fit:Boxfit.cover

我的油漆图像工作了。归功于@spazhead 的评论。

【讨论】:

    猜你喜欢
    • 2020-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-12
    • 1970-01-01
    • 2013-09-20
    • 1970-01-01
    • 2013-05-05
    相关资源
    最近更新 更多