【花雕学编程】Arduino动手做（199）---ESP32 LCD12864屏之绘制递减边长的同心填充三角形- Makelog(造物记)

【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）
实验一百九十九：蓝屏LCD12864液晶屏带中文字库带背光12864-5V 并口串口
项目之十：ESP32 ST7920屏幕之之绘制递减边长的同心填充三角形

实验开源代码

代码

/*
  【Arduino】168种传感器模块系列实验（资料代码+仿真编程+图形编程）
  实验一百九十九：蓝屏LCD12864液晶屏 带中文字库 带背光12864-5V 并口串口
  项目之十：ESP32  ST7920屏幕之之绘制递减边长的同心填充三角形
*/

#include <Arduino.h>
#include <U8g2lib.h>
#include <SPI.h>

// 使用软件 SPI 适配 ESP32
U8G2_ST7920_128X64_F_SW_SPI u8g2(U8G2_R0, /* Clock=*/ 18, /* Data=*/ 23, /* CS=*/ 16, /* Reset=*/ 17);

int sideLength = 60;  // **初始三角形边长**
int minLength = 10;   // **最小边长**
int step = 2;         // **每次缩小的间隔**
int centerX = 64;     // **屏幕中心 X**
int centerY = 32;     // **屏幕中心 Y**

void setup() {
  Serial.begin(115200);
  u8g2.begin();
  u8g2.setPowerSave(0);  // **关闭省电模式**
  u8g2.setContrast(200); // **提高对比度**
  u8g2.setDisplayRotation(U8G2_R2);  // **旋转 180 度**
}

void loop() {
  u8g2.firstPage();
  do {
    int s = sideLength;
    while (s >= minLength) {
      int x1 = centerX - s / 2;
      int y1 = centerY + s / 2;
      int x2 = centerX + s / 2;
      int y2 = centerY + s / 2;
      int x3 = centerX;
      int y3 = centerY - s / 2;

      u8g2.drawTriangle(x1, y1, x2, y2, x3, y3);  // **绘制空心三角形**
      s -= step;  // **缩小边长**
    }
  } while (u8g2.nextPage());

  sideLength -= step;  // **每次递减边长**

  // **如果缩小到最小值，重新开始**
  if (sideLength < minLength) {
    sideLength = 60;
  }

  delay(100);  //**每0.1秒刷新一次**
}

代码简单解读

这段代码在 ST7920 LCD 屏幕上实现了同心空心三角形绘制，核心逻辑如下：

1. 初始化
✅ u8g2.begin(); → 启动 ST7920 屏幕
✅ u8g2.setPowerSave(0); → 确保屏幕不会休眠
✅ u8g2.setContrast(200); → 提高对比度，让图形更清晰
✅ u8g2.setDisplayRotation(U8G2_R2); → 让屏幕旋转 180 度

2. 递减绘制三角形
✅ sideLength -= step; → 让三角形尺寸逐渐缩小
✅ while (s >= minLength) → 保证三角形不小于设定的最小值
✅ if (sideLength < minLength) sideLength = 60; → 到最小尺寸后重置为最大

3. 计算三角形坐标
✅ 计算三角形顶点：

x1 = centerX - s / 2;, y1 = centerY + s / 2; → 左下角顶点

x2 = centerX + s / 2;, y2 = centerY + s / 2; → 右下角顶点

x3 = centerX;, y3 = centerY - s / 2; → 上方顶点
✅ drawTriangle(x1, y1, x2, y2, x3, y3); → 使用 U8g2 API 绘制空心三角形

4. 画面刷新
✅ delay(500); → 每 500 毫秒更新一次显示
✅ firstPage(); do { ... } while (nextPage()); → 保证绘制流畅，无闪烁

这段代码让 ST7920 屏幕不断绘制同心空心三角形，从大到小循环展示

实验场景图动态图

【花雕学编程】Arduino动手做（199）---ESP32 LCD12864屏之绘制递减边长的同心填充三角形 简单

【花雕学编程】Arduino动手做（199）---ESP32 LCD12864屏之绘制递减边长的同心填充三角形简单