M5CanvasはLGFX_Spriteの派生クラスで、基本的にはTFT_eSPIのSpriteと同じように使われています。M5GFXで定義された"Sprite"ではなく"Canvas "と呼ぶのが適切ですが、TFT_eSpriteとの互換性のためにpushSpriteなどの手法は残っています。
以下に含まれていないより詳細なAPI情報についてはこちらをご参照ください。
事前にメモリ上に描画し、一度にパネルに表示できるため、迅速な表示が可能です。
小さな文字などの表示に便利です。
透明な色を使用して重ね合わせを提供できます。
ディスプレイ上で描画する際に、スケーリング、回転、アンチエイリアス処理を行うことができます。
M5Canvas()
M5Canvas(M5GFX&)
M5Canvas(M5GFX&)
コンストラクタを使用して、正しい描画ターゲットが設定されることを確認することをお勧めします。
カラーパレットのカラーインデックスでしか設定色を達成できません
。取得した色情報もカラーインデックス
であり、色数値ではありません。Syntax:
void* createSprite(int32_t w, int32_t h)
Description:
Parameters:
Return:
Syntax:
void fillSprite (const T& color)
Description:
Parameters:
Return:
Syntax1:
void pushSprite(int32_t x, int32_t y, const T& transp)
Syntax2:
void pushSprite(LovyanGFX* dst, int32_t x, int32_t y, const T& transp)
Syntax3:
void pushSprite(int32_t x, int32_t y)
Syntax4:
void pushSprite(LovyanGFX* dst, int32_t x, int32_t y)
Description:
Parameters:
Return:
Syntax:
void deleteSprite(void)
Description:
Parameters:
Return:
サンプルプログラム
1.簡単な利用サンプル
#include <M5GFX.h>#include <M5Unified.h> static int32_t Disw;static int32_t Dish; void setup() { M5.begin(); Disw = M5.Lcd.width(); Dish = M5.Lcd.height(); M5.Lcd.fillScreen(TFT_WHITE); M5Canvas canvas(&M5.Lcd); canvas.createSprite(100, 100);//set sprite size canvas.fillSprite(TFT_PINK);//fill sprite with color XXX delay(1000); canvas.fillSprite(TFT_BLACK);//fill sprite with color XXX canvas.println("M5Canvas"); canvas.pushSprite(&M5.Lcd, Disw / 2 - 50, Dish / 2 - 50, TFT_PINK);//"&M5.Lcd" is not necessary here canvas.deleteSprite(); //In this example, PINK will not be displayed} void loop() {}
サンプルプログラムの動作例は以下の通りです:
2.複数のキャンバスを統合して描画する
#include <M5GFX.h>#include <M5Unified.h> static int32_t Disw;static int32_t Dish; void setup() { M5.begin(); Disw = M5.Lcd.width(); Dish = M5.Lcd.height(); M5.Lcd.fillScreen(TFT_WHITE); M5Canvas canvas(&M5.Lcd); M5Canvas can1(&M5.Lcd); M5Canvas can2(&M5.Lcd); canvas.createSprite(100, 100);//set sprite size canvas.fillSprite(TFT_PINK);//fill sprite with color XXX canvas.println("M5Canvas"); can1.createSprite(30, 30); can1.fillSprite(TFT_BLUE); can1.println("Can1"); can1.fillCircle(15, 15, 5, TFT_YELLOW); can2.createSprite(30, 30); can2.fillSprite(TFT_GREEN); can2.println("Can2"); can2.fillTriangle(15, 10, 0, 30, 30, 30, TFT_BLUE); canvas.pushSprite(Disw / 2 - 50, Dish / 2 - 50); can1.pushSprite(Disw / 2 - 30, Dish / 2 - 30); can2.pushSprite(Disw / 2, Dish / 2); canvas.deleteSprite(); can1.deleteSprite(); can2.deleteSprite();} void loop() {}
サンプルプログラムの動作例は以下の通りです:
Syntax1:
bool createFromBmp(const uint8_t *bmp_data, uint32_t bmp_len = ~0u)
Description:
Parameters:
Syntax2:
bool createFromBmp(T &fs, const char *path)
Description:
Parameters:
Return:
Syntax1:
bool createFromBmpFile(const char *path)
Syntax2:
bool createFromBmpFile(T &fs, const char *path)
Description:
Parameters:
Return:
このサンプルプログラムでは、FAT32形式でフォーマットされたMicroSDカードを用意し、ルートディレクトリに2つのPNG画像を配置し、それぞれLGFX_Canavs_Test01.bmp
、LGFX_Canavs_Test02.bmp
という名前を付ける必要があります。サンプルプログラムはM5Fire
デバイスをターゲットとしており、画像の解像度は320*240
です。以下のリンクから直接サンプル画像1、サンプル画像2をダウンロードできます。画像の解像度が320*240
でない場合、プログラムはプリセットに基づいて表示方法を決定し、表示の異常が発生する可能性があります。
SD.h
は<M5Unified.h>
の前に配置する必要があります。そうしないと、コンパイルに失敗します。サンプルプログラム
#include <Arduino.h>#include <SD.h>//This header file must before M5Unified.h#include <SPI.h>#include <M5GFX.h>#include <M5Unified.h> #define SD_SPI_CS_PIN 4#define SD_SPI_SCK_PIN 18#define SD_SPI_MOSI_PIN 23#define SD_SPI_MISO_PIN 19 static int32_t Disw;static int32_t Dish; void setup() { M5.begin(); Disw = M5.Lcd.width(); Dish = M5.Lcd.height(); M5.Lcd.fillScreen(TFT_BLACK); M5.Display.setTextFont(&fonts::Orbitron_Light_24); M5.Display.setTextSize(1); // SD Card Initialization SPI.begin(SD_SPI_SCK_PIN, SD_SPI_MISO_PIN, SD_SPI_MOSI_PIN, SD_SPI_CS_PIN); if (!SD.begin(SD_SPI_CS_PIN, SPI, 25000000)) { // Print a message if SD card initialization failed or if the SD card does not exist. M5.Display.print("\n SD card not detected\n"); while (1); ; } else { M5.Display.print("\n SD card detected\n"); } delay(1000); M5.Display.print("\n SD card read test...\n"); if (SD.open("/LGFX_Canavs_Test01.bmp", FILE_READ, false)) { M5.Display.print(" BMP file 01 detected\n"); } else { M5.Display.print(" BMP file 01 not detected\n"); } if (SD.open("/LGFX_Canavs_Test02.bmp", FILE_READ, false)) { M5.Display.print(" BMP file 01 detected\n"); } else { M5.Display.print(" BMP file 01 not detected\n"); } delay(2000);} void loop() { M5Canvas canvas(&M5.Lcd); if (canvas.createFromBmp(SD, "/LGFX_Canavs_Test01.bmp")) { canvas.pushSprite(0, 0); } else { M5.Display.print("\ncreateFromBmp failed\n"); } delay(1000); if (canvas.createFromBmpFile(SD, "/LGFX_Canavs_Test02.bmp")) { canvas.pushSprite(0, 0); } else { M5.Display.print("\ncreateFromBmpFile failed\n"); } delay(1000); canvas.deleteSprite();}
例プログラム効果は、2枚のピクチャを交互に表示するもので、1枚目が LGFX_Canavs_Test01.bmp
、2枚目が LGFX_Canavs_Test02.bmp
となります。
Syntax:
void setBitmapColor(uint16_t fgcolor, uint16_t bgcolor)
Description:
Parameters:
Return:
Syntax1:
void setColorDepth(uint8_t bpp)
Description:
Parameters:
Syntax2:
void* setColorDepth(color_depth_t depth)
Description:
Parameters:
bpp
、depth
は1、2、4、8ビットのみとなります。createPalette
を呼び出す前にsetColorDepth
を呼び出して色深度を設定する必要があります。そうしないとパレットの作成に失敗します。setColorDepth
でカラーデプスを 1 ビットに設定した場合、createPalette()
でパレットを作成するしかできず、createPalette(const uint16_t* colors, uint32_t count)
または createPalette(const uint32_t* colors, uint32_t count)
を使用することはできません。Return:
Syntax1:
bool createPalette(void)
Syntax2:
bool createPalette(const uint16_t* colors, uint32_t count)
Syntax3:
bool createPalette(const uint32_t* colors, uint32_t count)
Description:
Parameters:
Return:
Syntax:
void setPaletteGrayscale(void)
Description:
Parameters:
Return:
Syntax1:
void setPaletteColor(uint32_t index, uint32_t color)
Description:
Parameters:
Syntax2:
void setPaletteColor(size_t index, const bgr888_t& rgb)
Description:
Parameters:
Syntax3:
void setPaletteColor(size_t index, uint8_t r, uint8_t g, uint8_t b)
Description:
Parameters:
Return:
Syntax:
int32_t getPaletteIndex(const T& color)
Description:
Parameters:
Return:
Syntax:
void deletePalette(void)
Description:
Parameters:
Return:
サンプルプログラム
#include <M5Unified.h>#include <M5GFX.h> #define ROYAL_BLUE 0X435C#define LAVENDER_PURPLE 0xE73F#define SADDLE_BROWN 0x8A22#define INDIA_RED 0xCAEB#define FOREST_GREEN 0x2444#define SALMON_PINK 0xFC0E static int32_t Disw;static int32_t Dish;static uint16_t pale[] = {WHITE, ROYAL_BLUE, LAVENDER_PURPLE, SADDLE_BROWN, BLUE, INDIA_RED,FOREST_GREEN, SALMON_PINK};// static uint16_t pale[256]; M5Canvas canvas(&M5.Lcd); void setup() { M5.begin(); Disw = M5.Lcd.width(); Dish = M5.Lcd.height(); canvas.createSprite(Disw, Dish); canvas.setColorDepth(lgfx::v1::palette_8bit);//This must be cited before createPalette canvas.setTextDatum(top_center); canvas.drawString("M5Canvas Palette", Disw / 2, 0, &fonts::FreeMonoBold24pt7b); canvas.drawString("Palette Color 0", Disw / 2, 100, &fonts::FreeMonoBold24pt7b); canvas.drawString("is background color", Disw / 2, 150, &fonts::FreeMonoBold24pt7b); canvas.createPalette(pale, 256); // If you choose "static uint16_t pale[256];", following code must be used // canvas.setPaletteColor(0, WHITE); // canvas.setPaletteColor(1, ROYAL_BLUE); // canvas.setPaletteColor(2, LAVENDER_PURPLE); // canvas.setPaletteColor(3, SADDLE_BROWN); // canvas.setPaletteColor(4, INDIA_RED); // canvas.setPaletteColor(5, FOREST_GREEN); // canvas.setPaletteColor(6, SALMON_PINK); canvas.setTextColor(canvas.getPaletteIndex(ROYAL_BLUE)); canvas.drawString("Palette Color 1", Disw / 2, 300, &fonts::FreeMonoBold24pt7b); canvas.setTextColor(canvas.getPaletteIndex(LAVENDER_PURPLE)); canvas.drawString("Palette Color 2", Disw / 2, 350, &fonts::FreeMonoBold24pt7b); canvas.setTextColor(canvas.getPaletteIndex(SADDLE_BROWN)); canvas.drawString("Palette Color 3", Disw / 2, 400, &fonts::FreeMonoBold24pt7b); canvas.setTextColor(canvas.getPaletteIndex(INDIA_RED)); canvas.drawString("Palette Color 4", Disw / 2, 450, &fonts::FreeMonoBold24pt7b); canvas.setTextColor(canvas.getPaletteIndex(FOREST_GREEN)); canvas.drawString("Palette Color 5", Disw / 2, 500, &fonts::FreeMonoBold24pt7b); canvas.setTextColor(canvas.getPaletteIndex(SALMON_PINK)); canvas.drawString("Palette Color 6", Disw / 2, 550, &fonts::FreeMonoBold24pt7b); canvas.pushSprite(0,0); canvas.deletePalette();//must behind pushSprite() canvas.deleteSprite();} void loop() {}
サンプルプログラムの動作例は以下の通りです:
Syntax:
uint32_t readPixelValue(int32_t x, int32_t y)
Description:
Parameters:
Return:
Syntax:
void setPsram( bool enabled )
Description:
Parameters:
Return:
Syntax:
void setBuffer(void* buffer, int32_t w, int32_t h, uint8_t bpp = 0)
Description:
Parameters:
Return:
Syntax1:
void pushRotated(float angle, const T& transp)
Syntax2:
void pushRotated(LovyanGFX* dst, float angle, const T& transp)
Syntax3:
void pushRotated(float angle)
Syntax4:
void pushRotated(LovyanGFX* dst, float angle)
Description:
Parameters:
Return:
Syntax1:
void pushRotatedWithAA(float angle, const T& transp)
Syntax2:
void pushRotatedWithAA(LovyanGFX* dst, float angle, const T& transp)
Syntax3:
void pushRotatedWithAA(float angle)
Syntax4:
void pushRotatedWithAA(LovyanGFX* dst, float angle)
Description:
Parameters:
Return:
Syntax1:
void pushRotateZoom(float angle, float zoom_x, float zoom_y, const T& transp)
Syntax2:
void pushRotateZoom(LovyanGFX* dst, float angle, float zoom_x, float zoom_y, const T& transp)
Syntax3:
void pushRotateZoom(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)
Syntax4:
void pushRotateZoom(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)
Syntax5:
void pushRotateZoom(float angle, float zoom_x, float zoom_y)
Syntax6:
void pushRotateZoom(LovyanGFX* dst, float angle, float zoom_x, float zoom_y)
Syntax7:
void pushRotateZoom(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)
Syntax8:
void pushRotateZoom(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)
Description:
Parameters:
Return:
Syntax1:
void pushRotateZoomWithAA(float angle, float zoom_x, float zoom_y, const T& transp)
Syntax2:
void pushRotateZoomWithAA(LovyanGFX* dst , float angle, float zoom_x, float zoom_y, const T& transp)
Syntax3:
void pushRotateZoomWithAA(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)
Syntax4:
void pushRotateZoomWithAA(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y, const T& transp)
Syntax5:
void pushRotateZoomWithAA(float angle, float zoom_x, float zoom_y)
Syntax6:
void pushRotateZoomWithAA(LovyanGFX* dst, float angle, float zoom_x, float zoom_y)
Syntax7:
void pushRotateZoomWithAA(float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)
Syntax8:
void pushRotateZoomWithAA(LovyanGFX* dst, float dst_x, float dst_y, float angle, float zoom_x, float zoom_y)
Description:
Parameters:
Return:
Syntax1:
void pushAffine(const float matrix[6], const T& transp)
Syntax2:
void pushAffine(LovyanGFX* dst, const float matrix[6], const T& transp)
Syntax3:
void pushAffine(const float matrix[6])
Syntax4:
void pushAffine(LovyanGFX* dst, const float matrix[6])
Description:
Parameters:
Return:
Syntax1:
void pushAffineWithAA(const float matrix[6], const T& transp)
Syntax2:
void pushAffineWithAA(LovyanGFX* dst, const float matrix[6], const T& transp)
Syntax3:
void pushAffineWithAA(const float matrix[6])
Syntax4:
void pushAffineWithAA(LovyanGFX* dst, const float matrix[6])
Description:
Parameters:
Return:
サンプルプログラム
#include <M5GFX.h>#include <M5Unified.h> static int32_t Disw;static int32_t Dish;static float Affine_mat[9] = {1, 0, 60, 0, 1, 20, 0, 0, 1 }; void setup() { M5.begin(); Disw = M5.Lcd.width(); Dish = M5.Lcd.height(); M5.Lcd.fillScreen(TFT_WHITE); M5Canvas canvas(&M5.Lcd); canvas.createSprite(100, 100);//set sprite size canvas.fillSprite(TFT_BLACK);//fill sprite with color XXX canvas.pushSprite(Disw / 2 - 50, Dish / 2 - 50); delay(1000); canvas.fillSprite(TFT_PINK); // Rotate 45° canvas.pushRotated(45); // canvas.pushRotatedWithAA(45); // Rotate 90° Reduce to 80% // canvas.pushRotateZoom(90, 0.8, 0.8); // canvas.pushRotateZoomWithAA(90, 0.8, 0.8); // Shift 10 units from the origin using the affine matrix // canvas.pushAffine(Affine_mat); // canvas.pushAffineWithAA(Affine_mat); canvas.deleteSprite();} void loop() {}
サンプルプログラムの動作例は以下の通りです: