Back to Qt.io
Contact Us Blog Download Qt
Sur cette page

Exemple de composition d'images

Illustre le fonctionnement des modes de composition dans QPainter.

Application permettant de combiner deux images à l'aide de modes de fusion

Configuration du fichier de ressources

L'exemple de composition d'images nécessite deux images sources, butterfly.png et checker.png, intégrées dans le fichier imagecomposition.qrc. Ce fichier contient le code suivant :

<!DOCTYPE RCC><RCC version="1.0">
<qresource>
    <file>images/butterfly.png</file>
    <file>images/checker.png</file>
</qresource>
</RCC>

Pour plus d’informations sur les fichiers de ressources, consultez la section « Le système de ressources Qt ».

Définition de la classe ImageComposer

La classe ` ImageComposer ` est une sous-classe de ` QWidget ` qui implémente trois slots privés : ` chooseSource()`, ` chooseDestination()` et ` recalculateResult()`.

class ImageComposer : public QWidget
{
    Q_OBJECT

public:
    ImageComposer();

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

De plus, ImageComposer comprend cinq fonctions privées : addOp(), chooseImage(), loadImage(), currentMode() et imagePos(), ainsi que des instances privées de QToolButton, QComboBox, QLabel et QImage.

private:
    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;
};

Implémentation de la classe ImageComposer

Nous déclarons un objet ` QSize `, ` resultSize`, en tant que constante statique dont la largeur et la hauteur sont égales à 200.

static const QSize resultSize(200, 200);

Dans le constructeur, nous instancions un objet ` QToolButton `, ` sourceButton `, et définissons sa propriété ` iconSize ` sur ` resultSize`. L’objet ` operatorComboBox ` est instancié, puis renseigné à l’aide de la fonction ` addOp() `. Cette fonction accepte un ` QPainter::CompositionMode`, ` mode`, ainsi qu’un ` QString`, ` name`, représentant le nom du mode de composition.

ImageComposer::ImageComposer()
{
    sourceButton = new QToolButton;
    sourceButton->setIconSize(resultSize);

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

L’ destinationButton est instancié et sa propriété iconSize est également définie sur resultSize. Les QLabels equalLabel et resultLabel sont créés et la propriété minimumWidth de resultLabel est définie.

    destinationButton = new QToolButton;
    destinationButton->setIconSize(resultSize);

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

    resultLabel = new QLabel;
    resultLabel->setMinimumWidth(resultSize.width());

Nous connectons les signaux suivants à leurs slots correspondants :

  • sourceButtonle signal clicked() de est connecté à chooseSource(),
  • operatorComboBoxle signal « activated() » de est connecté à recalculateResult(), et
  • destinationButtonle signal ` clicked()` de `` est connecté à ` chooseDestination()`.
    connect(sourceButton, &QAbstractButton::clicked,
            this, &ImageComposer::chooseSource);
    connect(operatorComboBox, &QComboBox::activated,
            this, &ImageComposer::recalculateResult);
    connect(destinationButton, &QAbstractButton::clicked,
            this, &ImageComposer::chooseDestination);

Un QGridLayout, mainLayout, est utilisé pour positionner tous les widgets. Notez que la propriété sizeConstraint de mainLayout est définie sur QLayout::SetFixedSize, ce qui signifie que la taille de ImageComposer ne peut en aucun cas être redimensionnée.

    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);
    mainLayout->setSizeConstraint(QLayout::SetFixedSize);
    setLayout(mainLayout);

Nous créons un ` QImage`, ` resultImage`, puis nous appelons deux fois ` loadImage() ` pour charger les deux fichiers image de notre fichier ` imagecomposition.qrc `. Ensuite, nous définissons la propriété ` windowTitle ` sur « 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"));
}

Les fonctions ` chooseSource() ` et ` chooseDestination() ` sont des fonctions pratiques qui appellent ` chooseImage() ` avec des paramètres spécifiques.

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

void ImageComposer::chooseDestination()
{
    chooseImage(tr("Choose Destination Image"), &destinationImage, destinationButton);
}

La fonction chooseImage() charge une image choisie par l’utilisateur, en fonction des paramètres title, image et button.

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

La fonction recalculateResult() permet de calculer et d’afficher le résultat de la combinaison des deux images selon le mode de composition choisi par l’utilisateur.

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

    QPainter painter(&resultImage);
    painter.setCompositionMode(QPainter::CompositionMode_Source);
    painter.fillRect(resultImage.rect(), Qt::transparent);
    painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
    painter.drawImage(0, 0, destinationImage);
    painter.setCompositionMode(mode);
    painter.drawImage(0, 0, sourceImage);
    painter.setCompositionMode(QPainter::CompositionMode_DestinationOver);
    painter.fillRect(resultImage.rect(), Qt::white);
    painter.end();

    resultLabel->setPixmap(QPixmap::fromImage(resultImage));
}

addOp() operatorComboBox QComboBox addItem QPainter::CompositionMode mode QString name sourceImage destinationImage resultLabel

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

La fonction loadImage() dessine un arrière-plan transparent à l'aide de fillRect() et dessine image en position centrée à l'aide de drawImage(). Ce image est ensuite défini comme icône de button.

void ImageComposer::loadImage(const QString &fileName, QImage *image,
                              QToolButton *button)
{
    image->load(fileName);

    // Scale the image to given size
    *image = image->scaled(resultSize, Qt::KeepAspectRatio);

    QImage fixedImage(resultSize, QImage::Format_ARGB32_Premultiplied);
    QPainter painter(&fixedImage);
    painter.setCompositionMode(QPainter::CompositionMode_Source);
    painter.fillRect(fixedImage.rect(), Qt::transparent);
    painter.setCompositionMode(QPainter::CompositionMode_SourceOver);
    painter.drawImage(imagePos(*image), *image);
    painter.end();
    button->setIcon(QPixmap::fromImage(fixedImage));

    *image = fixedImage;

    recalculateResult();
}

La fonction currentMode() renvoie le mode de composition actuellement sélectionné dans operatorComboBox.

QPainter::CompositionMode ImageComposer::currentMode() const
{
    return (QPainter::CompositionMode)
           operatorComboBox->itemData(operatorComboBox->currentIndex()).toInt();
}

Nous utilisons la fonction imagePos() pour nous assurer que les images chargées dans les objets QToolButton, sourceButton et destinationButton, sont centrées.

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

La fonction main()

La fonction ` main() ` instancie ` QApplication ` et ` ImageComposer `, puis appelle leur fonction ` show()`.

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    ImageComposer composer;
    composer.show();
    return app.exec();
}

Exemple de projet sur code.qt.io

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.