image - 如何在画布图像上放置圆角？

Question

我正在以下列方式在 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);
}

我想给这张图片加圆角。

任何人都可以就如何做这样的事情提供一些帮助吗？

Answer 1

让我给你代码示例

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

Answer 2

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

在您的方法中添加以下代码片段并使用所需的半径值paint()更改该值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);
}