M5Canvasについて

M5Canvasは基本的にTFT_eSPIのSpriteと同一です。メモリ上に描くという機能から考えてM5GFXではSpriteではなくCanvasという名称を利用しています。（しかし、TFT-eSPIとの互換性も考慮し、pushSpriteのようなメソッド名は残っています。）

このドキュメントはM5Canvasを簡単に利用できる説明をします。詳細なAPIドキュメントについては こちら を参照してください。

キャンバスを使用する利点

• メモリに描き、一気にディスプレイにデータを転送するため速く描画することが可能です。

• 小さいキャラクタやオブジェクトを描く場合に便利です。

• 透明色を利用して重ね合わせを利用することが可能です。

• キャンバスからディスプレイに描画する際に、拡大縮小・回転・アンチエイリアスといった変換処理を行うことが可能です。

コンストラクタ

Syntax:

• 引数なし
  引数を省略した場合は、Canvasをpushや描画する際に描画先を指定しないと再起動します。

M5Canvas()

• M5GFXを指定する。
  コンストラクタ引数にM5GFXを指定した場合、デフォルトの描画先がM5GFXになります。

M5Canvas(M5GFX&)

• M5Canvasを指定する。
  M5Canvas間で親子関係を持った描画も可能です。

M5Canvas(M5Canvas&)

使い方

• 1.簡単な利用サンプル

#include <Arduino.h>
#include <M5GFX.h>

M5GFX display;
M5Canvas canvas(&display);

int32_t x;
int32_t y;

void setup()
{
  display.begin();
  display.fillScreen(TFT_BLACK);
  
  x = display.width() / 2;
  y = display.height() / 2;
  canvas.createSprite(50, 50);
  canvas.fillSprite(TFT_PINK);
  canvas.fillRect(10, 10, 20, 20, TFT_RED);
  canvas.println("M5Canvas");

  // Only the following process is actually drawn on the panel.
  display.startWrite(); 
  display.println("Display");
  canvas.pushSprite(x, y);
  display.endWrite();
}


void loop()
{
}

• 2.複数のCanvasを組み合わせた例
  Canvasを別のCanvasに描画することも可能です。

include <Arduino.h>
#include <M5GFX.h>

M5GFX display;
M5Canvas canvas(&display);
M5Canvas sub_canvas1(&canvas);
M5Canvas sub_canvas2(&canvas);

int32_t x;
int32_t y;

void setup()
{
  display.begin();
  display.fillScreen(TFT_BLACK);
  
  x = display.width() / 2;
  y = display.height() / 2;
  canvas.createSprite(80, 80);
  canvas.fillSprite(TFT_PINK);
  canvas.fillRect(10, 10, 10, 10, TFT_RED);
  canvas.println("M5Canvas");

  sub_canvas1.createSprite(30, 30);
  sub_canvas1.fillSprite(TFT_BLUE);
  sub_canvas1.println("sub1");
  sub_canvas1.fillCircle(15, 15, 5, TFT_YELLOW);
  sub_canvas2.createSprite(30, 30);
  sub_canvas2.fillSprite(TFT_GREEN);
  sub_canvas2.println("sub2");
  sub_canvas2.fillTriangle(15, 10, 0, 30, 30, 30, TFT_BLUE);

  sub_canvas1.pushSprite(5, 30);
  sub_canvas2.pushSprite(40, 30);  

  // Only the following process is actually drawn on the panel.
  display.startWrite();
  display.println("Display");
  canvas.pushSprite(x, y);
  display.endWrite();
}


void loop()
{
}

• 3.コンストラクタ引数を省略した場合

#include <Arduino.h>
#include <M5GFX.h>

M5GFX display;
M5Canvas canvas;

int32_t x;
int32_t y;

void setup()
{
  display.begin();
  display.fillScreen(TFT_BLACK);
  
  x = display.width() / 2;
  y = display.height() / 2;
  canvas.createSprite(50, 50);
  canvas.fillSprite(TFT_PINK);
  canvas.fillRect(10, 10, 20, 20, TFT_RED);
  canvas.println("M5Canvas");

  // Only the following process is actually drawn on the panel.
  display.startWrite();
  display.println("Display");
  canvas.pushSprite(&display, x, y);
  display.endWrite();
}

void loop()
{
}

透明色

透明色を指定した場合、pushする際にその色は描画されず元々描かれた色が表示されます。重ね合わせた時に透明になるイメージです。

使い方 の２番目のサンプルで透明色に青を指定した場合、青色は透過して背景のピンクになります。

#include <Arduino.h>
#include <M5GFX.h>

M5GFX display;
M5Canvas canvas(&display);
M5Canvas sub_canvas1(&canvas);
M5Canvas sub_canvas2(&canvas);

int32_t x;
int32_t y;

void setup()
{
  display.begin();
  display.fillScreen(TFT_BLACK);
  
  x = display.width() / 2;
  y = display.height() / 2;
  canvas.createSprite(80, 80);
  canvas.fillSprite(TFT_PINK);
  canvas.fillRect(10, 10, 10, 10, TFT_RED);
  canvas.println("M5Canvas");

  // Draw on a small canvas 1.
  sub_canvas1.createSprite(30, 30);
  sub_canvas1.fillSprite(TFT_BLUE);
  sub_canvas1.println("sub1");
  sub_canvas1.fillCircle(15, 15, 5, TFT_YELLOW);

  // Draw on a small canvas 2.
  sub_canvas2.createSprite(30, 30);
  sub_canvas2.fillSprite(TFT_GREEN);
  sub_canvas2.println("sub2");
  sub_canvas2.fillTriangle(15, 10, 0, 30, 30, 30, TFT_BLUE);

  // Draw two smaller canvases on the canvas.
  sub_canvas1.pushSprite(5, 30, TFT_BLUE);
  sub_canvas2.pushSprite(40, 30, TFT_BLUE);  

  // Only the following process is actually drawn on the panel.
  display.startWrite();
  display.println("Display");
  canvas.pushSprite(x, y);
  display.endWrite();
}


void loop()
{
}

拡大縮小と回転

#include <Arduino.h>
#include <M5GFX.h>

static M5GFX display;
static M5Canvas canvas1(&display);
static M5Canvas canvas2(&canvas1);
static int32_t width = 100;
static size_t count = 0;

void setup(void)
{
  display.init();
  display.fillScreen(TFT_RED);
  width = std::min(width, (std::max(display.width(), display.height())+10)) | 1;
  canvas1.setColorDepth(8);
  canvas1.createSprite(width + 30, width + 30);
  canvas1.fillSprite(TFT_RED);
  canvas2.setColorDepth(8);
  canvas2.createSprite(width, width);
  canvas2.fillSprite(TFT_RED);
  canvas2.fillRect(0, width>>1, width>>1, width>>1, TFT_BLUE);

}

float scale = 0.0f;

void loop(void)
{
  ++count;
  canvas1.fillSprite(TFT_RED);
  scale += 0.01f;
  canvas2.pushRotateZoom(0, scale, scale);

  // Only the following process is actually drawn on the panel.
  canvas1.pushRotateZoom(count * 0.5f, 1.0, 1.0);
  if (scale > 1.0f) scale = 0.0f;
}

より高度な例

M5GFX + OLEDUnit

OLEDUnitを接続して、M5デバイスとOLEDの両方に表示をするサンプルです。

#include <Arduino.h>
#include <M5GFX.h>
#include <M5UnitOLED.h>

static M5GFX display;
static M5UnitOLED oled;

static M5Canvas canvas1(&display);
static M5Canvas canvas2(&canvas1);
static int32_t width = 100;
static size_t count = 0;

void setup(void)
{
  display.init();
  oled.init();
  display.fillScreen(TFT_RED);
  width = std::min(width, (std::max(display.width(), display.height())+10)) | 1;
  canvas1.setColorDepth(8);
  canvas1.createSprite(width + 30, width + 30);
  canvas1.fillSprite(TFT_RED);
  canvas2.setColorDepth(8);
  canvas2.createSprite(width, width);
  canvas2.fillSprite(TFT_RED);
  canvas2.fillRect(0, width>>1, width>>1, width>>1, TFT_BLUE);
}

float scale = 0.0f;

void loop(void)
{
  ++count;
  canvas1.fillSprite(TFT_RED);
  scale += 0.01f;
  canvas2.pushRotateZoom(0, scale, scale);
  canvas1.pushRotateZoom(count * 0.5f, 1.0, 1.0);
  canvas1.pushRotateZoom(&oled, count * 0.5f, 1.0, 1.0);
  if (scale > 1.0f) scale = 0.0f;
}