ブロックエディタの作業後半です。後はCanvasの描画処理と、イメージの保存ですね。

・保存ボタンの処理
保存用のボタン（Button2）の処理です。[Button2.Click]を配置し、ここに用意をします。ここで行うのは全部で４つの処理になります。

1. 保存するファイル名を用意します。これは[sample_image-][counter][.jpg]というように、３つの要素を１つにjoinでつなげたものをグローバル変数pathにsetします。

2. [Canvas1.SaveAs]に、[path]を接続します。これでpathのファイル名でCanvas1のイメージを保存できます。ただし、この[SaveAs]は保存したファイル名を返すので、返された値を処理しないといけません。今回は特にこの値は使用しないので、「Built-in」「Definition」にある[
]という部品を用意して、これに接続しておきます。これは、返値のある処理で、その返値を使用しないような場合に用いる、「ただ返値を受け止めるだけ」の部品です。

3. Notifierを使って画面にメッセージを表示します。ここでは、「Save at:ファイルのパス」というようにメッセージを表示します。[Notifier1.ShowAlert notice]を配置し、その右側に、[Save at:] join [path]と部品をつなげましょう。

4. グローバル変数counterの値を１増やします。[set global counter to]を組み込み、その右側に[counter] + [1]となるように部品を配置します。

・Canvasのドラッグ処理
ドラッグしたら、現在位置に円を描く用にします。これは前に同様のものを作ったことがあるのでわかりますね。[Canvas1.Dragged]を配置し、その中に[Canvas1.PaintColor]と[Canvas1.DrawCircle]を組み込みます。PaintColorは、右側に好きな色の値をつなげておいてください。またDrawCircleは、描画位置のxとyを[Currentx],[CurrentY]に、またrは[10]にしておきました。rの半径は適当に調整下さい。

・Canvasのタッチ処理
タッチの処理は[Canvas1.Touched]を使って作成します。ここでは、Notifierを使って、テキストを入力するダイアログを表示します。まず、タッチした位置の情報をグローバル変数に保管しておきます。[set lastX to][x]、[set lastY to][y]と組み込んでください。

テキスト入力のダイアログは、[Notifier1.ShowTextDialog]を使って表示します。messageとtitleには、それぞれ表示するメッセージとタイトルを設定します。これは、テキスト入力のダイアログを呼び出すだけのもので、入力後の処理は別にイベント処理を用意してやります。

・入力ダイアログ表示後の処理
ShowTextDialogで表示したテキスト入力ダイアログでテキストを入力し、OKして閉じると、[Notifire1.AfterTextInput]というイベントが実行されます。ここで入力されたテキストの処理を行います。

まず、Canvas1の[FontSize]と[PaintColor]をそれぞれ設定しておきましょう。ここでは赤と40ポイントに設定しましたが、各自の好みにあわせてください。そして、[Canvas1.DrawText]で入力されたテキストをタッチした位置に描画します。textには引数で渡される[response]を、xとyにはグローバル変数[lastX]と[lastY]をそれぞれ接続します。