# キャンバスに絵を書く

| いままでは、ひまわりの、文法部分をずっと見てきました。 今回は、絵や文字を好きなところに、描いてみましょう！

## 「表示」命令を極める。

> センタリングして表示
> 今まで、何気に、「表示」命令を使っていましたが、これは、ただ、左端から、一行ずつ文字列を表示するだけでした。

> `’だらだらと、文字を表示する``「あ」と、表示。 「い」と、表示。 「う」と、表示。 「え」と、表示。`

> ここで、「センタリング」命令を使うと、メッセージをセンタリング出来ます。
> また、「センタリング解除」命令で、センタリングを解除します。

> `’センタリング表示 センタリング。 「あ」と、表示。 「ムカデがいた！」と、表示。 「きゃー！」と、表示。 センタリング解除。 「うむ。センタリング解除したものね。」と、表示`

> サイズ・色・書体を変えて表示
> その他、文字の細かい属性をを変えるには・・・

> `’属性を変えて表示 センタリング 文字書体＝「ＭＳ 明朝」 文字サイズ＝７２ 文字色＝赤色 「愛￥ｎ自由￥ｎ正義」と、表示。`

> ・・・のようにします。
> また、６行目の文字列の中に､￥ｎという記号がありますが、これは、ここで、改行するという意味になります。
> （↑属性を変えて表示した例）
> 書体の後ろに、「太字（ボールド）、傾斜（イタリック）、下線（アンダーライン）」のオプションをつけて、字を太くしたり傾斜させたりすることも出来ます。

> `センタリング 文字書体＝「ＭＳ 明朝｜太字傾斜下線」 文字サイズ＝７２ 文字色＝赤色 「愛￥ｎ自由￥ｎ正義」と、表示。`

> 表示位置の変更をする

> また、文字を表示する座標を指定できます。座標の指定は、「（Ｘ，Ｙ）へ、移動」という命令を使います。

> `｛適当な場所へ文字を書くサンプル｝ （５０，５０）へ、移動。 「好きな所へ」と、表示。 （１０，８０）へ、移動。 「好きな文字が」と、表示。 （２００，１１０）へ、移動 「書けるんですよ〜」と、表示。`

> ＊センタリング機能を使っているときは、Ｘ軸が無視されてセンタリングされてしまうので、注意してください。

## 画像ファイルを読む

> 概要

> ひまわりでは、以下の形式の画像が読み書きできます。

> 1. Windwosの標準画像形式である、ＢＭＰ、ICO形式の画像。
> 2. 写真データの圧縮に向いている、ＪＰＥＧ形式の画像。
> 3. イラスト等の圧縮に向いている、ＰＮＧ形式の画像。
> 4. 256色、16色など色数の少ない画像の圧縮に向いている、ＭＡＧ形式の画像。
> ※もし、上記以外の画像を読みたい場合は、Susie-PlugIn を、ひまわりと同じフォルダに入れておけば、画像表示が出来ます。

> 画像の準備

> まず、画像を表示するためには、画像を準備しなければなりません。
> ソースファイル（プログラムを書いたファイルのこと）と、同じフォルダへ、表示したい画像をコピーしてください。

> 画像の表示

> 画像を表示するには、

> 「ファイル名」を、画像表示。

> のような書式で書きます。

> 画像表示のテスト

> もともと、ひまわりのフォルダには、"himawari.jpg"という画像ファイルがあります。このイカシタ画像を、ひまわりに表示させて見ましょう！

> `｛画像表示のサンプル｝ 「himawari.jpg」を、画像表示。`

> 実行結果→

> > 注意点！
> > パス（\ 記号）を含むファイル名は、『ファイル名』のように、『』で囲う必要があります。
> > いつものように、「」で括ることも出来ますが、この場合、パスの区切り文字である「\」を２つ重ねる必要があります。（これは、Ｃ言語やＪＡＶＡ、秀丸のマクロなど、他の言語でも同様ですので、覚えておいて損はないでしょう。）

> > | ＊Windowsの、ファイルシステムの概念が分かってない方には、「パスって何？」って、感じだと思いますが、フォルダの名前を、ドライブ名から、「\」で区切って順に書いていったものです。 例えば、左の図は、デスクトップにある、「マイコンピューター」を、「c:」、「MyDocument」・・・と、ダブルクリックしていって出てくる「test.txt」までの、経路を表しています。 これの、パスは、 『c:\My Document\test.txt』 ということになります。

> 次に、果物を表示させてみましょう。

> 果物の画像ファイルは、doc\hajimete フォルダの中にあります。（エクスプローラーで、ひまわりをインストールした場所を見ると、"doc" というフォルダがありますよね。そうしたら、doc を開き、続いて、hajimete を開きます。）

> banana.png
> mikan.png
> ringo.png
> 最近のWindowsでは、これらの画像ファイルを選択すると、エクスプローラーで、プレビュー画像が見られるんですよね。（だいたいにして、私を含む頑固者たちは、この表示をオフにしてあるんですよね・・・）
> 画像ファイルがあることを確認できたら、プログラミング開始です。

> `{果物を表示する} ランタイムのパス&『doc\hajimete』へ, 作業フォルダ変更。'(*1) 『banana.png』を、画像表示。 『mikan.png』を、画像表示。 『ringo.png』を、画像表示。`

> (*1) himawari.exe のあるフォルダを得るには、「ランタイムのパス」を参照します。
> また、プログラムの起動したフォルダを得るには、「母艦のパス」を参照します。

> と、表示されたなら、実験成功です。

## 画像表示を極める

> 位置指定、センタリング

> 「表示」命令と、同じように、画像表示も、位置指定や､センタリング処理が出来ます。

> `｛画像位置表示・サンプル｝``（３０，３０）へ、移動。『himawari.jpg』を、画像表示。 （８０，１００）へ、移動。『himawari.jpg』を、画像表示。`

> `｛画像センタリング・サンプル｝ （０，１００）へ、移動。 センタリング。 『himawari.jpg』を、画像表示。`

> 画像の拡大表示

> 「〜を、〜で、画像拡大表示」という命令を使うと、画像を好きなサイズに変更して描画できます。

> `｛画像拡大表示のサンプル｝``センタリング。 "himawari.jpg"を、(30,30)で、画像拡大表示。 "himawari.jpg"を、(40,40)で、画像拡大表示。 "himawari.jpg"を、(50,50)で、画像拡大表示。 "himawari.jpg"を、(60,60)で、画像拡大表示。 "himawari.jpg"を、(70,70)で、画像拡大表示。`

## 画面クリア、線、四角形、円形を、描く

> 画面クリア

> 「〜で、画面クリア」は、画面を指定の色で、初期化する命令です。

> `｛画面クリアのサンプル｝ 文字サイズ＝７２ 「愛」と、表示。 「消します」と、言う。 白色で、画面クリア。`

> 色の指定
> 色の指定は、一般的な色ななら、「黒色」、「白色」、「赤色」、「青色」、「黄色」、「緑色」と、書けますが、16777215色で指定したい場合は、色のコード番号か、あるいは、HTMLで使われる１６進数を使った、RGB表記（＃FF0000＝赤、＃００００FF＝青）で、記述します。

> または、色の番号を、光の三原色で指定する方法があります。R(赤）G(緑）B(青)を、それぞれ、０〜２５５の間で指定します。

> `紫色の番号＝RGB(255,0,255) 紫色の番号で、画面クリア。`

> 線

> 線を引くには､「（X,Y)へ、線」という命令を使います。線の色を指定するときは、「ペン色」へ色を代入してやります。
> 線の太さを指定するときは、「ペン太さ」へ、太さを代入します。

> `｛線の描画サンプル｝ （０，０）へ、移動。 ペン色＝赤色。ペン太さ＝１。（５００，１００）へ、線。 ペン色＝青色。ペン太さ＝４。（３０，２００）へ、線。`

> 四角形と円形

> サンプルを見てもらえば、一発で分かると思いますが、四角形、円形は、以下のように、（X,Y)から、（X,Y)へ、四角形、のように、使います。

> `｛四角形の描画サンプル｝ ペン色＝赤色。ペン太さ＝３。塗り色＝青色。 （０，０）から、（３００，３００）へ、四角形。 ｛円形の描画サンプル｝ ペン色＝白色。ペン太さ＝３。塗り色＝赤色。 （０，０）から、（３００，３００）へ、円形。 ｛日本の国旗｝ ペン色＝黒色。ペン太さ＝３。塗り色＝白色。 （０，０）から、（３００，３００）へ、四角形。 ペン色＝白色。ペン太さ＝３。塗り色＝赤色。 （７５，７５）から、（２２５，２２５）へ、円形。 （３１０，０）へ、移動。 文字色＝赤色。文字書体＝「ＭＳ 明朝」。文字サイズ＝６４。 「愛国心」と、表示。`

## フォーム（キャンバス自体）の設定

> ひまわりでは、一番基本となるフォーム（ウインドウ）を、「母艦」と、呼ぶことにしました。なんだか、強そうな感じがしますよね？

> ひまわりの、ウインドウの、大きさや、位置、そして、タイトルバーの変更の方法を、かいておきます。

> `母艦の、テキストは、「テストだよ〜」’←タイトルバーのテキストを変更します。 母艦の、サイズは、(0,0,デスクトップの幅,デスクトップの高さ)’←（X座標、Y座標、幅、高さ）を変更します。 母艦を、最前面。’←常に、最前面に表示されるようにします。`

> このプログラムを実行すると、デスクトップいっぱいにフォームが表示されます。

目次へ戻る／次へ