REALbasic かってに連載します(第2回)


 REALbasicでプログラムを書き込んでいくとき、ときどきまだ打ち込んでいない文字が薄く出てくることがあります。これはREALbasicが入力を補助する機能を持っているためで、薄く出てきた文字を入力したいときは、「tab」キーを押せばそのまま入力されます。
   第2回 - Canvasを使ってみよう -

 前回のリサージュ図形はいかがでしたか。グラフィック関係の命令は、みな試してみたことだと思います。今回は、canvasにグラフを描いてみることにします。canvasに描くメリットは、グラフを描くプログラムを書いた後からそのグラフ全体の位置を、ウィンドウ内で簡単に変更できることです。
     
  1.   - 準備 (前回を参考に)-
     
    1. REALbasicのアイコンをダブルクリックすると、初期画面が出ます。 まずEditメニューのEditor Settingsを選びます。ここでDefault Control FontのFontを「System」に変更しておきます。これで表示に日本語が使えるようになります。
    2.  Untitledのウィンドウをアクティブにして、作業をはじめます。まずTitleの欄にはUntitleと表示されています。この「Untitle」を「リサージュ0.2」に変更して下さい。
    3. HasBackColorにチェックを入れて、BackColorのプロパティをダブルクリックして好きな色を選んで下さい。
    4. ツールボックスからボタンをドラッグして「リサージュ0.2」のウィンドウに持ってきます。このボタンに、終了のプログラムを書き込んで下さい。ボタンをダブルクリックして「quit」でしたね。

  2.  - 2つめのボタンに総てを詰め込む -

     2つめのボタンを「リサージュ」のウィンドウに持ってきます。Captionの欄には「スタート」とでもしておきます。

    1.  REALbasicでは、グラフはCanvasという画面に描くのが普通です。Canvasはツールボックスにある夕日の絵(朝日かな?)の付いたアイコンです。これを「リサージュ0.2」のウィンドウに持ってきます。PropertiesのウィンドウにはNameの欄にCanvas1と表示されているはずです。Canvas1のプロパティには、このCanvas1という画面自身の位置を表す、Left(左の座標),Top(上の座標),Width(幅),Height(高さ)やPICT形式の画像を張り付けるBackdropなどがあります。マウスを使ってアクティブなCanvas1のハンドルをドラッグすると、これらの位置のプロパティが変化します。ここではPropertiesのウィンドウ内で、これらの値を、Leftは10 ,Topは10 ,Widthは200 ,Heightは200に変更します。先ほどの2つのボタンはこれにかからない位置に配置し直して下さい。これでグラフを描く準備ができました。
    2. 「リサージュ0.2」のウィンドウ内の「スタート」と表示されたPushButton2をダブルクリックする。
    3. プログラムのコードを書き込むウィンドウが開きます。
      Sub Action()
       |
      End Sub
      と表示されていますので、ここにプログラムを書いていきます。
       座標軸を描くコードは以下のようになります。
      Sub Action()
       canvas1.graphics.drawline 10,50,190,50
       canvas1.graphics.drawline 50,10,50,190
       canvas1.graphics.drawstring "y",50,10
       canvas1.graphics.drawstring "x",90,50
      End Sub
      「canvas1.graphics.drawline 10,50,190,50」は、座標点(10,50)と(190,50)を結ぶ直線をcanvas1に描く命令で、REALbasicでは、「canvasコントロールにgraphicsオブジェクトの直線描画のメソッド」という言い方をします。前回との違いは、「canvas1.」がはじめについて、どの画面に描画するのかをはっきり指定していることです。
       「リサージュ0.2」のウィンドウ内に直接描画する場合は、本来であればこのウィンドウのNameである「Window1」を頭に付けて「window1.graphics.drawline 10,50,190,50」とすべきところですが、「Window1」の中に含まれたボタンに、Window1への描画プログラムを書く場合は、「Window1」は頭に付けません。ですから前回の場合は「graphics.drawline 10,50,90,50」と表現したわけです。

    4. メニューのDebugからRunを選択して、確認してみて下さい。そのあと忘れずに、保存して置いて下さい。REALbasicは、まだ不安定なところがありますので、いつ止まっても大丈夫なように注意を払っておきます。

  3. 前回は以下のコードを書き込みました。
    Sub Action()
     dim n as integer
     dim x,y as double
     for n=0 to 100
      y=40*sin(n*6.28/100)
      x=40*sin(2*n*6.28/100)
      graphics.drawoval x+50,-y+50,2,2
     next
    End Sub
    「dim n as integer」や「dim x,y as double」などの変数の定義は必ずプログラムコードの先頭でする決まりになっています。ですから、これらを先頭に持ってきて
    Sub Action()
     dim n as integer
     dim x,y as double
     canvas1.graphics.drawline 10,50,190,50
     canvas1.graphics.drawline 50,10,50,190
     canvas1.graphics.drawstring "y",50,10
     canvas1.graphics.drawstring "x",90,50
     for n=0 to 100
      y=40*sin(n*6.28/100)
      x=40*sin(2*n*6.28/100)
      canvas1.graphics.drawoval x+50,-y+50,2,2
     next
    End Sub
    となります。
    せっかくですから、リサージュを作るもとになる関数も並べてグラフにしましょう。
    Sub Action()
    dim n as integer
    dim x,y as double
    canvas1.graphics.drawline 10,50,190,50
    canvas1.graphics.drawline 50,10,50,190
    canvas1.graphics.drawstring "y",50,10
    canvas1.graphics.drawstring "x",90,50
    for n=0 to 100
    y=40*sin(n*6.28/100)
    x=40*sin(2*n*6.28/100)
    canvas1.graphics.drawoval x+50,y+50,2,2
    canvas1.graphics.drawoval x+50,n+100,2,2
    canvas1.graphics.drawoval n+100,-y+50,2,2
    next
    End Sub
    以上のようになります。

  4.  - 今回はここまで -

     前回のリサージュを材料にして、Canvasコントロールの実際の使い方について説明しました。  ここまでくればしめたものです。次回はさらに他のコントロールをつけ加えてみましょう。

     リサージュの位相を変えるための変数 th を加えた「リサージュ0.2」をサンプルとしてダウンロードできるようにしておきます。
    Sub Action()
    dim n as integer
    dim x,y ,th as double
    th=1.2
    canvas1.graphics.drawline 10,50,190,50
    canvas1.graphics.drawline 50,10,50,190
    canvas1.graphics.drawstring "y",50,10
    canvas1.graphics.drawstring "x",90,50
    for n=0 to 100
    y=40*sin(n*6.28/100+th)
    x=40*sin(2*n*6.28/100)
    canvas1.graphics.forecolor=rgb(150,0,0)
    canvas1.graphics.drawoval x+50,y+50,2,2
    canvas1.graphics.forecolor=rgb(0,150,0)
    canvas1.graphics.drawoval x+50,n+100,2,2
    canvas1.graphics.forecolor=rgb(0,0,150)
    canvas1.graphics.drawoval n+100,-y+50,2,2
    next
    End Sub
    「canvas1.graphics.foreColor=rgb(150,0,0)」はグラフィックの色指定の命令です。色と数字の関係は、覚え書きのページに具体例があります。まさにこのために作ったサンプルです。
     「th=1.2」の部分の数字を変更して RUN させてみて下さい。

 今回の「リサージュ0.2」の ソースプログラムです
  
  プロジェクトファイルのみです。REALbasicの最新バージョンが必要です。30 kバイト  

  ソースコードについての質問やご意見がありましたら以下のアドレスまでご連絡下さい。
          koko-@mx2.tiki.ne.jp

このホームページのホストは です。 無料ホームページをどうぞ!