QPropertyAnimation of a QGraphicsTextItem with a frame make the text shaky - c++

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

Related

How to use the QGraphicsItem::setPos() function

I can't figure out how the setPos() function of the QGraphicsItem class works.
My Rect class has no parent, so its origin is relative to the scene.
I try to put the rectangle back at (0, 0) after it is moved with the mouse but it is placed in a different place depending on where I had moved it.
I suppose that means that the origin of the scene moves but what causes this change?
class Rect : public QGraphicsItem {
public:
Rect(): QGraphicsItem()
{
setFlag(ItemIsMovable);
}
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override
{
painter->drawRect(0, 0, 20, 20);
}
void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) override
{
setPos(0, 0);
update();
QGraphicsItem::mouseReleaseEvent(event);
}
QRectF boundingRect() const
{
return QRectF(0, 0, 20, 20);
}
private:
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QGraphicsScene scene;
QGraphicsView view(&scene);
Rect obj;
scene.addItem(&obj);
view.show();
return a.exec();
}
When you create a QGraphicsView you initially accept the default settings. A standard setting is, for example, that it is horizontally centered.
Another factor is that the default area size is probably up to the maximum size.
what you can do set a custom size for the scene. You do that with graphicsView->setSceneRect(0,0,300,300); (for example)
scene = new QGraphicsScene(this);
ui->graphicsView->setScene(scene);
ui->graphicsView->setRenderHint(QPainter::Antialiasing);
ui->graphicsView->setSceneRect(0,0, 300,300);
rectItem = new QGraphicsRectItem(0,0, 100, 100);
rectItem->setPen(QPen(Qt::darkMagenta, 2));
rectItem->setBrush(QGradient(QGradient::SaintPetersburg));
rectItem->setPos(190,10);
scene->addItem(rectItem);
So in summary: if you want to work with fixed values. maybe it is better to know the total size. (that was not clear from your code, that's why I gave this example)

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"

Change circle colour every 5 seconds

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

How to change the color of a QGraphicsRectItem

I can't find where I'm doing wrong. I want to change the color of my item (a QGraphicsRectItem) when a particular event occurs. The fact is that it seems that once the override paint method is called, the color won't change no matter what. This is a simplyfied code of what I've done:
item.h
class Item : public QGraphicsRectItem
{
public:
Item(QGraphicsView *graphView);
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *) override;
private:
QPointF newPos;
QGraphicsView *graph;
};
item.cpp
Item::Item(QGraphicsView *graphWidget) : graph(graphWidget) { }
void Item::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
{
painter->setPen(Qt::NoPen);
painter->setBrush(Qt::black);
painter->drawEllipse(-7, -7, 20, 20);
}
main.cpp
int main(int argc, char *argv[])
{
srand(QDateTime::currentDateTime().toMSecsSinceEpoch());
QApplication a(argc, argv);
QGraphicsScene scene;
QGraphicsView view(&scene);
Item *item = new Item(&view);
scene.addItem(item);
item->setPos(0, 0);
item->setBrush(Qt::red);
item->update();
view.show();
return a.exec();
}
If I understand properly your question, the problem is that after item->setBrush(Qt::red), your circle is not being painter red. If this is the case, the problem is that you are forcing a specific pen (Qt::NoPen) and brush (Qt::red) in your paint function, and you are not using Item::pen() and Item::brush() to retrieve the information. Instead, you can do the following:
Item::Item(QGraphicsView *graphWidget) : graph(graphWidget)
{
setPen(Qt::NoPen);
setBrush(Qt::black);
}
void Item::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
{
Q_UNUSED(option);
painter->setPen(pen());
painter->setBrush(brush());
painter->drawEllipse(-7, -7, 20, 20);
}
This way, you define the default pen and brush in the constructor, but you can still change them using Item::setPen and Item::setBrush. Moreover, for this example you would be better inheriting QAbstractGraphicsShapeItem but then you have to implement Item::boundingRectfunction. The following example outputs a red circle (which is what I suspect you want to do) and also draw the contour with black (although it is not what you wanted, but to show that pen also changes):
#include <QApplication>
#include <QDateTime>
#include <QGraphicsRectItem>
#include <QGraphicsScene>
#include <QGraphicsView>
class Item : public QAbstractGraphicsShapeItem
{
public:
Item(QGraphicsView *graphView);
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *) override;
virtual QRectF boundingRect() const override;
private:
QPointF newPos;
QGraphicsView *graph;
};
Item::Item(QGraphicsView *graphWidget) : graph(graphWidget)
{
setPen(Qt::NoPen);
setBrush(Qt::black);
}
void Item::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *)
{
Q_UNUSED(option);
painter->setPen(pen());
painter->setBrush(brush());
painter->drawEllipse(-7, -7, 20, 20);
}
QRectF Item::boundingRect() const
{
double pw = pen().widthF() / 2;
return QRectF(QPointF(-7 - pw, -7 - pw), QSizeF(20 + 2 * pw, 20 + 2 * pw));
}
int main(int argc, char *argv[])
{
srand(QDateTime::currentDateTime().toMSecsSinceEpoch());
QApplication a(argc, argv);
QGraphicsScene scene;
QGraphicsView view(&scene);
Item *item = new Item(&view);
scene.addItem(item);
item->setPos(0, 0);
item->setBrush(Qt::red);
item->setPen(QPen(Qt::black));
item->update();
view.show();
return a.exec();
}

After call QGraphicsScene::advance() my item not redrawn

I was trying to do a simple animation on QGrapichScene. I implemented void QGraphicsItem::advance(int) in class, that inherites QGraphicsItem, but after calling advance() my item not redrawn. In colliding mice example it works.
What have I done wrong?
Here is my code:
widget.h:
class Widget : public QWidget
{
Q_OBJECT
private:
QGraphicsScene *scene;
QGraphicsView *view;
QHBoxLayout *layout;
QTimer t;
public:
Widget(QWidget *parent = 0);
~Widget();
};
widget.cpp:
Widget::Widget(QWidget *parent) : QWidget(parent)
{
layout = new QHBoxLayout(this);
view = new QGraphicsView(this);
scene = new QGraphicsScene(0, 0, 400, 400, view);
scene->addItem(new MyItem());
view->setScene(scene);
layout->addWidget(view);
setLayout(layout);
connect(&t, SIGNAL(timeout()), scene, SLOT(advance()));
t.start(100);
}
Widget::~Widget()
{
}
my_item.h:
class MyItem : public QGraphicsItem
{
private:
QRect bRect;
enum directon { left, right };
directon currentDir;
protected:
virtual void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
public:
MyItem(int w = 20);
virtual void advance(int phase);
virtual QRectF boundingRect() const
{ return QRectF(bRect); }
};
my_item.cpp:
MyItem::MyItem(int w)
{
currentDir = right;
bRect = QRect(0, 0, w, w);
}
void MyItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
qDebug() << "In void MyItem::paint(QPainter*, "
"const QStyleOptionGraphicsItem*, "
"QWidget*)";
painter->fillRect(bRect, Qt::red);
}
void MyItem::advance(int phase)
{
qDebug() << "In void MyItem::advance(int);"
<< "Phase =" << phase;
if(!phase)
return;
// Than move item to new positon...
}
It's on you to inform the graphics scene that your item's contents have changed. You have to call update() at the end of advance(). If you're simply moving the item, without changing its contents, then you don't need to call update() of course - the scene will detect such changes automatically.
I found something strange:
connect(&timer, SIGNAL(timeout()), scene, SLOT(advance()));
The slot need to combined after the Widget is shown, or the slot will never been called!
As the Qt example shown, you can combine it in the main function.