如何适配圆形UI？ST7735在可穿戴屏的实战解析-育师

如何让方形屏幕“画”出完美圆形？——ST7735在可穿戴设备中的圆盘UI实战手记

你有没有试过把手表表盘换成方形，突然觉得时间都走得不顺了？这可不是错觉。从机械钟表到Apple Watch，圆形界面早已深植于人类的视觉直觉中。它不仅是美学选择，更是佩戴舒适性与信息聚焦的工程考量。

但在嵌入式世界里，现实很骨感：市面上90%的小尺寸TFT屏，出厂就是矩形的。比如我们今天要聊的这位老朋友——ST7735，一块经典的1.8英寸彩屏驱动芯片，便宜、省电、资料多，但它的原生舞台是128×160的矩形画布。

那问题来了：怎么在这块方屏上，渲染一个丝滑自然的圆形UI？

这不是简单加个CSSborder-radius就能搞定的事。没有GPU加速，内存抠着用，每帧刷新都要走SPI发成千上万字节……稍有不慎，轻则边缘锯齿飞溅，重则动画卡成PPT。

别急。我最近在一个智能手环原型项目里，把这块“方脑子”芯片硬生生调教成了“圆艺术”，现在就把这套软硬协同的圆形适配方案毫无保留地掏出来，带你一步步避开那些坑。

ST7735不是“傻瓜屏”——先搞懂它能做什么

很多人以为ST7735只是个“传图工”，MCU算啥它就显示啥。其实不然。它虽然不带图形引擎，但寄存器配置的灵活性远超想象。

先划重点几个关键能力，这些是我们实现圆形UI的基础：

分辨率可裁剪：物理像素是128×160，但我们可以通过CASET和RASET命令，告诉它：“嘿，以后只刷中间这个区域。”
扫描方向自由旋转：靠MADCTL寄存器控制，X/Y镜像、横竖屏切换、坐标轴交换，全都能调。这点对不同安装方向的设备太友好了。
局部刷新支持：不用每次动一个小图标就刷全屏，指定矩形区域更新，带宽压力直降。
低功耗睡眠模式：SLEEP IN/OUT指令一发，屏幕黑掉但状态保持，待机电流几乎归零。

更关键的是，它支持标准RGB565格式，每个像素2字节，通过SPI传输，和STM32、ESP32这类主流MCU配合得天衣无缝。

所以你看，ST7735根本不是不能做圆形UI，而是需要你在软件层补上“图形导演”这个角色——它负责执行，你来编排。

圆形UI的本质：一场像素级的“驱逐行动”

我们面对的屏幕，本质上是一个二维数组。你想显示一个圆，就得回答一个问题：哪些像素该亮，哪些该灭？

数学上很简单：满足 $(x - cx)^2 + (y - cy)^2 \leq r^2$ 的点，在圆内；否则，滚蛋。

但在实际开发中，这个判断如果写得糙，分分钟让你的帧率从60掉到10。

举个真实案例：我最开始直接在draw_pixel()里套用上述公式，结果画个秒针转一圈，CPU占用飙到85%，还带拖影。为什么？因为每一次画点都是一次平方+比较运算，而Cortex-M4的FPU在这种小循环里根本发挥不出来。

后来我做了三件事优化：

1. 把“判刑权”收归函数入口

与其让每个像素自己去算一遍，不如提前划定“禁区”。比如画一条线，先判断两个端点是否都在圆外且同侧，如果是，整条线都不用画。

static inline uint8_t is_in_circle(int x, int y) { int dx = x - 64; int dy = y - 80; return (dx*dx + dy*dy) <= (64*64); // 预计算半径平方 }

注意：这里用的是整数运算，避免sqrt或浮点比较。而且64*64=4096可以写死，编译器会优化成常量。

2. 对高频图形预生成“通缉名单”

像钟表刻度这种固定元素，完全没必要每次重算。我建了个极坐标查找表：

typedef struct { int x, y; } point_t; point_t ticks[60]; // 60个刻度点 void init_clock_ticks() { for (int i = 0; q < 60; i++) { float rad = (i * 6) * M_PI / 180.0f; // 每6度一个 ticks[i].x = 64 + 58 * cosf(rad); ticks[i].y = 80 + 58 * sinf(rad); } }

初始化一次，终身受用。画刻度时直接遍历数组，连三角函数都省了。

3. 极坐标思维重构绘图逻辑

对于指针类动态元素，放弃直角坐标系的“起点+终点”思路，改用角度驱动：

void draw_hand(float angle_deg, int length, uint16_t color) { float rad = angle_deg * M_PI / 180.0f; int x_end = 64 + length * cosf(rad); int y_end = 80 + length * sinf(rad); // 只需判断终点是否在圆内（起点肯定是） if (is_in_circle(x_end, y_end)) { lcd_draw_line(64, 80, x_end, y_end, color); } }

你会发现，这种写法天然契合圆形结构，代码也更清晰——毕竟人看表也是看角度，不是看(x,y)坐标。

刷新效率决定用户体验——别让SPI成瓶颈

再好的算法，架不住传输慢。ST7735走SPI，典型速率10~27MHz，看起来快，但你要刷40KB的帧缓冲，那就是4ms起步，再加上MCU渲染时间，两帧之间间隔轻松破10ms。

我的设备要求指针动画流畅，意味着刷新周期必须控制在33ms以内（30fps），留给其他任务的时间所剩无几。

怎么办？局部刷新 + 差异检测，双管齐下。

局部刷新：只动“作案现场”

ST7735支持通过CASET和RASET设置窗口，然后往里面写数据。例如，秒针一般只在中心区域活动，我们可以只刷新一个80×80的中心区：

void lcd_set_window(uint8_t x0, uint8_t y0, uint8_t x1, uint8_t y1) { spi_write_cmd(0x2A); // CASET spi_write_data(x0); spi_write_data(x1); spi_write_cmd(0x2B); // RASET spi_write_data(y0); spi_write_data(y1); spi_write_cmd(0x2C); // RAMWR }

调用前设置好窗口，后续所有RAMWR数据都会自动映射到该区域。实测下来，刷新面积减少60%，SPI传输时间从3.8ms降到1.5ms。

差异检测：只传“变化的部分”

更进一步，我们连局部区域都不全刷。维护一个“前帧缓存”（哪怕只有几行），每次更新前对比，只发送发生变化的行或区块。

当然，全帧缓存40KB对很多MCU来说太奢侈。我的方案是：按扇区分块管理。

把屏幕切成8个45°扇区，每个扇区记录最后绘制的时间戳。当某个指针移动时，只标记受影响的1~2个扇区为“脏”，下次刷新时仅处理这些区块。

这样既避免了全屏刷，又不用存完整帧，内存开销控制在几百字节级别。

实战避坑指南：那些手册不会告诉你的事

坑1：你以为的“圆心”，其实是偏心

ST7735模组的可视区域和物理像素并不完全对齐。我用的这块1.8寸屏，标称128×160，但实际有效显示区上下各少了2行，左右对称。如果不校准，圆心放在(64,80)，视觉上会明显下沉。

解决办法：用测试图案微调。画一个参考圆，拍照放大看边缘间隙，反复调整cy值直到上下左右留黑均匀。最终我发现，真正的视觉中心是(64, 78)。

坑2：颜色发灰？检查Gamma设置

ST7735内置Gamma校正寄存器（GAMCTRP1,GAMCTRN1等）。出厂默认曲线可能不适合你的背光亮度。表现就是灰色过渡不平滑，暗色发紫。

建议：根据面板型号查找推荐Gamma值，或用灰阶图手动调试。哪怕只是微调几个参数，观感提升立竿见影。

坑3：启动花屏？初始化顺序不能乱

网上很多例程初始化代码东拼西凑，导致偶尔花屏或无法点亮。严格按照数据手册时序来：

Reset → Sleep Out → Delay 150ms → Frame Rate → Color Mode → MADCTL → Display On

尤其是Sleep Out后必须延时足够长（≥120ms），等内部电荷泵稳定。我曾因省了这一步，量产时10%的板子点不亮。

功耗优化：让电池撑得更久一点

可穿戴设备的核心指标不是性能，是续航。

除了前面提到的局部刷新降低动态功耗，还有两个杀手锏：

空闲时进入Sleep模式
用户不看表时，关闭背光，发SLEEP IN指令。ST7735此时电流<0.1μA。配合MCU进入Stop模式，整机待机电流压到5μA以下完全可行。
动态刷新率调节
时间静止时（如夜间），把UI更新频率从30fps降到1fps；检测到抬腕动作再恢复。这一招能让平均功耗再降40%。