2011年12月24日土曜日

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


最近スマートフォンの広告がうざい。youtube見るたびにタンタン、タンタン、タッタッ、広告は0.5秒後に消せます!...もうやかましくてかなわん。ボイスパーカッションのスマートフォンでのコラボなんて誰がやるんだよ。ちっちゃらこい画面でワードもエクセルも使えるとかもう、ああすごいね。すごいよ。スゲェよ!だれが使うんだかしらねぇけどな!というか携帯のキーボード使ってるとほんとイライラしてくる。スペースないからしょうがないのはわかるが一つのキー何度も押さなきゃ目的の文字を入力できないのはどうにもイライラする。かといってキーボード携帯したら何のための携帯?みたくなるしさ。あぁもう違うんだよね。ホログラムのキーボードがフッとでてきて入力後キーボードを消せる。画面も空中に14インチぐらいのモニタの大きさのがフッとでてきて確認できるみたいな。そういうのがスマートだと思うんだよね。

どうでもいいがとにかくあの忌々しいタンタン、タンタン、タッタッ、を何とかしてくれ。


はい、それでは表題の件やっていきます。
QLinearGradientは線形グラデーションをかけるときに使います。
以下のような感じです。(C++ GUI Programming with Qt4 179ページの図です)



サンプルはC++ GUI Programming with Qt4の180ページのものを少し改変し使います。
そして、いつものように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, 8));//ペンをセット

    QLinearGradient gradient(50, 100, 300, 300);//線形グラデ
    gradient.setColorAt(0.0, Qt::white);
    gradient.setColorAt(0.2, Qt::green);
    gradient.setColorAt(1.0, Qt::black);

    painter.setBrush(gradient);//グラデーションをブラシにセット
    painter.drawEllipse(50, 100, 200, 200);
}  


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

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

※ちなみに線形グラデーションをブラシにセットした時点で、painterにセットしたコントロール(この場合MainWindow)の左上からの開始点 (50, 100)の位置になります。決してdrawEllipseの際の描画領域の開始点(50, 100)の位置ではありませんので注意してください。なお、ブラシの描画開始点を移動する時はsetBrushOriginを使えば移動できます。(リファレンス