情報処理演習資料

今日の内容
グラフィックプログラムのイメージ
2. ボタンの貼り付け
3. グラフィック画面の座標
4. 画面に図形を描く
5. グラフィック関係の手続きなど
6. 線分を描くプログラム
7. 三角形を描くプログラム
8. 直線を動かす
9. 今日の練習問題
1.

第11回
グラフィックのプログラム（テキスト第9章）

1. グラフィックプログラムのイメージ
 「スタート」ボタンを押すと、図形が現れ、「終2. ボタンの貼り付け
 コンポーネント・ツールボックスからボタンコンポーネントを選び、Formウィンドウの上に置く。

了」ボタンを押すと、プログラムの実行が終了する。

Click

終了

スタート

Drag

プログラムの終了。
ウィンドウが消える。

移動

Double Clickprocedure TForm1.Button1Click(Sender: TObject);begin
x := 100;y := 100;
moving_triangle(x, y)end;

図形が現れて、ウィンドウ内で移動する。

3. グラフィック画面の座標

Unitファイルの中身
unit Unit1;
interfaceuses
Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs,StdCtrls;
typeTForm1 = class(TForm)
Button1: TButton;
procedure Button1Click(Sender: TObject);private{ Private 宣言 }public{ Public 宣言 }ボタンを貼り付けたときにend;
自動的に追加されるコード
var
Form1: TForm1;
implementation{$R *.DFM}
procedure TForm1.Button1Click(Sender: TObject);
手を加えるのは、ほとんど
begin
この長方形の中
canvas.TextOut(100,100,'Hello.')
end;
end.

処理



フォームの上には座標があり、位置は座標で指定する。

左上隅が原点(0,0)で、x軸正方向は右向きで、y軸正方向は下向き。



座標の値は整数（integer型）で表す。

フォームのHeight、Widthプロパティを変えることでグラフィック画面の大きさを変えることができる。
原点(0,0)x軸(x,y)y軸1

情報処理演習資料

4. 画面に図形を描く

5. グラフィック関係の手続きなど



線を書くためのペンがあると考える。



今いる座標からある座標へペンを移動させる。

Canvas.TextOut
Canvas.LineTo
 Canvas.MoveTo
 Canvas.Pen.Color Canvas.Pen.Width Canvas.Rectangle
 Canvas.RoundRect Canvas.Ellipse
 Canvas.Brush.Color Canvas.FillRect Canvas.FloodFill– ペンをキャンバスにつけていると線が描ける。
– ペンをキャンバスにつけていないとなにも描けない。


ペンをキャンバスにつけて移動する手続き– Canvas.LineTo(x, y : integer)– 引数の x,y で移動先の座標を指定する。



ペンをキャンバスにつけないで移動する手続き– Canvas.MoveTo(x, y : integer)– 引数の x,y で移動先の座標を指定する。



ペンの色も変えられる（colorプロパティを変更する）。
– 色を決めてから線を描く。
– Canvas.pen.Color := 色の名前

テキストを出力する
ペンを動かして線を描く
ペンを動かすペンの色を指定する変数
ペンの太さを指定する変数
長方形を描く角の丸い長方形を描く
長方形領域に外接する楕円を描く
ブラシの色を指定する変数
長方形領域に色を塗る
領域を指定して色を塗る

詳しくは、[ヘルプ]→[Delphiヘルプ]を参照

6. 線分を描くプログラム

7. 三角形を描くプログラム

1. 座標(10,100)の位置に文字列を表示する。

 青い三角形を描く。

2. ペンの色を青にする。

 (x1, y1)、(x2, y2) を結ぶ線分を描く手続き line を定義してそれを使用する。

3. ペンを座標(100,50)の位置に持っていく。
4. ペンをキャンバスにつけて、座標(300,150)まで移動させる。
procedure TForm1.Button1Click(Sender: TObject);begin
canvas.TextOut(10, 100, '線分を描く');canvas.Pen.Color := clBlue;
canvas.MoveTo(100, 50);
canvas.LineTo(300, 150)
end;

大、中、小の3つの三角形を描く
0100

150

200250300

3つの三角形を描くプログラム

400
x87

173

346
y

procedure TForm1.Button1Click(Sender: TObject);
procedure line(x1, y1, x2, y2 : integer);
begin
canvas.MoveTo(x1, y1);
手続きの中に手続きを書くこともできる
canvas.LineTo(x2, y2)
end;
begin
この方がcanvas.TextOut(10, 100, '三角形を描く');
わかり易い
canvas.Pen.Color := clBlue;line(0,0,500,100);line(500, 100, 500, 300);
3つの線分を描く
三角形
line(500, 300, 0, 0)
end;

procedure TForm1.Button1Click(Sender: TObject);
procedure line(x1, y1, x2, y2 : integer);
線分を描く手続き
begin
canvas.MoveTo(x1, y1);canvas.LineTo(x2, y2)
end;procedure triangle(x1, y1, x2, y2, x3, y3:integer; c:Tcolor);
begin
canvas.Pen.Color := c;三角形を描く手続きline(x1, y1, x2, y2);
3つの点の座標(x1,y1)、(x2,y2)line(x2, y2, x3, y3);、(x3,y3)を与えると、それらを頂line(x3, y3, x1, y1)点とする三角形を描く。
end;
begin
triangle(0, 0, 400, 0, 200, 346, clGreen);
triangle(200, 0, 300, 173, 100, 173, clBlue);
3つの三角形
triangle(150, 87, 250, 87, 200, 173, clRed)
end;

2情報処理演習資料

8. 直線を動かす


動きのあるプログラムは、次のようにして作成する。
1. 図形を特定の色で描く（少しずらした位置に図形を描く）。
2. 一定時間そのままにしておく。
3. 描いた図形を背景の色で描きなおして、消去する。
4. 上の作業を繰り返すと、図形が動いているように見える。



背景の色は変数「Form1.Color」で知ることができる。

「一定時間そのままにしておく」は、手続き「sleep」を使用する。
– 実引数として実行を遅らせる時間をミリ秒単位で与える。
– 実引数の型は整数である。
– プログラムがなかなか終了しない場合は、まずタスクバーにある[Delphi 6]のボタンをクリックして、Delphiに制御を移す。次に、Delphiのメニューバーの[実行]→[プログラムの終了]をクリックして、実行中のプログラムを強制終了する。

線分を動かすプログラム
procedure TForm1.Button1Click(Sender: TObject);
procedure line(x1, y1, x2, y2 : integer);
begin
canvas.MoveTo(x1, y1); canvas.LineTo(x2, y2)
end;var i:integer;
begin
for i := 0 to 100 do begin
canvas.pen.color:=clRed;line(5*i, 4*i, 5*i, 350-4*i);
50ミリ秒だけ何もしないsleep(50);
canvas.pen.color:= Form1.Color;
同じ位置に、背景line(5*i, 4*i, 5*i, 350-4*i)
色で線分を描いてend
線分を消去する。
end;

9. 今日の練習問題

テキストの正誤表
テキスト「12回で学ぶ情報処理」に誤りがありますので，下のように訂正してください．
 100ページ, 下から8行目（例9.6.1のプログラム中）– 誤 canvas.pentagon(x+i,y,r);– 正 pentagon(x+i,y,r);

Level

問題

C

三角形を描くプログラムを変更して、緑色で辺が太い三角形を描くようにせよ。

C+BAA

例にあげた直線を動かすプログラムは、動きが終了したときに直線が消えてしまう。これを消えないようにせよ。
正三角形を描くプログラムを作成せよ。
正n角形（n = 3 ～ 6）を描くプログラムを作成せよ。ボタンを4つ用意し（正三角形のボタン、正方形のボタン等）、ボタンによって描く図形を変えよ。また、図形を消去するボタンも用意せよ。
直線を動かすプログラムを変更して、三角形がウィン
ドウ中の左から右に移動するプログラムを作成せよ。

3