75才からのモバイルアプリ作成

MIT App Inventor 2 を使ったアプリ作成

MIT App Inventor 2で遊ぶ (色と描画4-ColorPicker2-)

2024-06-25 08:38:05 | 日記

お絵描き帳の中にカラーピッカーを追加する。もうすでにどちらのアプリも作成済みなので、新しい要素は特にない。

アプリ実行のビデオ:

スクリーンのデザイン:

右2つは、描画モードとカラーピッカーモードの画面。

        .       

ブロック・コード:

カラーピッカーの表示の部分のみ。(前回までと重複部分が多いので、かなり省略。)

1. 背景色がグラデーションの「カラーピッカー」ボタンをタップした時の動作。

描画用キャンバス(Canvas1)が表示されている時は、カラーピッカー用キャンバスが設定されているVerticalArrangement3を表示。

カラーピッカー用キャンバス(Canvas2)に配置されているBall1(黒色の丸)の位置をx=120, y=120 にセットする。(ほぼ中心)

「カラーピッカー」ボタンの表示文字を「キャンバスへ戻る」に変更。

逆に、カラーピッカー用キャンバスが表示されている場合は、描画用キャンバス(Canvas1)を表示し、ボタンの表示も元に戻す。

2. カラーピッカーとして表示する画像3種類のファイル名をリストとして変数colorFileに格納。

3. 「changeWheelButton」ボタンをタップする毎にカラーピッカーとして表示する画像を順番に表示する。

4. タッチした座標 (currentX, currentY) へカラーピッカー用キャンバス上のBall1を移動させ、そのタッチした座標の色をselectedColorLblの背景色にセットする。

「showSelectedColorBtn」をタップしてcanvasPaintColorにカラーピッカーで選択した色をセットする。

以下canvasPaitnColorにセットする色毎にボタンを設定しているが赤を除き省略。

                                           ***************************************************

色と描画に関する前回までのブログ:

MIT App Inventor 2で遊ぶ (色と描画3-ColorPicker1-)

MIT App Inventor 2で遊ぶ (色と描画2-お絵描き帳2-)

MIT App Inventor 2で遊ぶ (色と描画1-お絵描き帳-)