pdf-icon

关于 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;
}
On This Page