CanvasとListPickerで簡易お絵描きツールを作る！ (3/4)

では、ブロック・エディタで処理を作成していきましょう。今回は、全部で４つの処理を用意することになります。けっこうプログラムっぽくなってきますので、間違えないように！

１．「Screen1.Initialize」

「set Canvas1.Height to」「Screen1.Height」「-」「ListPicker1.Height」

Screen1.Initializeで、Canvas1の高さ調整をしておきます。これは、「Screen1.Height - ListPicker1.Height」としておきました。「-」はひき算の部品で、Built-inの「Math」に用意されています。これを使ってScreen1.Height（スクリーンの高さ）からListPicker1.Heightを弾いた値をCanvas1.Heightに設定しておきます。

２．「Canvas1.Touched」

「Canvas1.DrawCircle」「x」「y」「text」

Canvas1をタッチしたときに実行する処理を組み込むためのものです。配置すると、部品の右のほうに「x」「y」「touchedSprite」といった部品が組み込まれた状態で作成されます。これらは、タッチした位置やその他の情報が保管されている変数です。

ここでは、「Canvas1.DrawCircle」という部品を組み込みます。これは、Canvas1に円の図形を描く機能です。右側に部品をはめ込むヘコミが３つあるので、ここに「My Definition」にある「x」「y」と、Built-inのTextにある「text」を組み込みます。

x,yは、Canvas1.Touchedで渡された変数ですね。textは、組み込んだ後、右側に見える小さい▽をクリックして、「number」というメニューを選んでください。これで、テキストではなく数字の値が設定できるようになります。ここで「10」と記述しておきましょう。

これで、「横x、縦yの位置に、半径10の円を描く」という処理ができました。

３．「Canvas1.Dragged」

「Cannvas1.DrawCircle」「currentX」「currentY」「text」

Canvas1をドラッグしているときに実行する処理を実行するものです。Touchと似ていますが、こちらはもっとたくさんの変数が右端にくっついています。これはドラッグの開始位置、現在の位置、その前の位置……というように、位置に関する値がいくつもあるためです。

ここでも、先ほどと同様にCanvas1.Circleをはめ込んでおきます。ただし、右側には「currentX」「currentY」「text」を組み込んでください。「currentX」「currentY」は、ドラッグ中の「現在の位置」を示す変数です。また「text」は、先程と同様に「number」に変更し、「10」と入力してください。

４．「ListPicker.AfterPicking」

「if」「ListPicker1.Selection」「=」「text（Red）」
    「set Canvas1.PaintColor to」「color Red」


「if」「ListPicker1.Selection」「=」「text（Green）」
    「set Canvas1.PaintColor to」「color Green」


「if」「ListPicker1.Selection」「=」「text（Blue）」
    「set Canvas1.PaintColor to」「color Blue」


「if」「ListPicker1.Selection」「=」「text（Black）」
    「set Canvas1.PaintColor to」「color Black」


「if」「ListPicker1.Selection」「=」「text（White）」
    「set Canvas1.PaintColor to」「color White」

これは、ListPicker1で、表示されたリストから項目を選んだ後に実行する処理を設定するものです。ここでは、選択された項目が何かを調べ、それに応じてCanvas1の描画色を設定します。

ここでは、Built-inの「Logic」にある「if」という部品を使います。これは、その右側の「test」にはめ込んだ処理をチェクして、それが正しければ下の「then-do」に組み込んだ処理を実行する、という働きをします。

ここでは、上のtestに「ListPicker1.Selection」「=」「text」というように部品をはめ込み、最後のtextの値を「Red」というように色の名前（ListPickerに用意した色名）に変更しています。そして、そのthen-doには「set Canvas1.PaintColor to」「color Red」というように、Canvas1.PaintColorの値を変更する部品の右側に、Built-inのColorに用意されている色の名前の部品をはめ込みます。

これは、「testに指定した、ListPicker1.Selectionの値が

Red

だったら、then-doに指定した、Canvas1.PaintColorの値をRedに変更する」というような処理になるわけです。

こうして、ListPicker1に用意した色名のかずだけ「if」を用意し、それぞれしての色に変更するように処理を組み込んでおきます。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。