- 概要
- LovyanGFXとは？
- LovyanGFXのざっくり機能一覧
- 色について
- 色の一覧
- 色の指定方法
- 点描画 drawPixel(x, y, color)
- 線描画 drawLine(x0, y0, x1, y1, color)
- グラデーション線描画 drawGradientLine(x0, y0, x1, y1, colorstart, colorend)
- 水平線描画 drawFastHLine(x, y, w, color)
- 垂直線描画 drawFastVLine(x, y, h, color)
- 四角外形描画 drawRect(x, y, w, h, color)
- 四角塗潰描画 fillRect(x, y, w, h, color)
- 画面クリア fillScreen(color) / clear(color)
- 塗り潰し floodFill(x, y, color) / paint(x, y, color)
- 角丸四角外形描画 drawRoundRect(x, y, w, h, r, color)
- 角丸四角塗潰描画 fillRoundRect(x, y, w, h, r, color)
- 三角外形描画 drawTriangle(x0, y0, x1, y1, x2, y2, color)
- 三角塗潰描画 fillTriangle(x0, y0, x1, y1, x2, y2, color)
- 円外形描画 drawCircle(x, y, r, color)
- 円塗潰描画 fillCircle(x, y, r, color)
- 円弧外形描画 drawCircleHelper(x, y, r, cornername, color)
- 特殊円塗潰描画 fillCircleHelper(x, y, r, corners, delta, color)
- 楕円外形描画 drawEllipse(x, y, rx, ry, color)
- 楕円塗潰描画 fillEllipse(x, y, rx, ry, color)
- 円弧外形描画 drawArc(x, y, r0, r1, angle0, angle1, color)
- 円弧塗潰描画 fillArc(x, y, r0, r1, angle0, angle1, color)
- 3点ベジェ曲線描画 drawBezier(x0, y0, x1, y1, x2, y2, color)
- 4点ベジェ曲線描画 drawBezier(x0, y0, x1, y1, x2, y2, x3, y3, color)
- 一覧
- まとめ
- 続編
概要
らびやんさん作のLovyanGFXを、自作M5Liteライブラリなどで利用させていただいていますが、描画系の解説用として、LovyanGFXの使い方を確認しなおしたいと思います。
上記にまとめた資料が置いてあります。
LovyanGFXとは？
AdafruitGFXやTFT_eSPIと一定の互換性をもちつつ、カリカリにチューニングされているグラフィックライブラリです。Arduino IDEのライブラリマネージャーに登録されているので、かんたんに利用することができます。
LovyanGFXのざっくり機能一覧
- LCD（ボード）の自動認識
- 基本的な描画機能
- スプライト機能
- 画像処理機能
- テキスト処理機能
- タッチパネル対応
いろいろ機能はありますが、代表的な機能です。やはりボードの自動認識は便利です。複数のLCDを接続している場合などはちょっと面倒ですが、対応ボードで動かす分には速攻で使えるようになります。
今回は基本的な描画機能を調べてみたいと思います。今後他の機能もやっていきます。なのでlcd.width()とか、使い方の説明もないままにいきなり基本描画になります！
色について
最初にちょっとだけ色について解説したいと思います。一般的にRGBで色指定する事が多く、(0, 0, 0)が黒、(255, 0, 0)が赤などの24ビットで指定をすると思います。これはRGB888と呼ばれています。この他にアルファブレンドを追加してRGBA8888なども存在しています。
Arduinoなどで利用されるLCDは16ビットが多く、RGB565と呼ばれる色情報がよく使われています。これは各色の分解能を減らし、16ビットで指定するようにしたものになります。色をたくさん転送することを考えると16ビットに減らした方がパフォーマンスが上がります。
この他にRGBA5551などで、抜き色に対応しているフォーマットもありますが、一般的には利用されません。抜き色を行う場合には、あらかじめ決めた特定の色（マゼンタなど）を抜き色として処理することが多いようです。
色の一覧
上記が一般的な色の指定方法になります。赤(255, 0, 0)を指定する場合、M5Stack(TFT_eSPI)などではREDという定数が宣言されていますが、LovyanGFXでは非推奨です。TFT_REDもしくはlcd.color888(255, 0, 0)を利用してください。
0xF800や0xFF0000U、(uint32_t)0xFF0000など直値でも指定できますが、ぱっと見で色がわからないので個人的にはおすすめしません。ちなみに16ビットモードで動いているLCDにRGB888形式で色を渡すと、内部でRGB565にちゃんと変換されます。
上記の表はPDFでも準備してあるので、そちらのほうがコピーできるので便利です。資料一式はアップロードしてあるので、後ほど紹介します。
色の指定方法
各描画関数は引数にcolorありと、なしの両方が準備されています。
lcd.drawPixel(x, y, color);
上記のように色を指定して描画した場合、内部では以下の形と同じです。
lcd.setColor(color); lcd.drawPixel(x, y);
どちらを使っても構いません。ただし、同じ色で複数回の描画をする場合には色指定をしないで、描画関数を呼び出したほうがわずかながら早いみたいです。わかりやすさ的には色指定があったほうがいいと思います。ただし直値指定していると、色が変更になった場合に面倒なので、変数に入れるかsetColor()を使うかしたほうがいいかもしれません。
点描画 drawPixel(x, y, color)
単純に点を打つ関数です。画面外を指定した場合には処理がスキップされますので、呼び出し側で画面外判定をするよりは、とりあえず関数を実行して範囲外はライブラリでスキップしてもらったほうが手軽だと思います。
線描画 drawLine(x0, y0, x1, y1, color)
単純な線の描画です。水平と垂直の線を描画する場合にはもう少し高速な関数がありますが、すべてこの関数でも多くの場合では問題ないと思います。
グラデーション線描画 drawGradientLine(x0, y0, x1, y1, colorstart, colorend)
どんなときに使うんだろう？
格闘ゲームの体力バーみたいな場合、画像素材として準備して描画したほうが多くの場合には楽だと思います。この関数で希望するグラデーションを再現するのは結構たいへんな気がします。
※LovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
水平線描画 drawFastHLine(x, y, w, color)
開始点と、横幅を指定するだけの高速描画関数です。表などを描画する場合には便利だと思います。
垂直線描画 drawFastVLine(x, y, h, color)
垂直線描画用の高速描画関数です。
四角外形描画 drawRect(x, y, w, h, color)
drawからはじまる関数は外形のみで、内側が塗りつぶされません。表などを描画する場合にRectで外側を描画して、罫線を水平と垂直で描画することもありますが、個人的には全部水平と垂直で描画するのでRectはあまり使わないです。
四角塗潰描画 fillRect(x, y, w, h, color)
fillからはじまる関数は外形と内側を塗りつぶす関数です。部分的に背景色に塗りつぶす場合などに多用する関数となります。間違ってdrawRectで描画して、消えてないじゃんってよくなるので注意してください！
画面クリア fillScreen(color) / clear(color)
内部的にはfillRect(0, 0, _width, _height)と画面全体を塗りつぶす関数になります。clear()関数のみcolor引数の意味が違うので注意してください。clear()の場合にはsetBaseColor()で指定した色で塗り潰し、初期値では黒(0, 0, 0)になります。
fillScreen(TFT_BLACK)などと常に色を指定したほうが、明示的でわかりやすいと思います。
※clear()関数はLovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
塗り潰し floodFill(x, y, color) / paint(x, y, color)
指定座標から他の色で囲まれた場所を塗り潰します。非常にマニアックな処理で、囲み忘れがあると漏れてしまうので、使いみちが難しい関数です。M5Stack Core2などでタッチパネルのお絵かきツールを作る場合などには有効ですが、一般的な用途では使わない方がよいと思います。
※LovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
角丸四角外形描画 drawRoundRect(x, y, w, h, r, color)
rを指定して、角が丸くなっている四角を描画します。ボタンなどを描画する場合には便利ですね。
角丸四角塗潰描画 fillRoundRect(x, y, w, h, r, color)
塗り潰しバージョンです。実際にはこちらの方がよく使うかな？
三角外形描画 drawTriangle(x0, y0, x1, y1, x2, y2, color)
三角形の描画です。ただ実際に三角を描画することってあまりないですよね？
三角塗潰描画 fillTriangle(x0, y0, x1, y1, x2, y2, color)
塗り潰しバージョンです。
円外形描画 drawCircle(x, y, r, color)
四角を指定して描画するライブラリもありますが、LovyanGFXでは中心座標とrを指定します。
円塗潰描画 fillCircle(x, y, r, color)
塗り潰しバージョンです。
円弧外形描画 drawCircleHelper(x, y, r, cornername, color)
非常にわかりにくい関数です。cornernameで、円弧のどこを描画するのかを指定します。上半分を描画する場合には(0x1 | 0x2)なので0x3になります。どんなときにこの関数を使うのでしょうか？
特殊円塗潰描画 fillCircleHelper(x, y, r, corners, delta, color)
この関数はdrawとfillで機能が違います。。。上下の円を描画するのですが、deltaで横に長くすることができます。ものすごく横幅の指定が難しいので、おすすめしません。
楕円外形描画 drawEllipse(x, y, rx, ry, color)
楕円ですね。この関数もあまり使わないかな？
楕円塗潰描画 fillEllipse(x, y, rx, ry, color)
塗り潰しバージョンです。
円弧外形描画 drawArc(x, y, r0, r1, angle0, angle1, color)
こちらもちょっと、説明しにくい関数です。中心座標と、外側のアウター(r0)と内側のインナー(r1)の大きさを指定して、厚みのある円を描画します。そこに何度から何度まで描画するかを指定します。角度は右側が0度になっていて、上の例だとangle0が20度、angle1が340度ぐらいです。
メーター系の描画に利用することができ、真ん中に数値を描画して周りで割合を表すことなどができます。
※LovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
円弧塗潰描画 fillArc(x, y, r0, r1, angle0, angle1, color)
塗り潰しバージョンです。
※LovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
3点ベジェ曲線描画 drawBezier(x0, y0, x1, y1, x2, y2, color)
1点目と3点目から2点目に引っ張られるような形で、線が描画されます。ちょっと扱いが難しいので、あまり多様しないほうがよいと思います。。。
※LovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
4点ベジェ曲線描画 drawBezier(x0, y0, x1, y1, x2, y2, x3, y3, color)
4点でのベジェ曲線です。
ベジェ曲線自体は上記のページに、ブラウザで動かしながら解説してくれるものがありました！
※LovyanGFXの独自拡張関数で、一般的なM5Stack(TFT_eSPI)ライブラリでは利用できません。
一覧
| 関数 | LovyanGFX | M5Stack |
| void drawPixel(x, y, color) | ○ | ○ |
| void drawLine(x0, y0, x1, y1, color) | ○ | ○ |
| void drawFastHLine(x, y, w, color) | ○ | ○ |
| void drawFastVLine(x, y, h, color) | ○ | ○ |
| void drawGradientLine(x0, y0, x1, y1, colorstart, colorend) | ○ | ✕ |
| void drawRect(x, y, w, h, color) | ○ | ○ |
| void fillRect(x, y, w, h, color) | ○ | ○ |
| void fillScreen(color) | ○ | ○ |
| void clear(color) | ○ | ✕ |
| void drawRoundRect(x, y, w, h, r, color) | ○ | ○ |
| void fillRoundRect(x, y, w, h, r, color) | ○ | ○ |
| void drawTriangle(x0, y0, x1, y1, x2, y2, color) | ○ | ○ |
| void fillTriangle(x0, y0, x1, y1, x2, y2, color) | ○ | ○ |
| void drawCircle(x, y, r, color) | ○ | ○ |
| void drawCircleHelper(x, y, r, cornername, color) | ○ | ○ |
| void fillCircle(x, y, r, color) | ○ | ○ |
| void fillCircleHelper(x, y, r, corners, delta, color) | ○ | ○ |
| void drawEllipse(x, y, rx, ry, color) | ○ | ○ |
| void fillEllipse(x, y, rx, ry, color) | ○ | ○ |
| void drawArc(x, y, r0, r1, angle0, angle1, color) | ○ | ✕ |
| void fillArc(x, y, r0, r1, angle0, angle1, color) | ○ | ✕ |
| void drawBezier(x0, y0, x1, y1, x2, y2, color) | ○ | ✕ |
| void drawBezier(x0, y0, x1, y1, x2, y2, x3, y3, color) | ○ | ✕ |
| void drawBezierHelper(x0, y0, x1, y1, x2, y2, color) | ○ | ✕ |
| void floodFill(x, y, color) | ○ | ✕ |
| void paint(x, y, color) | ○ | ✕ |
一部独自拡張の関数があります。減っているものはありませんので、乗り換えるときに問題になることはないと思います。
まとめ
上記にブログで紹介した資料をアップしてあります。ベースのエクセルファイルと、PDF、画像ファイルになります。個人的にはPDFがコピーできるのでおすすめです。
もう少し資料をまとめたらA4一枚か二枚のチートシートを作りたいと思います！
コメント
[…] Lang-ship 1 PocketLovyanGFX入門 その1 基本描画系https://lang-ship.com/blog/work/lovya… […]