Back to Qt.io
Contact Us Blog Download Qt
이 페이지에서

이미지 합성 예시

QPainter 에서 합성 모드가 어떻게 작동하는지 보여줍니다.

합성 모드를 사용하여 두 이미지를 합치는 애플리케이션

리소스 파일 설정

‘이미지 합성’ 예제에는 imagecomposition.qrc 파일에 포함된 두 개의 소스 이미지( butterfly.png 및 checker.png )가 필요합니다. 이 파일에는 다음 코드가 포함되어 있습니다:

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

리소스 파일에 대한 자세한 내용은 Qt 리소스 시스템을 참조하십시오.

ImageComposer 클래스 정의

ImageComposer 클래스는 QWidget 의 하위 클래스로, chooseSource(), chooseDestination(), recalculateResult() 라는 세 개의 비공개 슬롯을 구현합니다.

class ImageComposer : public QWidget
{
    Q_OBJECT

public:
    ImageComposer();

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

또한, ImageComposer 는 addOp(), chooseImage(), loadImage(), currentMode(), imagePos() 등 5개의 비공개 함수와 QToolButton, QComboBox, QLabel, 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;
};

ImageComposer 클래스 구현

QSize 객체인 resultSize 를 너비와 높이가 200인 정적 상수로 선언합니다.

static const QSize resultSize(200, 200);

생성자 내에서 QToolButton 객체인 sourceButton 를 인스턴스화하고, 그 iconSize 속성을 resultSize 로 설정합니다. operatorComboBox 를 인스턴스화한 다음, addOp() 함수를 사용하여 데이터를 채웁니다. 이 함수는 QPainter::CompositionMode, mode, 그리고 QString, name 를 인수로 받으며, 이는 합성 모드의 이름을 나타냅니다.

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

destinationButton 가 인스턴스화되며, 그 iconSize 속성도 resultSize 로 설정됩니다. QLabel인 equalLabel 와 resultLabel 가 생성되고, resultLabel 의 minimumWidth 가 설정됩니다.

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

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

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

다음 신호들을 해당 슬롯에 연결합니다:

  • sourceButton'의 clicked() 신호는 chooseSource() 에 연결되고,
  • operatorComboBox의 activated() 신호는 recalculateResult() 에 연결되고,
  • destinationButton의 clicked() 신호는 chooseDestination() 에 연결됩니다.
    connect(sourceButton, &QAbstractButton::clicked,
            this, &ImageComposer::chooseSource);
    connect(operatorComboBox, &QComboBox::activated,
            this, &ImageComposer::recalculateResult);
    connect(destinationButton, &QAbstractButton::clicked,
            this, &ImageComposer::chooseDestination);

QGridLayout 인 mainLayout 는 모든 위젯을 배치하는 데 사용됩니다. mainLayout 의 sizeConstraint 속성이 QLayout::SetFixedSize 로 설정되어 있다는 점에 유의하십시오. 이는 ImageComposer 의 크기를 전혀 조정할 수 없음을 의미합니다.

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

QImage 와 resultImage 를 생성하고, loadImage() 를 두 번 호출하여 imagecomposition.qrc 파일에 있는 두 이미지 파일을 모두 불러옵니다. 그런 다음 windowTitle 속성을 "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"));
}

chooseSource() 및 chooseDestination() 함수는 특정 매개변수를 사용하여 chooseImage() 를 호출하는 편의 함수입니다.

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

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

chooseImage() 함수는 title, image 및 button 에 따라 사용자가 선택한 이미지를 불러옵니다.

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

recalculateResult() 함수는 사용자가 선택한 합성 모드를 사용하여 두 이미지를 합친 결과를 계산하고 표시하는 데 사용됩니다.

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 resultLabel 및 destinationImage 

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

loadImage() 함수는 fillRect()을 사용하여 투명한 배경을 채우고, drawImage()을 사용하여 image 를 중앙에 배치하여 그립니다. 그런 다음 이 image 를 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();
}

currentMode() 함수는 operatorComboBox 에서 현재 선택된 합성 모드를 반환합니다.

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

imagePos() 함수를 사용하여 QToolButton 객체, 즉 sourceButton 및 destinationButton 에 로드된 이미지가 중앙에 정렬되도록 합니다.

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

main() 함수

main() 함수는 QApplication 및 ImageComposer 객체를 인스턴스화하고, 해당 객체의 show() 함수를 호출합니다.

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

예제 프로젝트 @ 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.