asaのブログ

プログラミングの勉強まとめ

Qtチュートリアル3(PaintEvent)

 QtのPaintEventを学習するために次のようなアナログ時計をQtで作ってみます。

f:id:asa_r:20170627134531p:plain

 Analog Clock Example | Qt Widgets 5.9

 時計は時間の経過とともに針が動きます。時間の経過に従って画面を描画し直す必要があります。こうした画面描画を行う際に使われるのがPaintEventです。

 

 Clock.h

 今回はWidgetの派生クラスClockに時計を描画することにします。

 QTimerクラスを使ってtimeoutとupdateをシグナルとスロットとして使います。timerオブジェクトを1000ミリ秒走らせ、時間がたつとtimeoutがシグナルを送信します。スロットはそれを受けてupdateによって画面を再描画します。

gist76124adb544a4eb64bcba6b294ee0b98

 

 Clock.cpp

 再描画のメソッドには、まず短針と長針を描画するためのポイントと色を設定します。描画はQPainterクラスの役割です。QPainterクラスのコンストラクタには描画のためのクラスを渡すのですが、Qwidgetにも描画可能なのでこれを渡しています。

 

 ペンは今回線を描画するわけではないのでNoPenで、ブラシは塗りつぶしのため使用します。drawConvexPolygonで先ほどのポイントを渡して短針を描画します。描画はpainterの描画領域を転置させて角度を計算して描画します。そのあとrestoreでもとの角度に戻してあげます。長針の描画は短針と同じです。

gistef3c00f20974f621ac4ec146ee7a222b

 

 main.cpp

 デフォルトのままです。

gist0193f59f8e3ec66528bbd3424f50fa50

 

 ほんとにわずかですが針が移動しているのが分かります。動いたって分かりやすく見たいときはtimerの設定を変えてみるのが良いと思います。