Qt provides an easy way to add image effects to any graphics drawn using the QPainter class. In this example, we will learn how to apply different images effects, such as drop shadow, blur, colorize, and opacity effects, to a graphic before displaying it on screen.
Let's learn how to apply image effects to text and graphics by following these steps:
- Create a new Qt Widgets Application and remove the menu bar, tool bar, and status bar.
- Create a new resource file by going to File | New File or Project and adding all the images required by the project:
- Next, open up
mainwindow.uiand add four labels to the window. Two of the labels will be text and the two others we will load with the images we have just added to the resource file:
- You may already notice the font sizes are way bigger than the default size. That can be achieved by adding a style sheet to the label widget, for example:
font: 26pt "MS Shell Dlg 2";
- After that, open up
mainwindow.cppand include the following headers at the top of the source code:#include <QGraphicsBlurEffect> #include <QGraphicsDropShadowEffect> #include <QGraphicsColorizeEffect> #include <QGraphicsOpacityEffect>
- Then, within the constructor of the
MainWindowclass, add the following code to create a drop shadow effect, and apply it to one of the labels:MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow) { ui->setupUi(this); QGraphicsDropShadowEffect* shadow = new QGraphicsDropShadowEffect(); shadow->setXOffset(4); shadow->setYOffset(4); ui->label->setGraphicsEffect(shadow); } - Next, we will create a colorized effect and apply it to one of the images, in this case the butterfly. We also set the effect color to red:
QGraphicsColorizeEffect* colorize = new QGraphicsColorizeEffect(); colorize->setColor(QColor(255, 0, 0)); ui->butterfly->setGraphicsEffect(colorize);
- Once we're done with that, create a blur effect and set its radius to
12. Then, apply the graphics effect to the other label:QGraphicsBlurEffect* blur = new QGraphicsBlurEffect(); blur->setBlurRadius(12); ui->label2->setGraphicsEffect(blur);
- Lastly, create an alpha effect and apply it to the penguin image. We set the opacity value to
0.2, which means 20% opacity:QGraphicsOpacityEffect* alpha = new QGraphicsOpacityEffect(); alpha->setOpacity(0.2); ui->penguin->setGraphicsEffect(alpha);
- Compile and run the program now and you should be able to see something like this:
Each of the graphic effects is a class of its own that inherits the QGraphicsEffect parent class. You can create your own custom effect by creating a new class that inherits QGraphicsEffect and re-implementing some of the functions in it.
Each effect has its own set of variables that are specifically created for it. For example, you can set the color of the colorized effect, but there is no such variable in the blur effect. This is because each effect is vastly different from the others, which is also why it needs to be a class of its own rather than using the same class for all the different effects.
It's only possible to add a single graphics effect to a widget at a time. If you add more than one effect, only the last one will be applied to the widget as it replaces the previous one. Other than that, be aware that if you create a graphics effect, say the drop shadow effect, you can't assign it to two different widgets as it will only get assigned to the last widget you applied it to. If you need to apply the same type of effect to several different widgets, create a few graphics effects of the same type and apply each of them to their respective widgets.
Currently Qt supports blur, drop shadow, colorize, and opacity effects. These effects can be used by calling the following classes: QGraphicsBlurEffect, QGraphicsDropShadowEffect, QGraphicsColorizeEffect, and QGraphicsOpacityEffect. All these classes are inherited from the QGraphicsEffect class. You can also create your own custom image effect by creating a subclass of QGrapicsEffect (or any other existing effects) and re-implementing the draw() function.
The graphics effect changes only the bounding rectangle of the source. If you want to increase the margin of the bounding rectangle, re-implement the virtual boundingRectFor() function, and call updateBoundingRect() to notify the framework whenever this rectangle changes.