2011年12月25日日曜日

( Qt C++ )QPainterを用いたQRadialGradientによるブラシ描画


今日は2度投稿します。
まず一回目はQPainterを用いたQRadialGradientによるブラシ描画です。
QRadialGradientは放射グラデーションをかけるときに使います。
下のような感じです。(C++ GUI Programming with Qt4の179ページの図)

ややこしいのですが中心点(Xc, Yc), 円の半径r, 焦点(Xf, Yf)の順に定義します。色は焦点から周りに拡散するように描画されます。
サンプルはC++ GUI Programming with Qt4の179ページのものを少し変更して使います。
そして、いつものようにQtCreaterなどでMainWindowなどのGUI部品を定義済みであるとします。(QtCreaterなどの使い方は ”Qtをはじめよう" を見てください。)

ではコードを



(mainwindow.h)
namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT//マクロ
   
public:
    explicit MainWindow(QWidget *parent = 0);//コンストラクタ
    ~MainWindow();//デストラクタ

protected:
    void paintEvent(QPaintEvent *);//←ここ重要!ペイントイベント
  
private:
    Ui::MainWindow *ui;//uiにはGUI部品が記述
}; 

(mainwindow.cpp)
MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)//uiにはGUI部品に関する記述
{
    ui->setupUi(this);//uiのGUI部品の初期化
}

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

void MainWindow::paintEvent(QPaintEvent *)//←重要!ペイントイベント
{
     QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);//アンチエイリアスセット
    painter.setPen(QPen(Qt::black, 1));

    QRadialGradient gradient(150, 200, 100, 220, 220);
    
    gradient.setColorAt(0.0, Qt::white);//始まりの色
    gradient.setColorAt(0.8, Qt::green);
    gradient.setColorAt(1.0, Qt::cyan);//終わりの色

    painter.setBrush(gradient);
    painter.drawEllipse(50, 100, 200, 200);
}

はい簡単ですね。理解に重要なのはpaintEventだけですので他は無視してしまっても構いません。まずQPainterをthis(この場合MainWindow)で作成し、アンチエイリアスを設定します。その後輪郭描画のためのペンをセットします。
この後QRadialGradientを作成します。この場合、中心点(150, 200), 半径100,  焦点(220, 220)の放射グラデーションを作成しています。(リファレンス
その後setColorAtを3度呼びだしていますが、これは設定した2点間の異なる3位置で3色を指定しているという意味です。つまり3色のグラデーションになります。位置は0~1の間(float)で指定できます。
それから作成したグラデーションをpainterのブラシにセットし、円を描いています。

※ちなみに放射グラデーションをブラシにセットした時点で、painterにセットしたコントロール(この場合MainWindow)の左上からの中心点(150, 200)の位置になります。決してdrawEllipseの際の描画領域の中心点(150, 200)の位置ではありませんので注意してください。

実行すると以下のようになります。

以上です。