キャンバスに絵を書く


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

「表示」命令を極める。

センタリングして表示

今まで、何気に、「表示」命令を使っていましたが、これは、ただ、左端から、一行ずつ文字列を表示するだけでした。
’だらだらと、文字を表示する
「あ」と、表示。
「い」
と、表示。
「う」
と、表示。
「え」
と、表示。
ここで、「センタリング」命令を使うと、メッセージをセンタリング出来ます。
また、「センタリング解除」命令で、センタリングを解除します。
’センタリング表示
センタリング
「あ」と、表示。
「ムカデがいた!」と、表示。
「きゃー!」と、表示。
センタリング解除
「うむ。センタリング解除したものね。」と、表示
 
サイズ・色・書体を変えて表示

その他、文字の細かい属性をを変えるには・・・
’属性を変えて表示
センタリング
文字書体「MS 明朝」
文字サイズ72
文字色赤色
「愛¥n自由¥n正義」と、表示。
・・・のようにします。
また、6行目の文字列の中に、¥nという記号がありますが、これは、ここで、改行するという意味になります。

(↑属性を変えて表示した例)

書体の後ろに、「太字(ボールド)、傾斜(イタリック)、下線(アンダーライン)」のオプションをつけて、字を太くしたり傾斜させたりすることも出来ます。
センタリング
文字書体「MS 明朝|太字傾斜下線」
文字サイズ72
文字色赤色
「愛¥n自由¥n正義」と、表示。
表示位置の変更をする
また、文字を表示する座標を指定できます。座標の指定は、「(X,Y)へ、移動」という命令を使います。

適当な場所へ文字を書くサンプル}
50,50へ、移動。
「好きな所へ」と、表示。
10,80へ、移動。
「好きな文字が」と、表示。
200,110へ、移動
「書けるんですよ〜」と、表示。

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

画像ファイルを読む

概要
ひまわりでは、以下の形式の画像が読み書きできます。
  1. Windwosの標準画像形式である、BMP、ICO形式の画像。
  2. 写真データの圧縮に向いている、JPEG形式の画像。
  3. イラスト等の圧縮に向いている、PNG形式の画像。
  4. 256色、16色など色数の少ない画像の圧縮に向いている、MAG形式の画像。
※もし、上記以外の画像を読みたい場合は、Susie-PlugIn を、ひまわりと同じフォルダに入れておけば、画像表示が出来ます。
画像の準備
まず、画像を表示するためには、画像を準備しなければなりません。
ソースファイル(プログラムを書いたファイルのこと)と、同じフォルダへ、表示したい画像をコピーしてください。
画像の表示
画像を表示するには、
「ファイル名」を、画像表示。
のような書式で書きます。
画像表示のテスト
 もともと、ひまわりのフォルダには、"himawari.jpg"という画像ファイルがあります。このイカシタ画像を、ひまわりに表示させて見ましょう!
{画像表示のサンプル}
「himawari.jpg」を、画像表示。
実行結果→

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

*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 のあるフォルダを得るには、「ランタイムのパス」を参照します。
また、プログラムの起動したフォルダを得るには、「母艦のパス」を参照します。



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

画像表示を極める

位置指定、センタリング
「表示」命令と、同じように、画像表示も、位置指定や、センタリング処理が出来ます。
{画像位置表示・サンプル}
3030へ、移動。『himawari.jpg』を、画像表示。
80100へ、移動。『himawari.jpg』を、画像表示。

{画像センタリング・サンプル}
100へ、移動。
センタリング。
『himawari.jpg』を、画像表示。
画像の拡大表示
 「〜を、〜で、画像拡大表示」という命令を使うと、画像を好きなサイズに変更して描画できます。
{画像拡大表示のサンプル}
センタリング。
"himawari.jpg"を、(30,30)で、画像拡大表示。
"himawari.jpg"を、(40,40)で、画像拡大表示。
"himawari.jpg"を、(50,50)で、画像拡大表示。
"himawari.jpg"を、(60,60)で、画像拡大表示。
"himawari.jpg"を、(70,70)で、画像拡大表示。

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

画面クリア
「〜で、画面クリア」は、画面を指定の色で、初期化する命令です。
{画面クリアのサンプル}
文字サイズ=72
「愛」と、表示。
「消します」と、言う。
白色で、画面クリア。
色の指定

色の指定は、一般的な色ななら、「黒色」、「白色」、「赤色」、「青色」、「黄色」、「緑色」と、書けますが、16777215色で指定したい場合は、色のコード番号か、あるいは、HTMLで使われる16進数を使った、RGB表記(#FF0000=赤、#0000FF=青)で、記述します。
または、色の番号を、光の三原色で指定する方法があります。R(赤)G(緑)B(青)を、それぞれ、0〜255の間で指定します。
紫色の番号=RGB(255,0,255)
紫色の番号で、画面クリア。
線を引くには、「(X,Y)へ、線」という命令を使います。線の色を指定するときは、「ペン色」へ色を代入してやります。
線の太さを指定するときは、「ペン太さ」へ、太さを代入します。
{線の描画サンプル}
(0,0)へ、移動。
ペン色=赤色。ペン太さ=1。(500,100)へ、線。
ペン色=青色。ペン太さ=4。(30,200)へ、線。
四角形と円形
サンプルを見てもらえば、一発で分かると思いますが、四角形、円形は、以下のように、(X,Y)から、(X,Y)へ、四角形、のように、使います。
{四角形の描画サンプル}
ペン色=赤色。ペン太さ=3。塗り色=青色。
(0,0)から、(300,300)へ、四角形。

{円形の描画サンプル}
ペン色=白色。ペン太さ=3。塗り色=赤色。
(0,0)から、(300,300)へ、円形。

{日本の国旗}
ペン色=黒色。ペン太さ=3。塗り色=白色。
(0,0)から、(300,300)へ、四角形。
ペン色=白色。ペン太さ=3。塗り色=赤色。
(75,75)から、(225,225)へ、円形。
(310,0)へ、移動。
文字色=赤色。文字書体=「MS 明朝」。文字サイズ=64。
「愛国心」と、表示。

フォーム(キャンバス自体)の設定

ひまわりでは、一番基本となるフォーム(ウインドウ)を、「母艦」と、呼ぶことにしました。なんだか、強そうな感じがしますよね?
ひまわりの、ウインドウの、大きさや、位置、そして、タイトルバーの変更の方法を、かいておきます。
母艦の、テキストは、「テストだよ〜」’←タイトルバーのテキストを変更します。
母艦の、サイズは、(0,0,デスクトップの幅,デスクトップの高さ)’←(X座標、Y座標、幅、高さ)を変更します。
母艦を、最前面。’←常に、最前面に表示されるようにします。
このプログラムを実行すると、デスクトップいっぱいにフォームが表示されます。

目次へ戻る / 次へ