線、長方形、円
図形を描いて簡単なUIを作ります。
「線、長方形、円」はCoddyKit上の無料Arduino & IoT Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはArduino & IoT Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Arduino & IoT Academyコースには全4レッスンが含まれています。
文字のその先へ
文字だけでは単調になりがちです。GFXライブラリでは図形も描画できるため、データを囲んだり、メーターを作ったり、本格的な小さなインターフェースを設計したりできます。🎨
ピクセルグリッド
すべての図形はcoordinateグリッド上に配置されます。(0,0)が左上で、xは右方向に、yは下方向に進みます。これは、すでに使った文字カーソルと同じです。
1ピクセルを描画する
最小の描画要素は1つの点です。drawPixelにはx、y、色を指定し、画面上のちょうど1点を点灯させます。
display.drawPixel(10, 10, WHITE);線を描画する
drawLineは2点をつなぎます。始点のxとy、終点のxとy、そして色を指定すると、2点の間に直線が描画されます。
display.drawLine(0, 0, 127, 63, WHITE);長方形の輪郭を描く
drawRectには、左上のxとyに加えて、幅と高さが必要です。枠線だけを描画するため、値やセクションを囲むのに適しています。
display.drawRect(0, 0, 60, 30, WHITE);長方形を塗りつぶす
同じ引数でfillRectに切り替えると、長方形全体を塗りつぶせます。塗りつぶしたバーは、メーターや進捗表示の基本要素です。
display.fillRect(0, 0, 60, 30, WHITE);円の輪郭を描く
drawCircleには、中心のxとy、および半径を指定します。円形の枠線を描画できるため、ダイヤルや状態表示の点、丸いアイコンに便利です。
display.drawCircle(64, 32, 20, WHITE);円を塗りつぶす
塗りつぶした円盤を描くにはfillCircleを使います。小さな塗りつぶし円は、ひと目で読み取れる明確なオン・オフ表示になります。
display.fillCircle(64, 32, 5, WHITE);角丸長方形
より柔らかな見た目にするには、drawRoundRectで幅と高さに加えて角の半径を指定します。角丸のボックスを使うと、ボタンやカードが親しみやすくなります。
display.drawRoundRect(0, 0, 60, 30, 8, WHITE);図形と文字を重ねる
描画する順番が重要です。後から描いた図形ほど上に重なります。まず塗りつぶしたboxを描き、その上に文字を表示すると、ラベル付きバッジのように見せられます。
display.fillRect(0, 0, 50, 16, WHITE);
display.setTextColor(BLACK);画面に反映する
いつもどおり、すべての描画はバッファに書き込まれます。図形の描画が終わったらdisplay.display()を呼び出し、合成した画像全体を一度に表示します。
display.display();確認問題
タンクの満水度を示す、塗りつぶしたバーを表示したいとします。
まとめ
これで、ピクセル、線、長方形、円を描画し、shapesと文字を重ねられるようになりました。これらの基本図形だけで、本格的なUIを構成できます。
AI チューターと学ぶ C++ — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「線、長方形、円」レッスンは無料ですか？
はい。「線、長方形、円」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Arduino & IoT Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Arduino & IoT Academyコースには全4レッスンが含まれています。
「線、長方形、円」で何を学びますか？
図形を描いて簡単なUIを作ります。 ブラウザで直接実行するハンズオンコードでArduino & IoT Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Arduino & IoT Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのArduino & IoT Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「線、長方形、円」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このArduino & IoT Academyレッスンでコードを書いて実行できますか？
はい。すべてのArduino & IoT Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。