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.

vahancho · Accepted Answer · 2013-12-11T13:27:05.143

5

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

edited Dec 11 '13 at 13:27

answered Dec 11 '13 at 09:34

vahancho

20,808
3
47
55

This idea sounds interesting. I tried this but I dont see an image. Is the image suppose to be painted in a form or am i suppose to add it to a layout ? – MistyD Dec 11 '13 at 11:46
@MistyD, this is the question I should ask you:) Where do you need to paint this stuff? Please explain what did you try. The mentioned code is supposed to be used in QWidget::paintEvent(). – vahancho Dec 11 '13 at 11:53
I want to add the img to a QLabel so I am doing the following ` QImage* pic = new QImage(); pic->load(":/qt/images/no.bmp"); QImage* rslt = new QImage(); QPainter* painter = new QPainter(rslt); QRegion r(QRect(10, 10, 20, 20), QRegion::Ellipse); painter->setClipRegion(r); painter->drawImage(0, 0, *pic); ui.label->setPixmap(QPixmap::fromImage(*rslt));` However I donot see anything in the QLabel picture – MistyD Dec 11 '13 at 12:24
could you kindly tell me why I dont see an image ? – MistyD Dec 11 '13 at 12:25

score 2 · Answer 2 · answered Dec 11 '13 at 07:31

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.

I tried the following QImage circ; `QImage pic; pic.load(":/qt/images/pic.bmp"); circ.load(":/qt/images/circt.png"); QPainter p(&circ); p.setCompositionMode(QPainter::CompositionMode_SourceOver); p.drawImage(&pic); p.end();` however the drawimage method does not work. What should i do for draw image ? — MistyD, Dec 11 '13 at 07:46

QT : Masking an image - Suggestions?

2 Answers2