Change circle colour every 5 seconds - c++

I try to create a green circle which every 5 seconds disappears.
Actually, I have the green circle created with the QPainter method. I tried QTimer and others methods but I can't find the good solution.
I overrided the paintEvent function like this :
void MainWindow::paintEvent(QPaintEvent *)
{
QPainter painter(this);
Qt::BrushStyle style = Qt::SolidPattern;
QBrush brush(Qt::green, style);
painter.setRenderHint(QPainter::Antialiasing);
painter.setBrush(brush);
painter.drawEllipse(525, 5, 50, 50);
}
MainWindow::MainWindow() : QWidget()
{
QTimer *ledtimer = new QTimer(this);
connect(ledtimer, SIGNAL(timeout()), this, SLOT(run_led()));
ledtimer->start(5000);
}
I tried to do something like this, but when i'm using run_led, it tells that painter is already removed (i tried in MainWindow class).
I understand the signal function and the timer, I used it in another files, so some tips would be appreciated. Am I supposed to use timers to make circles wink ?

Define a flag boolean that changes every 5 seconds and in paint use a brush as global variable
void MainWindow::paintEvent(QPaintEvent *)
{
....
QBrush brush(myBrush, style);
...
}
and in slot (run_led)
void MainWindow::run_led()
{
c != true;
if(c)
{
myBrush=Qt::green;
}
else
{
myBrush=Qt::gray;
}
}

Assuming your MainWindowinherits QMainWindow
MainWindow::paintEvent(QPaintEvent *) is a function that tells the systems to render your window.
So I let you guess what goes wrong when you override it like this.
But you can put the drawing in a QWidget made for this : QGraphicsView which displays the content of QGraphicsScene .
You should create a slot to do what you want, like this :
void MainWindow::on_led_timer_timeout(){
/*
Do stuff the the QGraphicsScene or QGraphicsView
*/
}
And then connect the correct signal of your QTimer to it :
connect(ledtimer, &QTimer::timeout, this, &MainWindow::on_led_timer_timeout);

class QSimpleLed : public QWidget
{
Q_OBJECT
Q_PROPERTY(QColor color READ color WRITE setColor)
public:
using QWidget::QWidget;
void setColor(const QColor& c) {
if (m_color != m) {
m_color = m;
update();
}
}
QColor color() const;
void paintEvent(QPaintEvent *) override;
private:
QColor m_color;
}
Implementation above should be obvious.
int main(int argc, char* argv[])
{
QApplication app{argc, argv};
QSimpleLed led;
auto animation = new QPropertyAnimation(&led, "color");
animation->setStartValue(Qt::red);
animation->setEndValue(Qt::green);
animation->setLoopCount(-1);
animation->setDuration(5000);
animation->start();
led.show();
return app.exec();
}

Related

QPainting QPixmap using clipping to gain performance

I'm trying to create a simple Image Viewer in Qt with zooming supported.
To display an image file I load it into a QImage and create a QPixmap.
class NN: public QWidget{
Q_OBJECT
Q_DISABLE_COPY(NN)
public:
NN(QWidget* parent = nullptr) : QWidget(parent){
}
const QPixmap& pixmap() const
{
return m_pixmap;
}
void setPixmap(const QPixmap& px)
{
m_pixmap = px;
update();
}
protected:
void paintEvent(QPaintEvent*)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, false);
style()->drawItemPixmap(&painter, rect(), Qt::AlignCenter, m_pixmap.scaled(rect().size()));
}
private:
QPixmap m_pixmap;
};
(This Widget is part of a ScrollArea)
This works fine, but when I try to load large images and zoom in, the performance starts to decrease (lag).
I thought of applying a clip to the drawItemPixmap() method, but I am not quite sure how and whether it would help increasing the performance.
My question is whether the clipping idea would work, and if so how. If not, maybe there is another way to gain performance?
When m_pixmap and/or rect() are very large, the bulk of your slowdown is likely coming from here:
m_pixmap.scaled(rect().size())
Here you are you are asking Qt to create a new QPixmap object the same size as rect(), which is a potentially very expensive operation; and passing that QPixmap object into the call to drawItemPixmap() which will draw just a small portion of the pixmap, after which the QPixmap object will get discarded, and the whole procedure will have to be done again the next time you want to redraw your object.
Needless to say, that can be very inefficient.
A more efficient approach would be to call QPainter::drawPixmap(const QRect & target, const Pixmap & pixmap, const QRect & source), like this:
painter.drawPixmap(rect(), m_pixmap, srcRect);
... and drawPixmap() will draw a scaled pixmap of size rect() (i.e. just the size of your widget) by rescaling the content of m_pixmap that is inside srcRect; much more efficient than rescaling the entire m_pixmap image.
You'll need to calculate the correct left/top/width/height values for srcRect, of course, but that should be straightforward with a little bit of algebra. (Basically just figure out what portion of the pixmap should currently be visible based on your widget's current zoom/pan state)
As I pointed out in this answer, it is better to use QGraphicsView for image scaling so I will translate the code to C++:
#include <QtWidgets>
class ImageViewer: public QGraphicsView{
public:
ImageViewer(QWidget *parent=nullptr):QGraphicsView(parent){
setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform);
// setAlignment(Qt::AlignLeft | Qt::AlignTop);
setAlignment(Qt::AlignCenter);
setBackgroundRole(QPalette::Dark);
QGraphicsScene *scene = new QGraphicsScene(this);
setScene(scene);
pixmapItem = new QGraphicsPixmapItem;
scene->addItem(pixmapItem);
}
bool setPixmap(const QPixmap & pixmap){
if(pixmap.isNull())
return false;
pixmapItem->setPixmap(pixmap);
return true;
}
void zoom(qreal f){
scale(f, f);
}
void zoomIn(){
zoom(factor);
}
void zoomOut(){
zoom(1.0 / factor);
}
void resetZoom(){
resetTransform();
}
void fitToWindow(){
fitInView(sceneRect(), Qt::KeepAspectRatio);
}
private:
qreal factor = 2.0;
QGraphicsPixmapItem * pixmapItem;
};
class MainWindow: public QMainWindow{
Q_OBJECT
public:
MainWindow(QWidget *parent=nullptr):QMainWindow(parent),
view(new ImageViewer)
{
setCentralWidget(view);
createActions();
createMenus();
resize(640, 480);
}
private Q_SLOTS:
void open(){
QStringList l;
for(const QByteArray & ba: QImageReader::supportedImageFormats()){
l << ("*." + QString::fromUtf8(ba));
}
QString filter = QString("Image Files(%1)").arg(l.join(" "));
QString fileName = QFileDialog::getOpenFileName(
this,
tr("Open Image"),
QDir::currentPath(),
filter
);
if(!fileMenu->isEmpty()){
bool loaded = view->setPixmap(QPixmap(fileName));
fitToWindowAct->setEnabled(loaded);
updateActions();
}
}
void fitToWindow(){
if(fitToWindowAct->isChecked())
view->fitToWindow();
else
view->resetZoom();
updateActions();
}
void about(){
QMessageBox::about(this, "ImageViewer", "ImageViewer");
}
private:
void createActions(){
openAct = new QAction("&Open...", this);
openAct->setShortcut(QKeySequence("Ctrl+O"));
connect(openAct, &QAction::triggered, this, &MainWindow::open);
exitAct = new QAction("E&xit", this);
exitAct->setShortcut(QKeySequence("Ctrl+Q"));
connect(exitAct, &QAction::triggered, this, &MainWindow::close);
zoomInAct = new QAction(tr("Zoom &In (25%)"), this);
zoomInAct->setShortcut(QKeySequence("Ctrl++"));
zoomInAct->setEnabled(false);
connect(zoomInAct, &QAction::triggered, view, &ImageViewer::zoomIn);
zoomOutAct = new QAction(tr("Zoom &Out (25%)"), this);
zoomOutAct->setShortcut(QKeySequence("Ctrl+-"));
zoomOutAct->setEnabled(false);
connect(zoomOutAct, &QAction::triggered, view, &ImageViewer::zoomOut);
normalSizeAct = new QAction(tr("&Normal Size"), this);
normalSizeAct->setShortcut(QKeySequence("Ctrl+S"));
normalSizeAct->setEnabled(false);
connect(normalSizeAct, &QAction::triggered, view, &ImageViewer::resetZoom);
fitToWindowAct = new QAction(tr("&Fit to Window"), this);
fitToWindowAct->setShortcut(QKeySequence("Ctrl+F"));
fitToWindowAct->setEnabled(false);
fitToWindowAct->setCheckable(true);
connect(fitToWindowAct, &QAction::triggered, this, &MainWindow::fitToWindow);
aboutAct = new QAction(tr("&About"), this);
connect(aboutAct, &QAction::triggered, this, &MainWindow::about);
aboutQtAct = new QAction(tr("About &Qt"), this);
connect(aboutQtAct, &QAction::triggered, qApp, &QApplication::aboutQt);
}
void createMenus(){
fileMenu = new QMenu(tr("&File"), this);
fileMenu->addAction(openAct);
fileMenu->addSeparator();
fileMenu->addAction(exitAct);
viewMenu = new QMenu(tr("&View"), this);
viewMenu->addAction(zoomInAct);
viewMenu->addAction(zoomOutAct);
viewMenu->addAction(normalSizeAct);
viewMenu->addSeparator();
viewMenu->addAction(fitToWindowAct);
helpMenu = new QMenu(tr("&Help"), this);
helpMenu->addAction(aboutAct);
helpMenu->addAction(aboutQtAct);
menuBar()->addMenu(fileMenu);
menuBar()->addMenu(viewMenu);
menuBar()->addMenu(helpMenu);
}
void updateActions(){
zoomInAct->setEnabled(not fitToWindowAct->isChecked());
zoomOutAct->setEnabled(not fitToWindowAct->isChecked());
normalSizeAct->setEnabled(not fitToWindowAct->isChecked());
}
ImageViewer *view;
QAction *openAct;
QAction *exitAct;
QAction *zoomInAct;
QAction *zoomOutAct;
QAction *normalSizeAct;
QAction *fitToWindowAct;
QAction *aboutAct;
QAction *aboutQtAct;
QMenu *fileMenu;
QMenu *viewMenu;
QMenu *helpMenu;
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
#include "main.moc"

QPropertyAnimation of a QGraphicsTextItem with a frame make the text shaky

I am animating a QGraphicsTextItem that I have added a frame around. During the animation the text seems to shake slightly inside the frame, which is very annoying.
An example code:
class MovingFrameText : public QGraphicsTextItem
{
Q_OBJECT;
public:
MovingFrameText( ) : QGraphicsTextItem(0)
{
setPlainText ( "human ");
QFont f = font();
f.setPixelSize(40);
setFont(f);
setFlags(QGraphicsItem::ItemIsMovable);
}
QRectF boundingRect() const
{
return QGraphicsTextItem::boundingRect().adjusted(-2,-2,+2,+2);
}
void paint(QPainter *painter,const QStyleOptionGraphicsItem *option,QWidget *widget)
{
QGraphicsTextItem::paint(painter,option,widget);
painter->setPen(Qt::black);
painter->drawRect(boundingRect());
}
};
int main(int argc, char *argv[])
{
QApplication app(argc,argv);
MovingFrameText t;
t.setPos(640,680);
QGraphicsScene scene;
scene.addItem(&t);
QGraphicsView view(&scene);
view.resize(640, 680);
view.show();
auto moveAnimation = new QPropertyAnimation( &t, "pos" );
moveAnimation->setDuration( 10000 );
moveAnimation->setStartValue( QPointF(640, 680) );
moveAnimation->setEndValue( QPointF(0, 0) );
moveAnimation->setEasingCurve( QEasingCurve::Linear );
moveAnimation->start(QAbstractAnimation::DeleteWhenStopped);
return app.exec();
}
Is there any way to smooth the animation?
Solution
You can substantially improve the animation by:
Using QVariantAnimation instead of QPropertyAnimation and calling QGraphicsItem::update on each iteration
Buffering the painting using an additional QPainter with a QPixmap as a canvas for all painting operations and then painting the canvas using the painter passed to the paint method
Note: The QGraphicsTextItem will still shake a bit, but at least it will behave as one object instead of several independent ones.
Example
Here is an example I have prepared for you of how your code could be changed in order to implement the proposed solution:
class MovingFrameText : public QGraphicsTextItem
{
public:
MovingFrameText(const QString &text, QGraphicsItem *parent = nullptr)
: QGraphicsTextItem(parent)
{
QFont f(font());
f.setPixelSize(40);
setFont(f);
setPlainText(text);
}
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
painter->setClipping(true);
painter->setClipRect(option->rect);
painter->setRenderHint(QPainter::SmoothPixmapTransform);
QPixmap canvas(option->rect.size());
QPainter canvasPainter;
canvas.fill(Qt::transparent);
canvasPainter.begin(&canvas);
canvasPainter.setFont(font());
canvasPainter.drawRect(option->rect.adjusted(0, 0, -1, -1));
canvasPainter.drawText(option->rect, toPlainText());
painter->drawPixmap(0, 0, canvas);
}
};
int main(int argc, char *argv[])
{
QApplication app(argc,argv);
QGraphicsView view;
auto *t = new MovingFrameText("human");
view.setScene(new QGraphicsScene(&view));
view.setAlignment(Qt::AlignLeft | Qt::AlignTop);
view.setSceneRect(0, 0, 640, 680);
view.scene()->addItem(t);
view.show();
auto *moveAnimation = new QVariantAnimation();
moveAnimation->setDuration(10000);
moveAnimation->setStartValue(QPointF(640, 680));
moveAnimation->setEndValue(QPointF(0, 0));
moveAnimation->start(QAbstractAnimation::DeleteWhenStopped);
QObject::connect(moveAnimation, &QVariantAnimation::valueChanged, [t](const QVariant &value){
t->setPos(value.toPointF());
t->update();
});
return app.exec();
}
#scopchanov answer is a very good one. I added here a solution I tested as well, and seems to work. I will need further time to inspect which one I think is better, but I will leave it here for others to try, if you end with a similar issue.
class MovingFrameText : public QGraphicsTextItem
{
Q_PROPERTY( QPointF pos READ pos WRITE setPosition )
public:
void setPosition(QPointF pos)
{
setPos(floor(pos.x()+0.5),floor(pos.y()+.5) );
}
};

Changing the QPushButton region mask in its subclass to create a RoundButton

I am trying to create a round button by subclassing and setting the region mask so that I can reuse it in my project. I know we can override paintEvent method and draw a circle to show it as a round button. But the problem with this approach is that if user clicks outside the circle (but within button rect) it will be treated as a button click. This problem we don't see when set the region mask.
I tried to set the region by calling setmask method inside resizeEvent/paintEvent. In either of case, button will be blank. I am trying to figure out the place inside the subclass to set the region mask.
RoundAnimatingButton.h ->
#include <QPushButton>
namespace Ui {
class CRoundAnimatingBtn;
}
class CRoundAnimatingBtn : public QPushButton
{
Q_OBJECT
public:
explicit CRoundAnimatingBtn(QWidget *parent = nullptr);
~CRoundAnimatingBtn();
void StartAnimation(QColor r);
void StopAnimation();
public slots:
void timerEvent(QTimerEvent *e);
private:
Ui::CRoundAnimatingBtn *ui;
bool m_Spinning;
// QWidget interface
protected:
void resizeEvent(QResizeEvent *event) override;
void paintEvent(QPaintEvent * e) override;
};
#endif // ROUNDANIMATINGBTN_H
RoundAnimatingButton.cpp
CRoundAnimatingBtn::CRoundAnimatingBtn(QWidget *parent)
: QPushButton (parent)
, ui(new Ui::CRoundAnimatingBtn)
, m_Spinning(false)
{
ui->setupUi(this);
}
CRoundAnimatingBtn::~CRoundAnimatingBtn()
{
delete ui;
}
void CRoundAnimatingBtn::paintEvent(QPaintEvent *e)
{
QPushButton::paintEvent(e);
if(m_Spinning)
{
// Animating code
}
}
void CRoundAnimatingBtn::StartAnimation(QColor r)
{
m_Spinning=true;
startTimer(5);
}
void CRoundAnimatingBtn::StopAnimation()
{
m_Spinning=false;
this->update();
}
void CRoundAnimatingBtn::timerEvent(QTimerEvent *e)
{
if(m_Spinning)
this->update();
else
killTimer(e->timerId());
}
void CRoundAnimatingBtn::DrawRing()
{
}
void CRoundAnimatingBtn::resizeEvent(QResizeEvent *event)
{
// -----------------------------------
// This code didn't work
// -----------------------------------
QRect rect = this->geometry();
QRegion region(rect, QRegion::Ellipse);
qDebug() << "PaintEvent Reound button - " << region.boundingRect().size();
this->setMask(region);
// ----------------------------------
// ------------------------------------
// This code worked
// -------------------------------------
int side = qMin(width(), height());
QRegion maskedRegion(width() / 2 - side / 2, height() / 2 - side / 2, side,
side, QRegion::Ellipse);
setMask(maskedRegion);
}
Qt doc. provides a sample for “non-rectangular” widgets – Shaped Clock Example.
(Un-)Fortunately, I remembered this not before I got my own sample running.
I started in Qt doc. with
void QWidget::setMask(const QBitmap &bitmap)
Causes only the pixels of the widget for which bitmap has a corresponding 1 bit to be visible. If the region includes pixels outside the rect() of the widget, window system controls in that area may or may not be visible, depending on the platform.
Note that this effect can be slow if the region is particularly complex.
The following code shows how an image with an alpha channel can be used to generate a mask for a widget:
QLabel topLevelLabel;
QPixmap pixmap(":/images/tux.png");
topLevelLabel.setPixmap(pixmap);
topLevelLabel.setMask(pixmap.mask());
The label shown by this code is masked using the image it contains, giving the appearance that an irregularly-shaped image is being drawn directly onto the screen.
Masked widgets receive mouse events only on their visible portions.
See also mask(), clearMask(), windowOpacity(), and Shaped Clock Example.
(When reading this, I still missed the link to example.)
At first, I prepared a suitable pixmap for my purpose – dialog-error.png:
for which I converted an SVG from one of my applications.
I tried to apply it to a QPushButton as icon and as mask. This looked very strange. I'm not quite sure what exactly was the problem:
- using the resp. QPushButton as toplevel widget (i.e. main window)
- the fact that QPushButtons icon rendering and the mask may not match concerning position or size.
Without digging deeper, I changed the code and fixed both issues in next try:
making a derived button (like described by OP)
using the button as non-toplevel widget.
This worked soon. I added some code to make the effect more obvious:
a mouse press event handler for main window to show whether shape is considered correctly
a signal handler to show whether clicks on button (in shape) are received correctly.
So, I came to the following sample – testQPushButtonMask.cc:
#include <QtWidgets>
class MainWindow: public QWidget {
public:
explicit MainWindow(QWidget *pQParent = nullptr):
QWidget(pQParent)
{ }
virtual ~MainWindow() = default;
MainWindow(const MainWindow&) = delete;
MainWindow& operator=(const MainWindow&) = delete;
protected:
virtual void mousePressEvent(QMouseEvent *pQEvent) override;
};
void MainWindow::mousePressEvent(QMouseEvent *pQEvent)
{
qDebug() << "MainWindow::mousePressEvent:" << pQEvent->pos();
QWidget::mousePressEvent(pQEvent);
}
class RoundButton: public QPushButton {
private:
QPixmap _qPixmap;
public:
RoundButton(const QPixmap &qPixmap, QWidget *pQParent = nullptr):
QPushButton(pQParent),
_qPixmap(qPixmap)
{
setMask(_qPixmap.mask());
}
virtual ~RoundButton() = default;
RoundButton(const RoundButton&) = delete;
RoundButton& operator=(const RoundButton&) = delete;
virtual QSize sizeHint() const override;
protected:
virtual void paintEvent(QPaintEvent *pQEvent) override;
};
QSize RoundButton::sizeHint() const { return _qPixmap.size(); }
void RoundButton::paintEvent(QPaintEvent*)
{
QPainter qPainter(this);
const int xy = isDown() * -2;
qPainter.drawPixmap(xy, xy, _qPixmap);
}
int main(int argc, char **argv)
{
qDebug() << "Qt Version:" << QT_VERSION_STR;
QApplication app(argc, argv);
QPixmap qPixmap("./dialog-error.png");
// setup GUI
MainWindow qWin;
qWin.setWindowTitle(QString::fromUtf8("QPushButton with Mask"));
QVBoxLayout qVBox;
RoundButton qBtn(qPixmap);
qVBox.addWidget(&qBtn);
qWin.setLayout(&qVBox);
qWin.show();
// install signal handlers
QObject::connect(&qBtn, &RoundButton::clicked,
[](bool) { qDebug() << "RoundButton::clicked()"; });
// runtime loop
return app.exec();
}
The corresponding Qt project file testQPushButtonMask.pro
SOURCES = testQPushButtonMask.cc
QT += widgets
Compiled and tested on cygwin64:
$ qmake-qt5 testQPushButtonMask.pro
$ make && ./testQPushButtonMask
Qt Version: 5.9.4
MainWindow::mousePressEvent: QPoint(23,22)
MainWindow::mousePressEvent: QPoint(62,24)
MainWindow::mousePressEvent: QPoint(62,61)
MainWindow::mousePressEvent: QPoint(22,60)
RoundButton::clicked()
Concerning the output:
I clicked into the four corners of button.
I clicked on the center of button.

How to draw a shape right at the position of the QPushButton clicked on?

//oneLed.h
#pragma once
#include<QPushButton>
class oneLed :public QPushButton
{
Q_OBJECT
public:
oneLed(QWidget* parent = 0);
protected:
void doPainting();
};
#include"oneLed.h"
#include<QPainter>
oneLed::oneLed(QWidget* parent)
:QPushButton(parent)
{
connect(this, &QPushButton::clicked, this, &oneLed::doPainting);
}
void oneLed::doPainting()
{
QPainter painter(this);
//painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(QPen(QBrush("#888"), 1));
painter.setBrush(QBrush(QColor("#888")));
painter.drawEllipse(0, 0, this->width(), this->height());
//painter.drawEllipse(0, 0, 30, 30);
}
//main.cpp
#include"oneLed.h"
#include <QtWidgets/QApplication>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
oneLed w;
w.resize(100, 500);
w.show();
return a.exec();
}
I want to achieve the following effect:
When I clicked on the oneLed object, A circle appears at the position of the oneled object. When I click on the oneLed object again, the circle disappears.
But in fact when I click on the oneLed object, the circle doesn't appear.
I guess you got it wrong. What happens in your code is:
the button is clicked and your doPainting slot is called
you do your custom painting
the actual button paint event is triggered by Qt main event loop and overwrites your painting
You need to override the paintEvent method.
In your custom slot, raise a boolean flag that indicates the button has been pressed.
void oneLed::slotClicked()
{
m_clicked = !m_clicked;
}
Then do something like this:
void oneLed::paintEvent(QPaintEvent *event)
{
// first render the Qt button
QPushButton::paintEvent(event);
// afterward, do custom painting over it
if (m_clicked)
{
QPainter painter(this);
painter.setPen(QPen(QBrush("#888"), 1));
painter.setBrush(QBrush(QColor("#888")));
painter.drawEllipse(0, 0, this->width(), this->height());
}
}
The method that you implement is paintEvent, in the slot that doPainting you must change a flag and call the update() method.
Important: The update method calls paintEvent.
oneLed.h
#ifndef ONELED_H
#define ONELED_H
#include <QPushButton>
class oneLed : public QPushButton
{
Q_OBJECT
public:
oneLed(QWidget* parent = 0);
protected:
void paintEvent(QPaintEvent * event);
private slots:
void doPainting();
private:
bool state;
};
#endif // ONELED_H
oneLed.cpp
#include "oneled.h"
#include <QPainter>
oneLed::oneLed(QWidget *parent):QPushButton(parent)
{
state = false;
connect(this, &QPushButton::clicked, this, &oneLed::doPainting);
}
void oneLed::paintEvent(QPaintEvent *event)
{
QPushButton::paintEvent(event);
if(state){
QPainter painter(this);
//painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(QPen(QBrush("#888"), 1));
painter.setBrush(QBrush(QColor("#888")));
painter.drawEllipse(0, 0, width(), height());
}
}
void oneLed::doPainting()
{
state = !state;
update();
}

Erasing painted areas from translucent widgets in Qt

I am faced with the problem of having to erase previously painted areas on a Qt widget.
The basic idea is, the user selects an area of the screen by clicking and dragging the mouse and a rectangle is drawn over the selected area.
The header
class ClearBack : public QWidget
{
Q_OBJECT
public:
explicit ClearBack(const QPoint &startingPos);
bool eventFilter(QObject *obj, QEvent *event);
void paintEvent(QPaintEvent *);
void mouseMoveEvent(QMouseEvent *event);
signals:
void regionSelected(const QRect &);
private:
QRect currentRegion;
};
The Implementation
ClearBack::ClearBack(const QPoint &startingPos)
{
setBackgroundRole(QPalette::Base);
installEventFilter(this);
currentRegion.setTopLeft(startingPos);
currentRegion.setBottomRight(startingPos);
this->setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint);
this->showMaximized();
}
void ClearBack::paintEvent(QPaintEvent * event)
{
Q_UNUSED(event);
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(Qt::black);
painter.drawRect(currentRegion);
}
void ClearBack::mouseMoveEvent(QMouseEvent *event)
{
QPoint currentPos(event->globalX(), event->globalY());
currentRegion.setBottomRight(currentPos);
this->repaint();
}
On a widget that has a solid background the effect works quite nicely, producing a single rectangle.
However, when the background is set to setAttribute(Qt::WA_TranslucentBackground); the following occurs.
The rectangles that were drawn previously are not "erased"
Is there a way to erase the previously painted rectangles on a translucent background, and if so, how?
Also for "bonus points" why does this effect occur on a translucent background and not on a solid one?
Widgets with WA_TranslucentBackground attribute do not clear their backgrounds automatically. You have to:
Change the composition mode from the default SourceOver to Source,
Explicitly clear the old rectangle with a transparent brush,
Paint the new rectangle.
Below is a working example, tested under Qt 5. You have to press the mouse to draw the initial rectangle and drag it around; the program exits when you release the mouse.
#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QMouseEvent>
class ClearBack : public QWidget
{
Q_OBJECT
QRect m_currentRegion, m_lastRegion;
public:
explicit ClearBack(const QPoint &startingPos) :
m_currentRegion(startingPos, startingPos)
{
setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground);
showMaximized();
}
Q_SIGNAL void regionSelected(const QRect &);
protected:
void paintEvent(QPaintEvent *) {
QPainter painter(this);
painter.setCompositionMode(QPainter::CompositionMode_Source);
painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(QPen(Qt::transparent, 3));
painter.drawRect(m_lastRegion);
m_lastRegion = m_currentRegion;
painter.setPen(Qt::black);
painter.drawRect(m_currentRegion);
}
void mouseMoveEvent(QMouseEvent *event) {
m_currentRegion.setBottomRight(event->globalPos());
update();
}
void mouseReleaseEvent(QMouseEvent *) {
emit regionSelected(m_currentRegion);
}
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
ClearBack back(QPoint(200,200));
a.connect(&back, SIGNAL(regionSelected(QRect)), SLOT(quit()));
return a.exec();
}
#include "main.moc"