如何在画布图像上放置圆角？答案

【问题标题】：How to put rounded corners to canvas image?如何在画布图像上放置圆角？
【发布时间】：2021-03-21 11:32:51
【问题描述】：

我正在以下列方式在 Canvas 上绘制图像。

void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;

    canvas.drawImageRect(
        img,
        Rect.fromLTWH(0, 0, img.width.toDouble(), img.height.toDouble()),
        Rect.fromLTWH(0, 0, newImgWidth, newImgHeight),
        paint);
}

我想给这张图片加圆角。

谁能提供一些关于如何做类似事情的帮助？

【问题讨论】：

画布中有一个clipRRect方法，它会剪切（圆角矩形）任何被绘制的东西
你能提供一些代码吗？

标签： image flutter canvas rounded-corners custompaging

【解决方案1】：

让我们尝试使用Canvas类的clipRRect()方法

在 paint() 方法中添加以下代码 sn-p 和将值 20 更改为所需的半径值

canvas.clipRRect(
  RRect.fromLTRBAndCorners(20, 20, 20, 20); // left, top, right, bottom
);

完整版

void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;

    canvas.clipRRect(
      RRect.fromLTRBAndCorners(20, 20, 20, 20); // left, top, right, bottom
    );

    canvas.drawImageRect(
        img,
        Rect.fromLTWH(0, 0, img.width.toDouble(), img.height.toDouble()),
        Rect.fromLTWH(0, 0, newImgWidth, newImgHeight),
        paint);
}

【讨论】：

我试过了。似乎对图像没有任何影响
@janaka 如果它没有显示任何效果，因为您缺少 RRect.fromLTRBAndCorners 的命名参数
@Yadu 不清楚你的意思。你能再解释一下吗？
查看我的回答@janaka

【解决方案2】：

让我给你代码示例

void paint(Canvas canvas, Size size) {
    Paint paint = Paint();
    paint.color = Colors.white;

    canvas.clipRRect(
      RRect.fromLTRBAndCorners(0, 0, img.width.toDouble(), img.height.toDouble(),topLeft:20,topRight:20,bottomLeft:20,bottomRight:20); // left, top, right, bottom
    );

    canvas.drawImageRect(
        img,
        Rect.fromLTWH(0, 0, img.width.toDouble(), img.height.toDouble()),
        Rect.fromLTWH(0, 0, newImgWidth, newImgHeight),
        paint);
}

你必须匹配 RRect 的坐标和你要剪辑的 ImageRect

【讨论】：