×
Namespaces

Variants
Actions
(Difference between revisions)

Archived:Animated effects with the Qt Graphics View Framework

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Text replace - "<code cpp>" to "<code cpp-qt>")
hamishwillee (Talk | contribs)
m (Hamishwillee - Change to use new video player which works with Lumia 920 and other mobile browsers)
 
Line 1: Line 1:
{{Archived|timestamp=20120302030904|user=[[User:Hamishwillee|&lt;br /&gt;----]]|[[:Category:Qt Quick|Qt Quick]] should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.}}
 
 
[[Category:Qt C++ UI]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Code Examples]][[Category:Graphics]]
 
[[Category:Qt C++ UI]][[Category:MeeGo Harmattan]][[Category:Symbian]][[Category:Code Examples]][[Category:Graphics]]
 +
{{Archived|timestamp=20120302030904|user=[[User:Hamishwillee|&lt;br /&gt;----]]|[[:Category:Qt Quick|Qt Quick]] should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.}}
 +
 
{{Abstract|This code snippet shows how to create animated graphics effect with the Qt's [http://doc.qt.nokia.com/4.7/graphicsview.html Graphics View Framework].}}  
 
{{Abstract|This code snippet shows how to create animated graphics effect with the Qt's [http://doc.qt.nokia.com/4.7/graphicsview.html Graphics View Framework].}}  
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
Line 24: Line 25:
 
|author= [[User:Gnuton]]
 
|author= [[User:Gnuton]]
 
}}
 
}}
{{#ev:youtube|sfeZYSTEpuA}}
+
<mediaplayer>http://www.youtube.com/watch?v=sfeZYSTEpuA</mediaplayer>
  
 
== Implementation ==
 
== Implementation ==

Latest revision as of 07:27, 30 January 2013

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Qt Quick should be used for all UI development on mobile devices. The approach described in this article (using C++ for the Qt app UI) is deprecated.

This code snippet shows how to create animated graphics effect with the Qt's Graphics View Framework.

Article Metadata
Code ExampleCompatibility
Platform(s): any
Symbian
Article
Keywords: QGraphicsEffect
Created: gnuton (29 Dec 2010)
Last edited: hamishwillee (30 Jan 2013)

The media player is loading...

[edit] Implementation

The right way to apply effects to Graphics items is to use QGraphicsEffect based classes. Few pre-build effects are already part of the framework and those are not animated. Since QGraphicsEffect is a QObject derived class, creating animated effects is possible. To achieve that, you need a timer which is started by QObject::startTimer(int interval) and which will call the virtual timerEvent() function of your QObject derived class every N milliseconds as specified by the interval.

Using an interval of 17 ms permits the animation to run at about 58 FPS, which is a good frame-rate.

So every 17ms the timerEvent slot updates the parameter (the rotation angle in this case) which drives the animation and it calls update() to draw again the item using MyQGraphicsEffect::draw function.

Since painter transformations don't affect QGraphicsEffect::drawSource (at least in the case shown here), a QImage has been used as device buffer for an ad-hoc painter. Eventually the buffer, which contains the animation frames, is drawn on the screen by the application painter.

[edit] Code

Here is the graphics effect class which rotates the items around the Y axis.

#ifndef GRAPHICSEFFECT_H
#define GRAPHICSEFFECT_H
 
#include <QGraphicsEffect>
#include <QGraphicsItem>
#include <QPainter>
 
class MyQGraphicsEffect : public QGraphicsEffect
{
Q_OBJECT;
 
public:
MyQGraphicsEffect(QObject *parent = 0)
{
QObject::startTimer(17); // About 60 FPS
}
 
virtual ~MyQGraphicsEffect(){};
 
protected:
virtual void draw(QPainter *painter){
 
QSizeF s = this->sourceBoundingRect().size();
 
QImage buff(s.width(), s.height(), QImage::Format_ARGB32);
 
QPainter p(&buff);
p.fillRect(0, 0, s.width(), s.height(), Qt::black);
 
QTransform t;
t.translate(+s.width()/2,+s.height()/2);
t.rotate(mAngle, Qt::YAxis);
t.translate(-s.width()/2,-s.height()/2);
 
p.setTransform(t, true);
drawSource(&p);
 
QRectF target(0, 0, s.width(), s.height());
QRectF source(0, 0, s.width(), s.height());
 
painter->drawImage(target, buff, source);
}
 
protected:
void timerEvent(QTimerEvent *event){
Q_UNUSED(event);
 
mAngle = (mAngle >= 360) ? 0 : mAngle+= 1;
 
update();
}
 
private:
qreal mAngle;
};
 
#endif // GRAPHICSEFFECT_H

This effect, as any other effect, can be applied to any item as shown in the following code:

#include <QtGui/QApplication>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QGraphicsPixmapItem>
#include <QGraphicsEffect>
#include "graphicseffect.h"
 
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QGraphicsView view;
view.setScene(new QGraphicsScene);
QGraphicsPixmapItem *p = view.scene()->addPixmap(QPixmap(":/meditate.png"));
 
MyQGraphicsEffect e;
p->setGraphicsEffect(&e);
 
view.show();
return a.exec();
}

[edit] Full code

Full source code is available here: Media:Graphicseffects-animated.zip

This page was last modified on 30 January 2013, at 07:27.
90 page views in the last 30 days.