关于 M5Canvas

M5Canvas 的使用方式基本上与 TFT_eSPI 的 Sprite 相同. 我们之所以可以称它为 M5Canvas，是因为它在从内存上绘图的角度来看，称它为 "Canvas "是合适的, 而不是M5GFX中定义的 "Sprite"（然而，为了与TFT_eSprite兼容，pushSprite等方法仍然保留).

本文件将向你简要介绍如何使用它,关于详细的API信息,请参考 这里 .

Canvas 的优势

• 它可以提前在内存中绘制，并一次性显示在面板上，以便快速显示。

• 对显示小字符等很有用。

• 可以使用透明的颜色来提供重叠。

• 在显示屏上绘图时，可以进行缩放、旋转和抗锯齿。

构造函数

语法:

• 没有参数.
  注意，如果没有指定参数，必须在推送或绘制时指定，否则会出现问题。

M5Canvas()

• 针对 M5GFX.
  如果M5GFX被指定为一个参数，它将默认绘制到M5GFX设备。

M5Canvas(M5GFX&)

• 针对 M5Canvas.
  如果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");

    // 在面边上绘制实际上只用到了下列函数
    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);

    // 在面边上绘制实际上只用到了下列函数
    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");

    // 在面边上绘制实际上只用到了下列函数
    display.startWrite();
    display.println("Display");
    canvas.pushSprite(&display, x, y);
    display.endWrite();
}

void loop() {
}

透明颜色

如果指定了一个透明的颜色，该颜色就可以变成透明的。

如果你在第二个例子中指定蓝色作为透明度颜色，在 How to Use , 蓝色区域变成透明，背景变成粉红色。

#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);

    // 在面边上绘制实际上只用到了下列函数
    display.startWrite();
    display.println("Display");
    canvas.pushSprite(x, y);
    display.endWrite();
}

void loop() {
}

RotateZoom

#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);

    // 在面边上绘制实际上只用到了下列函数
    canvas1.pushRotateZoom(count * 0.5f, 1.0, 1.0);
    if (scale > 1.0f) scale = 0.0f;
}

Advanced Examples

M5GFX + OLEDUnit

#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;
}