QT : Masking an image - Suggestions?

Question

I dont know if I am using the correct term here. However this is what I am trying to achieve and I would like some suggestions on how I could achieve that. I want to have a circle with border visible. Now here is the hard part and something I dont even know how to start with. I want to manipulate the circle in such a way that the borders of the circle are visible and its center is not (i.e Pretty much that it has a hole in it and would show what ever is placed under it)I would then like to have another image placed under the circle such that only the part of the image that is under the transparent part of the circle is shown the parts outside the transparent boundary of the circle become invisible. Any suggestions on how I could achieve this. It seems that googling isnt helping me.

Answer 1

I would suggest the alternative way for unmasking a circular area of an image. You can specify the clip region - the area where you need to perform painting. For example:

[..]
QPainter painter(this);
// Sample circular area.
QRegion r(QRect(100, 100, 200, 200), QRegion::Ellipse);
painter.setClipRegion(r);
[..]
painter.drawImage(0, 0, image);
[..]

This will draw only those parts of your image that are inside of the circle with radius 200. All the rest pixels will be hidden. You can handle mouse move event to move this "circle" over the image like a loupe.

UPDATE

Below is the sample code that generates an image with circular mask and insert it into the label:

QPixmap target(500, 500); // the size may vary
QPixmap source("image.png");

QPainter painter(&target);
QRegion r(QRect(100, 100, 200, 200), QRegion::Ellipse);
painter.setClipRegion(r);
painter.drawPixmap(0, 0, source);

QLabel l;
l.setPixmap(target);
l.show();

Answer 2

You might want to have a look at the Composition Example.

In short you could draw the first image and then use one of the Composition Modes to draw the second image on top (or the other way around). Make sure to convert the images to ARGB32 before using them. To make the inner Part of the Circle transparent you can adjust the Alpha Channel accordingly.

Here is a small Example using Composition mode:

QPainter p(&imageCircle);
p.setCompositionMode(QPainter::CompositionMode_SourceOver);
p.drawImage(image);
p.end()

Here you can find the Qt Documentation of QPainter.