Viadeo Twitter Google Bookmarks ! Facebook Digg MySpace Yahoo MyWeb Blinklist Netvouz Reddit Simpy StumbleUpon Bookmarks Windows Live Favorites 
Logo Documentation Qt ·  Page d'accueil  ·  Toutes les classes  ·  Toutes les fonctions  ·  Vues d'ensemble  · 

Image Composition Example



The Image Composition example lets the user combine images together using any composition mode supported by QPainter, described in detail in Composition Modes.

Setting Up The Resource File

The Image Composition example requires two source images, butterfly.png and checker.png that are embedded within imagecomposition.qrc. The file contains the following code:

 <!DOCTYPE RCC><RCC version="1.0">

For more information on resource files, see The Qt Resource System.

ImageComposer Class Definition

The ImageComposer class is a subclass of QWidget that implements three private slots, chooseSource(), chooseDestination(), and recalculateResult().

 class ImageComposer : public QWidget


 private slots:
     void chooseSource();
     void chooseDestination();
     void recalculateResult();

In addition, ImageComposer consists of five private functions, addOp(), chooseImage(), loadImage(), currentMode(), and imagePos(), as well as private instances of QToolButton, QComboBox, QLabel, and QImage.

     void addOp(QPainter::CompositionMode mode, const QString &name);
     void chooseImage(const QString &title, QImage *image, QToolButton *button);
     void loadImage(const QString &fileName, QImage *image, QToolButton *button);
     QPainter::CompositionMode currentMode() const;
     QPoint imagePos(const QImage &image) const;

     QToolButton *sourceButton;
     QToolButton *destinationButton;
     QComboBox *operatorComboBox;
     QLabel *equalLabel;
     QLabel *resultLabel;

     QImage sourceImage;
     QImage destinationImage;
     QImage resultImage;

ImageComposer Class Implementation

We declare a QSize object, resultSize, as a static constant with width and height equal to 200.

 static const QSize resultSize(200, 200);

Within the constructor, we instantiate a QToolButton object, sourceButton and set its iconSize property to resultSize. The operatorComboBox is instantiated and then populated using the addOp() function. This function accepts a QPainter::CompositionMode, mode, and a QString, name, representing the name of the composition mode.

     sourceButton = new QToolButton;

     operatorComboBox = new QComboBox;
     addOp(QPainter::CompositionMode_SourceOver, tr("SourceOver"));
     addOp(QPainter::CompositionMode_DestinationOver, tr("DestinationOver"));
     addOp(QPainter::CompositionMode_Clear, tr("Clear"));
     addOp(QPainter::CompositionMode_Source, tr("Source"));
     addOp(QPainter::CompositionMode_Destination, tr("Destination"));
     addOp(QPainter::CompositionMode_SourceIn, tr("SourceIn"));
     addOp(QPainter::CompositionMode_DestinationIn, tr("DestinationIn"));
     addOp(QPainter::CompositionMode_SourceOut, tr("SourceOut"));
     addOp(QPainter::CompositionMode_DestinationOut, tr("DestinationOut"));
     addOp(QPainter::CompositionMode_SourceAtop, tr("SourceAtop"));
     addOp(QPainter::CompositionMode_DestinationAtop, tr("DestinationAtop"));
     addOp(QPainter::CompositionMode_Xor, tr("Xor"));
     addOp(QPainter::CompositionMode_Plus, tr("Plus"));
     addOp(QPainter::CompositionMode_Multiply, tr("Multiply"));
     addOp(QPainter::CompositionMode_Screen, tr("Screen"));
     addOp(QPainter::CompositionMode_Overlay, tr("Overlay"));
     addOp(QPainter::CompositionMode_Darken, tr("Darken"));
     addOp(QPainter::CompositionMode_Lighten, tr("Lighten"));
     addOp(QPainter::CompositionMode_ColorDodge, tr("ColorDodge"));
     addOp(QPainter::CompositionMode_ColorBurn, tr("ColorBurn"));
     addOp(QPainter::CompositionMode_HardLight, tr("HardLight"));
     addOp(QPainter::CompositionMode_SoftLight, tr("SoftLight"));
     addOp(QPainter::CompositionMode_Difference, tr("Difference"));
     addOp(QPainter::CompositionMode_Exclusion, tr("Exclusion"));

The destinationButton is instantiated and its iconSize property is set to resultSize as well. The QLabels equalLabel and resultLabel are created and resultLabel's minimumWidth is set.

     destinationButton = new QToolButton;

     equalLabel = new QLabel(tr("="));

     resultLabel = new QLabel;

We connect the following signals to their corresponding slots:

  • sourceButton's clicked() signal is connected to chooseSource(),
  • operatorComboBox's activated() signal is connected to recalculateResult(), and
  • destinationButton's clicked() signal is connected to chooseDestination().
     connect(sourceButton, SIGNAL(clicked()), this, SLOT(chooseSource()));
     connect(operatorComboBox, SIGNAL(activated(int)),
             this, SLOT(recalculateResult()));
     connect(destinationButton, SIGNAL(clicked()),
             this, SLOT(chooseDestination()));

A QGridLayout, mainLayout, is used to place all the widgets. Note that mainLayout's sizeConstraint property is set to QLayout::SetFixedSize, which means that ImageComposer's size cannot be resized at all.

     QGridLayout *mainLayout = new QGridLayout;
     mainLayout->addWidget(sourceButton, 0, 0, 3, 1);
     mainLayout->addWidget(operatorComboBox, 1, 1);
     mainLayout->addWidget(destinationButton, 0, 2, 3, 1);
     mainLayout->addWidget(equalLabel, 1, 3);
     mainLayout->addWidget(resultLabel, 0, 4, 3, 1);

We create a QImage, resultImage, and we invoke loadImage() twice to load both the image files in our imagecomposition.qrc file. Then, we set the windowTitle property to "Image Composition".

     resultImage = QImage(resultSize, QImage::Format_ARGB32_Premultiplied);

     loadImage(":/images/butterfly.png", &sourceImage, sourceButton);
     loadImage(":/images/checker.png", &destinationImage, destinationButton);

     setWindowTitle(tr("Image Composition"));

The chooseSource() and chooseDestination() functions are convenience functions that invoke chooseImage() with specific parameters.

 void ImageComposer::chooseSource()
     chooseImage(tr("Choose Source Image"), &sourceImage, sourceButton);

 void ImageComposer::chooseDestination()
     chooseImage(tr("Choose Destination Image"), &destinationImage,

The chooseImage() function loads an image of the user's choice, depending on the title, image, and button.

 void ImageComposer::chooseImage(const QString &title, QImage *image,
                                 QToolButton *button)
     QString fileName = QFileDialog::getOpenFileName(this, title);
     if (!fileName.isEmpty())
         loadImage(fileName, image, button);

The recalculateResult() function is used to calculate amd display the result of combining the two images together with the user's choice of composition mode.

 void ImageComposer::recalculateResult()
     QPainter::CompositionMode mode = currentMode();

     QPainter painter(&resultImage);
     painter.fillRect(resultImage.rect(), Qt::transparent);
     painter.drawImage(0, 0, destinationImage);
     painter.drawImage(0, 0, sourceImage);
     painter.fillRect(resultImage.rect(), Qt::white);


The addOp() function adds an item to the operatorComboBox using QComboBox's addItem function. This function accepts a QPainter::CompositionMode, mode, and a QString, name. The rectangle is filled with Qt::Transparent and both the sourceImage and destinationImage are painted, before displaying it on resultLabel.

 void ImageComposer::addOp(QPainter::CompositionMode mode, const QString &name)
     operatorComboBox->addItem(name, mode);

The loadImage() function paints a transparent background using fillRect() and draws image in a centralized position using drawImage(). This image is then set as the button's icon.

 void ImageComposer::loadImage(const QString &fileName, QImage *image,
                               QToolButton *button)

     QImage fixedImage(resultSize, QImage::Format_ARGB32_Premultiplied);
     QPainter painter(&fixedImage);
     painter.fillRect(fixedImage.rect(), Qt::transparent);
     painter.drawImage(imagePos(*image), *image);

     *image = fixedImage;


The currentMode() function returns the composition mode currently selected in operatorComboBox.

 QPainter::CompositionMode ImageComposer::currentMode() const
     return (QPainter::CompositionMode)

We use the imagePos() function to ensure that images loaded onto the QToolButton objects, sourceButton and destinationButton, are centralized.

 QPoint ImageComposer::imagePos(const QImage &image) const
     return QPoint((resultSize.width() - image.width()) / 2,
                   (resultSize.height() - image.height()) / 2);

The main() Function

The main() function instantiates QApplication and ImageComposer and invokes its show() function.

 int main(int argc, char *argv[])

     QApplication app(argc, argv);
     ImageComposer composer;;
     return app.exec();

Best Of

Actualités les plus lues

  1. Les développeurs détestent-ils les antivirus ? Un programmeur manifeste sa haine envers ces solutions de sécurité 23
  2. «Le projet de loi des droits du développeur» : quelles conditions doivent remplir les entreprises pour que le développeur puisse réussir ? 46
  3. Une nouvelle ère d'IHM 3D pour les automobiles, un concept proposé par Digia et implémenté avec Qt 3
  4. Qt Creator 2.5 est sorti en beta, l'EDI supporte maintenant plus de fonctionnalités de C++11 2
  5. PySide devient un add-on Qt et rejoint le Qt Project et le modèle d'open gouvernance 1
  6. Vingt sociétés montrent leurs décodeurs basés sur Qt au IPTV World Forum, en en exploitant diverses facettes (déclaratif, Web, widgets) 0
  7. Thread travailleur avec Qt en utilisant les signaux et les slots, un article de Christophe Dumez traduit par Thibaut Cuvelier 1
  1. « Quelque chose ne va vraiment pas avec les développeurs "modernes" », un développeur à "l'ancienne" critique la multiplication des bibliothèques 94
  2. Apercevoir la troisième dimension ou l'utilisation multithreadée d'OpenGL dans Qt, un article des Qt Quarterly traduit par Guillaume Belz 0
  3. Pourquoi les programmeurs sont-ils moins payés que les gestionnaires de programmes ? Manquent-ils de pouvoir de négociation ? 50
  4. Les développeurs détestent-ils les antivirus ? Un programmeur manifeste sa haine envers ces solutions de sécurité 23
  5. «Le projet de loi des droits du développeur» : quelles conditions doivent remplir les entreprises pour que le développeur puisse réussir ? 46
  6. Quelles nouveautés de C++11 Visual C++ doit-il rapidement intégrer ? Donnez-nous votre avis 10
  7. Qt Commercial : Digia organise un webinar gratuit le 27 mars sur la conception d'interfaces utilisateur et d'applications avec le framework 0
Page suivante

Le Qt Developer Network au hasard


Installation de PySide : binaires et compilation

Le Qt Developer Network est un réseau de développeurs Qt anglophone, où ils peuvent partager leur expérience sur le framework. Lire l'article.



Liens utiles


  • Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).

Qt dans le magazine

Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia. Qt 4.7
Copyright © 2012 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon, vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter ou par MP !

Hébergement Web