Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Simple turn page effect with graphics view

From Wiki
Jump to: navigation, search
Article Metadata
Created: gnuton (22 Dec 2010)
Last edited: hamishwillee (30 Jan 2013)



This article shows how to implement turn page effect in Qt. Touchscreen devices enable developers to create more fancy and usable interfaces. A cool effect for ebook readers is the turn page effect, which could be done in several ways.


The media player is loading...

This example has been written to show you how to achieve a turn-page effect in a simple way just using the Qt graphics view. It involves simple 2D prospective transformations and gradients usage. The code shown in this article is just a proof-of-concept and it can be largely improved. This example can render just simple text, but actually it could became a PDF reader just displaying QImages rendered by some libraries such as libpoppler... The page graphics item displays two pages at same time and by sliding your finger from right to left, you can change page. To keep the code simple, few features have been implemented (indeed it's only possible to go forward). This one, as well as many other features, can be added easily.


The idea is to have only one graphics item which shows and animate every page. This item is big as the page size, and it's able to show only 2 pages at time. This is not a limitation, but it's how the item has been designed. The first page is the page which has to be animated. The second one is the one which stays on the back and it's static. Both pages are drawn by the item paint method and the animation is done by a QVariantAnimation subclass. Mouse events are used to get the gestures, which make this implementation working in devices where QGestures are not available. The page animation is done by rotating the page around the Y axis. The page effect can be changed moving the origin along the left border of the page.



Here the main class which draws the pages. The complete code can be found at the end of this page.

#ifndef PAGE_H
#define PAGE_H
#include <QWidget>
#include <QGraphicsRectItem>
#include <QGraphicsSceneMouseEvent>
#include <QStyleOptionGraphicsItem>
#include <myVariantAnimator.h>
#include <QPainter>
#include <math.h>
class page : public QObject, public QGraphicsRectItem
page(QGraphicsItem * parent = 0): mAngle(0){
// Set border and text foreground color
// Set size
mWidth = 200; //Sorry this has been hard-coded to make the code minimal
mHeight = sqrt(2)* mWidth;
this->setRect(QRect(0,-mHeight/2, mWidth, mHeight));
//Initialize the animator
connect(&mAngleAnimator, SIGNAL(valueChanged(const QVariant&)), this, SLOT(doAnimation()));
void mousePressEvent(QGraphicsSceneMouseEvent *event){
mX = event->pos().x();
void mouseReleaseEvent(QGraphicsSceneMouseEvent *event){
// Change page
int currentX = event->pos().x();
if ((mX - currentX) > (mWidth/3)){
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0){
int angle = 0;
// Draw the page on the back
renderPage(painter, angle);
// Draw the page on the front
angle = mAngleAnimator.currentValue().toInt();
QTransform t;
t.rotate(angle, Qt::YAxis);
painter->setTransform(t, true);
renderPage(painter, angle);
void setText(const QString& text){
mText = text;
const QString text(){
return mText;
inline void renderPage(QPainter* painter, int angle){
QLinearGradient fade;
fade.setColorAt(0, QColor(148,148,148, 255));
fade.setColorAt(1, QColor(255, 255, 255, 255));
fade.setStart(0, mHeight/2);
fade.setFinalStop(mWidth * calcGradient(angle), mHeight/2);;
painter->fillRect(boundingRect(), fade);
painter->drawText(boundingRect(), mText);
inline qreal calcGradient(int angle){
qreal x1 = 0; // Initial angle
qreal y1 = (qreal)1/15; // shadow width at the initial angle
qreal x2 = 90; // Final angle
qreal y2 = 1; // shadow width at the final angle
qreal q = y1;
return (y2 - y1)/(x2 - x1) * angle + q;
public slots:
void doAnimation(){
int mWidth;
int mHeight;
int mX;
int mAngle;
myVariantAnimator mAngleAnimator;
QString mText;
#endif // PAGE_H
This page was last modified on 30 January 2013, at 04:25.
85 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.