How to put rounded corners to canvas image?

Question

I am drawing an image on Canvas in following manner.

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

I want to give rounded corners to this image.

Can anyone provide some help on how to do something like that?

there is a clipRRect method in canvas, which will clip (with rounded rect) whatever is painted — Yadu, Dec 10 '20 at 04:31

score 0 · Answer 1 · answered Dec 10 '20 at 06:38

0

Lets make a try to use clipRRect() method of Canvas class

Add following code snippet inside your paint() method and change the value 20 with your required radius value

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

Full version

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

answered Dec 10 '20 at 06:38

Saiful Islam

1,151
13
22

I tried it. Does not seems to have any effect on the image – Janaka Dec 10 '20 at 16:41
@janaka if it not showing any effect because you are missing the named parameters of RRect.fromLTRBAndCorners – Yadu Dec 11 '20 at 04:25
@Yadu not clear what you mean. Can you explain little more? – Janaka Dec 11 '20 at 14:03
See my answer @janaka – Yadu Dec 11 '20 at 14:36

score 0 · Answer 2 · answered Dec 11 '20 at 04:29

let me give you code sample

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

you have to match the coordinates of RRect and the ImageRect that you want to clip

How to put rounded corners to canvas image?

2 Answers2