Qt not only allows us to draw shapes and images on screen, but it also allows us to overlay multiple images on top of each other and combine the pixel information from all the layers using different types of algorithms to create very interesting results. In this example, we will learn how to overlay images on top of each other and apply different composition effects to them.
Let's create a simple demo that shows the effect of different image compositions by following these steps:
- First, set up a new Qt Widgets Application project and remove the menu bar, tool bar, and status bar.
- Next, add the QPainter class header to
mainwindow.h:#include <QPainter>
- After that, declare the
paintEvent()virtual function like so:virtual void paintEvent(QPaintEvent* event);
- In
mainwindow.cpp, we will first load several image files using theQImageclass:void MainWindow::paintEvent(QPaintEvent* event) { QImage image; image.load("checker.png"); QImage image2; image2.load("tux.png"); QImage image3; image3.load("butterfly.png"); } - Then, create a
QPainterobject and use it to draw two pairs of images, where one image is on top of another:QPainter painter(this); painter.drawImage(QPoint(10, 10), image); painter.drawImage(QPoint(10, 10), image2); painter.drawImage(QPoint(300, 10), image); painter.drawImage(QPoint(300, 40), image3);
- Compile and run the program now and you should see something like this:
- Next, we will set the composition mode before drawing each image on screen:
QPainter painter(this); painter.setCompositionMode(QPainter::CompositionMode_Difference); painter.drawImage(QPoint(10, 10), image); painter.setCompositionMode(QPainter::CompositionMode_Multiply); painter.drawImage(QPoint(10, 10), image2); painter.setCompositionMode(QPainter::CompositionMode_Xor); painter.drawImage(QPoint(300, 10), image); painter.setCompositionMode(QPainter::CompositionMode_SoftLight); painter.drawImage(QPoint(300, 40), image3);
- Compile and run the program again and you will now see something like this:
When drawing images with Qt, the sequence of calling the drawImage() function will determine which image is being rendered first and which one is rendered later. This will affect the depth order of the images and yield different outcomes.
In the previous example, we called drawImage() four times to draw four different images on screen. The first drawImage() renders checker.png and the second drawImage() renders tux.png (the penguin). The image that gets rendered later will always appear in front of the others, which is why the penguin is showing in front of the checker box. The same goes for the butterfly and the checker on the right. The reason why you can still see the checker even though the butterfly is rendered in front of it is because the butterfly image is not fully opaque.
Now let's invert the render sequence and see what happens. We will try to render the penguin first, followed by the checker box. The same goes for the other pair of images on the right: the butterfly gets rendered first, followed by the checker box:
To apply a composition effect to the image, we'll have to set the painter's composition mode before drawing the image, by calling the painter.setCompositionMode() function. You can pick a desired composition mode from the auto-complete menu by typing QPainter::CompositionMode.
In the previous example, we applied QPainter::CompositionMode_Difference to the checker box on the left, which inverted its color. Next, we applied QPainter::CompositionMode_Overlay to the penguin which makes it blend with the checker and we're able to see both images overlaying each other.
On the right-hand side, we applied QPainter::CompositionMode_Xor to the checker, where if differences exist between the source and destination, colors are shown; otherwise, it will be rendered black. Since it's comparing differences with the white background, the non-transparent part of the checker becomes completely black. We also applied QPainter::CompositionMode_SoftLight to the butterfly image. This blends the pixels with the background with reduced contrast.
If you want to disable the composition mode you have just set for the previous rendering before proceeding to the next, simply set it back to the default mode, which is QPainter::CompositionMode_SourceOver.
For example, we can overlay multiple images on top of each other and use Qt's image composition feature to merge them together and calculate the resulting pixels on screen, based on the composition mode we used. This is often used in image editing software such as Photoshop and GIMP to composite image layers.
There are more than 30 types of composition mode available in Qt. Some of the most commonly used modes are:
- Clear: The pixels in the destination are set to fully transparent, independent of the source.
- Source: The output is the source pixel. This mode is the inverse of
CompositionMode_Destination. - Destination: The output is the destination pixel. This means that the blending has no effect. This mode is the inverse of
CompositionMode_Source. - Source Over: Often referred to as alpha blending. The alpha of the source is used to blend the pixel on top of the destination. This is the default mode used by
QPainter. - Destination Over: The alpha of the destination is used to blend it on top of the source pixels. This mode is the inverse of
CompositionMode_SourceOver. - Source In: The output is the source, where the alpha is reduced by that of the destination.
- Destination In: The output is the destination, where the alpha is reduced by that of the source. This mode is the inverse of
CompositionMode_SourceIn. - Source Out: The output is the source, where the alpha is reduced by the inverse of the destination.
- Destination Out: The output is the destination, where the alpha is reduced by the inverse of the source. This mode is the inverse of
CompositionMode_SourceOut. - Source Atop: The source pixel is blended on top of the destination, with the alpha of the source pixel reduced by the alpha of the destination pixel.
- Destination Atop: The destination pixel is blended on top of the source, with the alpha of the source pixel reduced by the alpha of the destination pixel. This mode is the inverse of
CompositionMode_SourceAtop. - Xor: This is short for Exclusive OR, which is an advanced blending mode that is primarily used for image analysis. The source, whose alpha is reduced by the inverse of the destination alpha, is merged with the destination, whose alpha is reduced by the inverse of the source alpha.
The following image shows the outcome of overlaying two images with different composition modes:
