0
Help us understand the problem. What are the problem?

posted at

updated at

Qt Creator C++ イメージクロッピング

自分で作成した.qt creatorのプロジェクトに

以下のイメージクロップウィジェットクラスを取り込んでみます.

クラス取り込み

1.まずqtcreatorでビルドシステムcmake,基底クラスQMainWindowの新規プロジェクトを作成します.

ディレクトリ構成
$ tree
.
├── CMakeLists.txtlayout->addWidget(button1);
├── CMakeLists.txt.user
├── main.cpp
├── mainwindow.cpp
├── mainwindow.h
└── mainwindow.ui

2.プロジェクト内にimagecropperディレクトリを作成します.次にその中に,上で紹介しているGithubリポジトリのsrc内のファイルをコピーします.

ディレクトリ構成
$ tree
├── CMakeLists.txt
├── CMakeLists.txt.user
├── imagecropper
│   ├── imagecropper.cpp
│   ├── imagecropper.h
│   ├── imagecropper_e.h
│   └── imagecropper_p.h
├── main.cpp
├── mainwindow.cpp
├── mainwindow.h
└── mainwindow.ui

3.CMakeLists.txtに以下のように追加

CMakeLists.txt
else()
  add_executable(bbb
    main.cpp
    mainwindow.cpp
    mainwindow.h
    mainwindow.ui

    imagecropper/imagecropper.h # add
    imagecropper/imagecropper.cpp # add
    imagecropper/imagecropper_e.h # add
    imagecropper/imagecropper_p.h # add
  )
endif()

mainwindow.cppを以下のように変更

mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include "./imagecropper/imagecropper.h"
#include <QVBoxLayout>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    ImageCropper *w = new ImageCropper;
    layout->addWidget(w);
    ui->centralwidget->setLayout(layout);
}

MainWindow::~MainWindow()
{
    delete ui;
}

qtcreatorを実行すると以下のようにImageCropperクラスが取り込めているような感じになります.

Screenshot from 2022-01-12 16-42-00.png

画像ダウンロード

wget https://github.com/hoshianaaa/TestFiles/raw/master/image.jpg

setImageをしても写真がでない...
背景グレーはできた!!!

mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include "./imagecropper/imagecropper.h"
#include <QVBoxLayout>

#include <QPixmap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    ImageCropper *w = new ImageCropper;
    w->setProportion(QSize(4,3));
    w->setProportionFixed(true);
    w->setImage(QPixmap("./image.jpg"));
    w->setBackgroundColor(Qt::lightGray);

    layout->addWidget(w);
    ui->centralwidget->setLayout(layout);

}

MainWindow::~MainWindow()
{
    delete ui;
}

相対パスではだめで,絶対パスにしたらできた.

mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include "./imagecropper/imagecropper.h"
#include <QVBoxLayout>

#include <QPixmap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    ImageCropper *w = new ImageCropper;
    w->setProportion(QSize(4,3));
    w->setProportionFixed(true);
    w->setImage(QPixmap("/home/hoshina/bbb/img.jpg"));
    w->setBackgroundColor(Qt::lightGray);

    layout->addWidget(w);
    ui->centralwidget->setLayout(layout);

}

MainWindow::~MainWindow()
{
    delete ui;
}

Screenshot from 2022-01-12 17-12-19.png

切り取り枠のアスペクト比固定なし.

#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include "./imagecropper/imagecropper.h"
#include <QVBoxLayout>

#include <QPixmap>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    ImageCropper *w = new ImageCropper;
    w->setImage(QPixmap("/home/hoshina/bbb/img.jpg"));
    w->setBackgroundColor(Qt::lightGray);

    layout->addWidget(w);
    ui->centralwidget->setLayout(layout);

}

MainWindow::~MainWindow()
{
    delete ui;
}

imagecropping2.gif

いい感じにできました!

クロップ

クロップ用のボタンを設置

1.ui上にボタンを配置

Screenshot from 2022-01-12 17-31-15.png

2.次のプログラムを追加して,uiに配置したボタンをlayout内に入れるlayout->addWidget(ui->pushButton);

3.結果

Screenshot from 2022-01-12 17-30-53.png

ボタン内でクロップ画像取得

1.uiに配置したpushButtonのsignalを生成
2.プログラムを以下のように変更

mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#include "./imagecropper/imagecropper.h"

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow *ui;
    ImageCropper *w;
};
#endif // MAINWINDOW_H
mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include "./imagecropper/imagecropper.h"
#include <QVBoxLayout>

#include <QPixmap>
#include <iostream>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    w = new ImageCropper;
    w->setImage(QPixmap("/home/hoshina/bbb/img.jpg"));
    w->setBackgroundColor(Qt::lightGray);

    layout->addWidget(w);
    layout->addWidget(ui->pushButton);
    ui->centralwidget->setLayout(layout);

}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{
    std::cout << "click!!!" << std::endl;
    QPixmap croppedImage = w->cropImage();
}

これでcallback内でクロップ画像を取得できました.

クロップ画像表示

1.ui上にQLabelを設置
2.mainwindow.cppを以下2点変更

  • 以下プログラムでQLabelを並べる
    layout->addWidget(ui->label);

  • buttonクリックシグナル関数以下追加でクロップ画像を表示ui->label->setPixmap(croppedImage);

mainwindow.cpp
#include "mainwindow.h"
#include "./ui_mainwindow.h"

#include "./imagecropper/imagecropper.h"
#include <QVBoxLayout>

#include <QPixmap>
#include <iostream>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QVBoxLayout *layout = new QVBoxLayout();

    w = new ImageCropper;
    w->setImage(QPixmap("/home/hoshina/bbb/img.jpg"));
    w->setBackgroundColor(Qt::lightGray);

    layout->addWidget(w);
    layout->addWidget(ui->pushButton);
    layout->addWidget(ui->label);
    ui->centralwidget->setLayout(layout);

}

MainWindow::~MainWindow()
{
    delete ui;
}


void MainWindow::on_pushButton_clicked()
{
    std::cout << "click!!!" << std::endl;
    QPixmap croppedImage = w->cropImage();
    ui->label->setPixmap(croppedImage);
}

3.実行しpushbuttonを押すと,クロップ画像が表示されました.

Screenshot from 2022-01-12 17-52-48.png

画像クロップができました!!!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
0
Help us understand the problem. What are the problem?