Arduino 上手教程
2. 设备开发 & 案例程序
3. M5Unified
5. 拓展模块 & 案例
Atom DTU
Hat
关于 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.简单运用
cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
#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 上.
cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
#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.如果省略某些参数.
cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
#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, 蓝色区域变成透明，背景变成粉红色。
cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
#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
cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
#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
cpp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
#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;}