Visual C++のレシピ：図形描画。Ellipse、Rectangle、MoveTo、LineTo

Home>>Visual C++>>図形描画　LastUpdate:2009-01-21

図形描画

図形はデバイスコンテキストにAPIを通じて書き込みます。

代表的なAPIは3つなので憶えてしまいましょう。
円は「Ellipse」、四角は「Rectangle」、線は「MoveToとLineTo」です。

具体的には下のサンプルアプリを使って解説します。
Button1を押すと円、
Button2を押すと四角、
Button3を押すと線、を描くように作っています。
なおPictureControlには「CStatic」型の「m_pict」という変数を設定しています。
（ソースファイルはサンプルコードのDraw1.zipにまとめています。）

各Buttonに対するイベントハンドラを下に示します。

Button1のイベントハンドラ関数
void CDraw1Dlg::OnBnClickedButton1() { // TODO: ここにコントロール通知ハンドラコードを追加します。 //①デバイスコンテキスト取得 CDC* pDC=m_pict.GetDC(); //デバイスコンテキストの大きさ取得 CRect rect; m_pict.GetClientRect(&rect); //②背景白(初期ペン・初期ブラシ) pDC->Rectangle(&rect); //③ペン・ブラシ作成 CPen pen_red(PS_SOLID,1,RGB(255,0,0)); CBrush br_yellow(RGB(255,255,0)); //③ペン・ブラシ変更 CPen* oldpen=pDC->SelectObject(&pen_red); CBrush* oldbr=pDC->SelectObject(&br_yellow); //④円描画 pDC->Ellipse(10,10,100,100); //再描画 UpdateWindow(); //初期化 pDC->SelectObject(oldpen); pDC->SelectObject(oldbr); }

最初にm_pictのデバイスコンテキストを取得し（①）、背景を白で塗りつぶしています（②）。
そのあとペンを赤、ブラシを黄色に変え（③）、「Ellipse」を使って円を描いています（④）。
Ellipseの引数の数字を変えると円の大きさが変わります。
ちょっとわかりにく説明ですが、この引数は円に外接する四角形の頂点座標を表します。
初めの2つの引数が左上頂点のx,y座標、次の2つの引数が右下頂点のx,y座標です。

なおCPenやCBrushはこれからよく使うので使い方を憶えてください。
CPenは線の色やスタイルで、CBrushは塗りつぶしの色を表します。
CPenやCBrushはSelectObjectというAPIを使って切り替えます。

CPenのコンストラクタはpen(style,width,color)という形になり、
styleは実線（PS_SOLID）や点線（PS_DOT）、widthは線の太さ、colorは色になります。
（詳細はMSDNのCPenへ）
CBrushのコンストラクタは引数がclolor（色）だけです。
※RGB（r,g,b）は色の指定。rが赤（Red）、gが緑（Green）、bが青（Blue）の強さで、0～255の数字が入る。

Button2のイベントハンドラ関数
void CDraw1Dlg::OnBnClickedButton2() { // TODO: ここにコントロール通知ハンドラコードを追加します。 //デバイスコンテキスト取得 CDC* pDC=m_pict.GetDC(); //デバイスコンテキストの大きさ取得 CRect rect; m_pict.GetClientRect(&rect); //背景白(初期ペン・初期ブラシ) pDC->Rectangle(&rect); //①ペン・ブラシ作成 CPen pen_blue(PS_DOT,1,RGB(0,0,255)); CBrush br_gray(RGB(128,128,128)); //①ペン・ブラシ変更 CPen* oldpen=pDC->SelectObject(&pen_blue); CBrush* oldbr=pDC->SelectObject(&br_gray); //②四角形描画 pDC->Rectangle(10,10,100,100); //再描画 UpdateWindow(); //初期化 pDC->SelectObject(oldpen); pDC->SelectObject(oldbr); }

Button2のイベントハンドラはButton1とほとんど一緒です。
違いはペンを青い点線にして、ブラシをグレイにしているところと（①）、
Rectangleを使って四角を描画しているところです（②）。
Rectangleの初めの2つの引数が左上頂点のx,y座標、次の2つの引数が右下頂点のx,y座標になります。

Button3のイベントハンドラ関数
void CDraw1Dlg::OnBnClickedButton3() { // TODO: ここにコントロール通知ハンドラコードを追加します。 //デバイスコンテキスト取得 CDC* pDC=m_pict.GetDC(); //デバイスコンテキストの大きさ取得 CRect rect; m_pict.GetClientRect(&rect); //背景白(初期ペン・初期ブラシ) pDC->Rectangle(&rect); //①ペン作成 CPen pen_green(PS_SOLID,2,RGB(0,255,0)); CPen pen_purple(PS_DOT,1,RGB(255,0,255)); //②ペン・ブラシ変更 CPen* oldpen=pDC->SelectObject(&pen_green); //線描画（縦線） pDC->MoveTo(0,rect.Height()/2); pDC->LineTo(rect.Width(),rect.Height()/2); //②ペン切り替え pDC->SelectObject(&pen_purple); //③線描画（横線） pDC->MoveTo(rect.Width()/2,0); pDC->LineTo(rect.Width()/2,rect.Height()); //再描画 UpdateWindow(); //初期化 pDC->SelectObject(oldpen); }

Button3もButton1、Button2に似ています。
ここでは緑の太い線と紫の点線というペンを2つ用意し（①）、
SelectObjectで切り替えています（②）。
線はMoveTo、LineToを組み合わせて引いています（③）。
MoveToの引数は線の始点、LineToの引数は線の終点の座標になります。

それぞれButton1、Button2、Button3を押すと以下のような表示になります。

計算処理：前項<<　ページの先頭に戻る　 >>次項：画像表示

テクニカルレシピ（Visual C++のレシピ）

Home>>Visual C++>>図形描画 LastUpdate:2009-01-21

図形描画

Home>>Visual C++>>図形描画　LastUpdate:2009-01-21