Qt GUI の QGradient::QGradient() 関数について

Qt GUI の QGradient::QGradient() 関数について

QGradient::QGradient() は、Qt GUI でグラデーションを表現するために使用する QGradient クラスのコンストラクタです。このコンストラクタは、デフォルトのグラデーションを作成します。

デフォルトのグラデーションは、以下の特性を持つ線形グラデーションです。

• 開始点: (0, 0)
• 終点: (100, 100)
• 色:
  • 開始点: 黒
  • 終点: 白

コード例

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QWidget>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QGraphicsView>
#include <QtWidgets/QGraphicsScene>
#include <QtWidgets/QGraphicsRectItem>
#include <QtGradient>

class MainWindow : public QMainWindow {
  Q_OBJECT
public:
  MainWindow() {
    QWidget *widget = new QWidget;
    setCentralWidget(widget);

    QVBoxLayout *layout = new QVBoxLayout;
    widget->setLayout(layout);

    QGraphicsView *view = new QGraphicsView;
    layout->addWidget(view);

    QGraphicsScene *scene = new QGraphicsScene;
    view->setScene(scene);

    // デフォルトのグラデーションを作成
    QGradient gradient;

    // グラデーションを矩形アイテムに適用
    QGraphicsRectItem *item = new QGraphicsRectItem(0, 0, 100, 100);
    item->setBrush(gradient);
    scene->addItem(item);
  }
};

int main(int argc, char *argv[]) {
  QApplication app(argc, argv);

  MainWindow mainWindow;
  mainWindow.show();

  return app.exec();
}

実行結果

デフォルトのグラデーション: [無効な URL を削除しました]

詳細

QGradient::QGradient() 以外にも、QGradient クラスには様々なコンストラクタや関数があります。詳細は Qt ドキュメントの QGradient クラス: https://doc.qt.io/qt-5/qgradient.html を参照してください。

補足

• Qt GUI でグラデーションを使用するには、QGradient クラスと QBrush クラスを組み合わせて使用します。
• QGradient クラスはグラデーションの種類や色などを定義するために使用します。
• QBrush クラスはグラデーションを含むブラシを定義するために使用します。

用語集

• グラデーション: 色が徐々に変化していく塗り
• 線形グラデーション: 2 つの点の間で色が直線的に変化するグラデーション
• 開始点: グラデーションの開始位置
• 終点: グラデーションの終了位置
• 色: グラデーションで使用される色

Qt GUI の QGradient クラスを使用したサンプルコード

線形グラデーション

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QWidget>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QGraphicsView>
#include <QtWidgets/QGraphicsScene>
#include <QtWidgets/QGraphicsRectItem>
#include <QtGradient>

class MainWindow : public QMainWindow {
  Q_OBJECT
public:
  MainWindow() {
    QWidget *widget = new QWidget;
    setCentralWidget(widget);

    QVBoxLayout *layout = new QVBoxLayout;
    widget->setLayout(layout);

    QGraphicsView *view = new QGraphicsView;
    layout->addWidget(view);

    QGraphicsScene *scene = new QGraphicsScene;
    view->setScene(scene);

    // 線形グラデーションを作成
    QGradient gradient(0, 0, 100, 100);
    gradient.setColorAt(0.0, Qt::black);
    gradient.setColorAt(1.0, Qt::white);

    // グラデーションを矩形アイテムに適用
    QGraphicsRectItem *item = new QGraphicsRectItem(0, 0, 100, 100);
    item->setBrush(gradient);
    scene->addItem(item);
  }
};

int main(int argc, char *argv[]) {
  QApplication app(argc, argv);

  MainWindow mainWindow;
  mainWindow.show();

  return app.exec();
}

画像: 線形グラデーション: [無効な URL を削除しました]

放射グラデーション

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QWidget>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QGraphicsView>
#include <QtWidgets/QGraphicsScene>
#include <QtWidgets/QGraphicsRectItem>
#include <QtGradient>

class MainWindow : public QMainWindow {
  Q_OBJECT
public:
  MainWindow() {
    QWidget *widget = new QWidget;
    setCentralWidget(widget);

    QVBoxLayout *layout = new QVBoxLayout;
    widget->setLayout(layout);

    QGraphicsView *view = new QGraphicsView;
    layout->addWidget(view);

    QGraphicsScene *scene = new QGraphicsScene;
    view->setScene(scene);

    // 放射グラデーションを作成
    QGradient gradient(QPointF(50, 50), 50);
    gradient.setColorAt(0.0, Qt::black);
    gradient.setColorAt(1.0, Qt::white);

    // グラデーションを矩形アイテムに適用
    QGraphicsRectItem *item = new QGraphicsRectItem(0, 0, 100, 100);
    item->setBrush(gradient);
    scene->addItem(item);
  }
};

int main(int argc, char *argv[]) {
  QApplication app(argc, argv);

  MainWindow mainWindow;
  mainWindow.show();

  return app.exec();
}

実行結果

画像: 放射グラデーション: [無効な URL を削除しました]

円形グラデーション

#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QWidget>
#include <QtWidgets/QVBoxLayout>
#include <QtWidgets/QGraphicsView>
#include <QtWidgets/QGraphicsScene>
#include <QtWidgets/QGraphicsRectItem>
#include <QtGradient>

class MainWindow : public QMainWindow {
  Q_OBJECT
public:
  MainWindow() {
    QWidget *widget = new QWidget;
    setCentralWidget(widget);

    QVBoxLayout *layout = new QVBoxLayout;
    widget->setLayout(layout);

    QGraphicsView *view = new QGraphicsView;
    layout->addWidget(view);

    QGraphicsScene *scene = new QGraphicsScene;
    view->setScene(scene);

    // 円形グラデーションを作成
    QGradient gradient(QPointF(50, 50), 50);
    gradient.setRadialGradient(true);
    gradient.setColorAt(0.0, Qt::black);
    gradient.setColorAt(1.0, Qt::white);

Qt GUI でグラデーションを表現するその他の方法

QBrush クラスの setGradient() メソッド

QBrush brush;
brush.setGradient(gradient);

QPainter クラスの drawGradient() メソッドを使用して、グラデーションを直接描画することができます。

QPainter painter(widget);
painter.drawGradient(gradient, rect);

Qt Quick では、Gradient アイテムを使用してグラデーションを表現することができます。

Gradient {
  id: gradient
  type: LinearGradient
  startPoint: Qt.point(0, 0)
  endPoint: Qt.point(100, 100)
  stops: [
    { position: 0.0, color: Qt.black },
    { position: 1.0, color: Qt.white }
  ]
}

Rectangle {
  width: 100
  height: 100
  brush: gradient
}

その他のライブラリ

Qt 以外にも、Krita や GIMP などの画像編集ソフトを使用してグラデーションを作成し、Qt で使用する PNG などの画像形式で保存することができます。

Qt GUI でグラデーションを表現するには、様々な方法があります。それぞれの方法にはメリットとデメリットがあるので、状況に合わせて適切な方法を選択する必要があります。

メリットとデメリット