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

Exemple de composition d'une image

Montre comment les modes de composition fonctionnent dans QPainter.

Application qui combine deux images à l'aide de modes de composition

Configuration du fichier de ressources

L'exemple de composition d'images nécessite deux images sources, butterfly.png et checker.png, qui sont 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, voir Le système de ressources de 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();

En outre, 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;
};

Mise en œuvre de la classe ImageComposer

Nous déclarons un objet QSize, resultSize, comme une constante statique avec une largeur et une hauteur égales à 200.

static const QSize resultSize(200, 200);

Dans le constructeur, nous instançons un objet QToolButton, sourceButton et définissons sa propriété iconSize à resultSize. L'objet operatorComboBox est instancié puis rempli à l'aide de la fonction addOp(). Cette fonction accepte un objet QPainter::CompositionMode, mode, et un objet 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"));

Le destinationButton est instancié et sa propriété iconSize est également définie sur resultSize. Les QLabel 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 emplacements correspondants :

  • sourceButtonLe signal 's clicked() est connecté à chooseSource(),
  • operatorComboBoxLe signal 's activated() est connecté à recalculateResult(), et
  • destinationButtonLe signal 's clicked() 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 placer 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 pas ê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, et nous invoquons loadImage() deux fois pour charger les deux fichiers d'images dans 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 de commodité qui invoquent 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 au choix de 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() est utilisée pour calculer et afficher le résultat de la combinaison des deux images avec 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));
}

La fonction addOp() ajoute un élément à la liste operatorComboBox en utilisant la fonction addItem de QComboBox. Cette fonction accepte un QPainter::CompositionMode, mode, et un QString, name. Le rectangle est rempli avec Qt::Transparent et les deux sourceImage et destinationImage sont peints, avant de l'afficher sur resultLabel.

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

La fonction loadImage() peint un arrière-plan transparent à l'aide de fillRect() et dessine image dans une position centralisée à l'aide de drawImage(). Ce image est ensuite défini comme l'icône du 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 sur les objets QToolButton, sourceButton et destinationButton, sont centralisé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 et invoque sa fonction show().

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

Exemple de projet @ 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.