跳转至

显示屏 — 基础图形

M5GFX 源码： lgfx/v1/LGFXBase.hpp
返回： 显示屏概览

所有图形使用 setColor() 设置的颜色绘制。每个 draw 方法都有对应的 fill 版本，并且接受一个显式 color 作为最后一个参数的重载。

drawPixel()

void drawPixel(int32_t x, int32_t y);
void drawPixel(int32_t x, int32_t y, uint16_t color);

绘制单个像素。

参数 类型 说明
x int32_t X 坐标
y int32_t Y 坐标
color（可选） uint16_t 覆盖当前颜色 
// 使用当前颜色
M5Cardputer.Display.setColor(TFT_RED);
M5Cardputer.Display.drawPixel(100, 50);

// 显式颜色
M5Cardputer.Display.drawPixel(100, 51, TFT_GREEN);

// 随机散布
for (int i = 0; i < 500; i++) {
    int x = random(320);
    int y = random(240);
    M5Cardputer.Display.drawPixel(x, y, TFT_WHITE);
}

drawLine()

void drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1);
void drawLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint16_t color);

在两点之间绘制直线。

参数 类型 说明
x0, y0 int32_t 起点
x1, y1 int32_t 终点
color（可选） uint16_t 线条颜色 
// 十字准星
int cx = 160, cy = 120;
M5Cardputer.Display.drawLine(cx - 30, cy, cx + 30, cy, TFT_RED);
M5Cardputer.Display.drawLine(cx, cy - 30, cx, cy + 30, TFT_RED);

drawFastHLine() / drawFastVLine()

void drawFastHLine(int32_t x, int32_t y, int32_t w);
void drawFastVLine(int32_t x, int32_t y, int32_t h);

优化的水平或竖直线。不支持斜线 — 斜线请用 drawLine()。

参数 类型 说明
x, y int32_t 起点
w / h int32_t 水平宽度 / 垂直高度 
// 网格线
for (int i = 0; i < 320; i += 40)
    M5Cardputer.Display.drawFastVLine(i, 0, 240, TFT_DARKGREY);
for (int i = 0; i < 240; i += 40)
    M5Cardputer.Display.drawFastHLine(0, i, 320, TFT_DARKGREY);

drawRect() / fillRect()

void drawRect(int32_t x, int32_t y, int32_t w, int32_t h);
void drawRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t color);

void fillRect(int32_t x, int32_t y, int32_t w, int32_t h);
void fillRect(int32_t x, int32_t y, int32_t w, int32_t h, uint16_t color);

矩形边框或实心矩形。

参数 类型 说明
x, y int32_t 左上角
w int32_t 宽度（像素）
h int32_t 高度（像素） 
// 按钮控件
M5Cardputer.Display.fillRoundRect(60, 90, 200, 60, 12, TFT_BLUE);
M5Cardputer.Display.drawRoundRect(60, 90, 200, 60, 12, TFT_WHITE);
M5Cardputer.Display.drawCenterString("点我", 160, 105);

drawRoundRect() / fillRoundRect()

void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r);
void drawRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint16_t color);

void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r);
void fillRoundRect(int32_t x, int32_t y, int32_t w, int32_t h, int32_t r, uint16_t color);

圆角矩形。

参数 类型 说明
r int32_t 圆角半径 
// 圆角面板
M5Cardputer.Display.fillRoundRect(10, 10, 300, 50, 10, TFT_NAVY);

drawCircle() / fillCircle()

void drawCircle(int32_t x, int32_t y, int32_t r);
void drawCircle(int32_t x, int32_t y, int32_t r, uint16_t color);

void fillCircle(int32_t x, int32_t y, int32_t r);
void fillCircle(int32_t x, int32_t y, int32_t r, uint16_t color);
参数 类型 说明
x, y int32_t 圆心
r int32_t 半径 
// 红绿灯
M5Cardputer.Display.fillCircle(50, 50, 20, TFT_RED);
M5Cardputer.Display.fillCircle(50, 100, 20, TFT_YELLOW);
M5Cardputer.Display.fillCircle(50, 150, 20, TFT_GREEN);
M5Cardputer.Display.drawRect(25, 25, 50, 150, TFT_DARKGREY);

drawEllipse() / fillEllipse()

void drawEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry);
void drawEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry, uint16_t color);

void fillEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry);
void fillEllipse(int32_t x, int32_t y, int32_t rx, int32_t ry, uint16_t color);
参数 类型 说明
x, y int32_t 中心
rx int32_t 水平半径
ry int32_t 垂直半径 
// 眼睛
M5Cardputer.Display.fillEllipse(100, 100, 30, 15, TFT_CYAN);
M5Cardputer.Display.fillEllipse(200, 100, 30, 15, TFT_CYAN);
M5Cardputer.Display.fillCircle(100, 100, 8, TFT_WHITE);
M5Cardputer.Display.fillCircle(200, 100, 8, TFT_WHITE);

drawTriangle() / fillTriangle()

void drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2);
void drawTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint16_t color);

void fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2);
void fillTriangle(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint16_t color);
参数 类型 说明
x0,y0 至 x2,y2 int32_t 三个顶点 
// 播放按钮三角形
M5Cardputer.Display.fillTriangle(140, 90, 140, 150, 190, 120, TFT_GREEN);

drawArc() / fillArc()

void drawArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1);
void drawArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1, uint16_t color);

void fillArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1);
void fillArc(int32_t x, int32_t y, int32_t r0, int32_t r1, float angle0, float angle1, uint16_t color);

内半径 r0 到外半径 r1、从角度 angle0 到 angle1（度）的弧形。

参数 类型 说明
x, y int32_t 中心
r0 int32_t 内半径
r1 int32_t 外半径
angle0 float 起始角度（度）
angle1 float 结束角度（度） 
// 半圆仪表（0 到 180 度）
M5Cardputer.Display.fillArc(160, 120, 40, 60, 0, 180, TFT_CYAN);

// 细弧线（r0 == r1）
M5Cardputer.Display.drawArc(160, 120, 65, 65, 0, 270, TFT_YELLOW);

drawBezier() — 二次贝塞尔

void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2);
void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1, int32_t x2, int32_t y2, uint16_t color);

二次贝塞尔曲线（一个控制点）。

参数 类型 说明
x0,y0 int32_t 起点
x1,y1 int32_t 控制点
x2,y2 int32_t 终点 
// S 曲线
M5Cardputer.Display.drawBezier(50, 120, 160, 30, 270, 120, TFT_MAGENTA);

drawBezier() — 三次贝塞尔

void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1,
                int32_t x2, int32_t y2, int32_t x3, int32_t y3);
void drawBezier(int32_t x0, int32_t y0, int32_t x1, int32_t y1,
                int32_t x2, int32_t y2, int32_t x3, int32_t y3, uint16_t color);

三次贝塞尔曲线（两个控制点）。

// 平滑波浪
M5Cardputer.Display.drawBezier(10, 120, 80, 30, 240, 210, 310, 120, TFT_YELLOW);

drawSmoothLine()

void drawSmoothLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, uint16_t color);

抗锯齿平滑线（Wu 算法）。

M5Cardputer.Display.drawSmoothLine(20, 20, 300, 220, TFT_WHITE);

drawWideLine()

void drawWideLine(int32_t x0, int32_t y0, int32_t x1, int32_t y1, float r, uint16_t color);

指定宽度（半径）的线条。

参数 类型 说明
r float 线半宽（像素） 
M5Cardputer.Display.drawWideLine(10, 50, 310, 200, 5.0f, TFT_BLUE);

drawSpot()

void drawSpot(int32_t x, int32_t y, float r, uint16_t color);

柔光斑点（径向渐变衰减）。

// 发光光标
M5Cardputer.Display.drawSpot(x, y, 12.0f, TFT_CYAN);

floodFill()

void floodFill(int32_t x, int32_t y);
void floodFill(int32_t x, int32_t y, uint16_t color);

从 (x, y) 开始填充封闭区域，替换连续的同色像素。

// 先画轮廓，再填充内部
M5Cardputer.Display.drawCircle(100, 100, 40, TFT_GREEN);
M5Cardputer.Display.floodFill(100, 100, TFT_GREEN);