7-1 CanvasプロパティとPixelsプロパティ

Delphi でコンピュータグラフィックス (CG) を描くにはどのようにしたらよいのでしょうか? それをこれから学習するのですが、実は皆は CG そのものにはすでに1年次の情報処理でふれています。「ペイント」による描画がそれです。プログラミングによるものではありませんが、このような描画ツールによって作成された画像も CG の一つです。それでは、「ペイント」を使って何か描いてみましょう。

ペイント

拡大してみると、(小さいときには) 滑らかに見えた線が"ギザギザ"していることが分かりますね。このことから推測されるように、描画領域は小さな升目 (正方形) から構成されているのです (ここの"拡大"はその升目の大きさを拡大するという処理を行っています。だから"ギザギザ"が現れた訳です。一方、升目の大きさは変えずに、どんなに拡大しても滑らかな線となるような処理手法もあります)。

この小さな升目 (正方形) のことを、「画素」または「ピクセル (pixel)」と呼びます。つまり描画の単位という意味です。コンピュータはピクセル単位で画面表示を管理しています。容易に理解できるように、CG を描くとは、要するに画面上の各ピクセルを塗りつぶす事、つまり表示色を指定する事に他なりません。もし横一行のピクセルの表示色を黒、それ以外を白と指定するとそれは白地の背景に横方向に引かれた黒の直線となる訳です。各ピクセルの表示色のデータがあれば、原理的にどの様な画像でも描くことができます。パソコンの性能は目まぐるしく進化して来ましたが、この原理は昔から変わっていません。余談ですが、社会情報学部の第一期生達は、ピクセルの表示色のデータを市販のテキストから入手し、パソコン画面上に様々な画像 (風景画等) を表示させて喜んでいたものです。

ピクセル単位で画像を描くのに最も適しているコンポーネントは、イメージと呼ばれるコンポーネントイメージコンポーネントです。これはコンポーネントパレットの Additional にあります。これを使って、右のように、ボタンを押すと (10, 20) の場所に点を描くプログラムを作りましょう。ボタンを押すと (10, 20) の場所に点を描くプログラム

座標の取り方が普通と違う?

上の図を見て、「あれ、数学で学んだ座標とちがうぞ?」と思った人はいませんか? 実はコンピュータの世界では、x 軸は普通どおりに右に伸びていきますが、y 軸は下に伸びていく (下に行くほど値が増える) のです。これはおそらく、「(英語の) 文章は紙の左上から書き始めるから、左上を原点 (0, 0) にすると便利だ」という考えに基づいていると思われます。
座標の取り方

【練習問題】

まずは、コンポーネントを配置してください。

コンポーネント Name プロパティ
「描画」ボタン ButtonDraw
イメージ ImageField

配置できたら、ImageFieldHeight プロパティと Width プロパティを 100 にしてください。


では、実際に点を描くためにはどうしたらいいのでしょうか。上で説明した事から、(10,20) という位置にある画素 (ピクセル) の表示色を背景色 (ここでは白色です) と異なる色に指定すれば良いことはすぐに分かると思います。

Image コンポーネントにはCanvas (キャンバス) というプロパティがあります。Canvasとは油絵を描く画布が本来の意味ですが、要するに CG を描く描画領域のことです。そして Canvas プロパティには Pixels プロパティが存在し、これがピクセルに対応します。下は、描画領域上の座標 (x,y) にあるピクセルが Canvas.Pixels[x, y] に対応していることを模式的に示したものです。

模式図

この Pixels プロパティに適当な色を指定してやれば、つまり代入してやればよいのです。今、表示するピクセル (点) の色を青色としましょう。すると描画ボタンクリックのイベントハンドラは次のようになります。

procedure TForm1.ButtonDrawClick(Sender: TObject);
begin
  ImageField.Canvas.Pixels[10, 20] := clBlue;
end;