1. 为什么默认的 lv_arc 总有一股“工程师审美”的味道做过嵌入式 UI 的人大概都有同感LVGL 的控件功能没得说轻量、稳定、移植方便但默认样式一放上屏总有一种“能用但不好看”的朴素感。尤其是lv_arc这个控件默认状态下就是一条灰扑扑的弧线加一个方块指示器放在智能家居面板、车载中控、工业 HMI 上怎么看都像是调试阶段的半成品。我做过的几个量产项目里圆弧控件几乎无处不在——音量调节、温度设定、进度展示、仪表盘转速表客户第一眼看的往往不是功能而是“这个圆环好不好看”。lv_arc是 LVGL 里专门用来画圆弧/环形进度的控件支持设置起始角度、结束角度、当前值范围、背景弧、前景弧、指示器knob等。它的本质是一个带角度约束的进度条但因为形状是弧视觉表现力比普通 bar 强很多。问题在于默认样式只给了最基础的几何形状颜色、圆角、阴影、渐变、动画全都要自己配。很多人卡在这一步知道要改样式但不知道从哪个属性下手改完发现弧线粗细不对、圆角没生效、指示器位置偏了最后干脆放弃继续用默认样式。这篇内容就是把我这几年在 STM32、FreeRTOS、LVGL 9.x 模拟器上反复折腾lv_arc的经验整理出来。适合已经能把 LVGL 跑起来、但被默认样式劝退的嵌入式开发者也适合正在做智能面板、仪表盘、穿戴设备 UI 的同行。下面这 5 个技巧从最基础的弧线粗细和圆角到渐变、阴影、动画、多弧叠加每一个都能直接抄到项目里用。我会把参数怎么算、为什么这么设、踩过哪些坑都讲清楚尽量让你少走弯路。2. 技巧一先把弧线粗细和圆角调对这是高级感的地基2.1 默认弧线为什么看起来“廉价”LVGL 的lv_arc默认样式里弧线的宽度由arc_width控制默认值通常是 10 左右圆角由rounded控制默认是 0。也就是说默认状态下你看到的是一条直角边缘的粗弧线两端是平的像用矩形笔刷画出来的。这种几何感在工业设备上勉强能用但放到消费级产品上就显得生硬。高级感的第一个来源就是“圆润”——弧线两端要有圆角弧线本身要有合适的粗细比例不能太细像头发丝也不能太粗像甜甜圈。我一般会先确定整个圆弧控件的直径然后按比例反推弧线宽度。经验公式是弧线宽度 ≈ 控件直径的 8% 到 12%。比如一个 200x200 的圆弧弧线宽度设在 16 到 24 之间比较舒服。如果控件只有 80x80弧线宽度就别超过 10否则中间的可视区域会被挤没。这个比例不是死规定但偏离太多就会显得头重脚轻。2.2 圆角设置的正确姿势圆角在 LVGL 里通过lv_obj_set_style_arc_rounded(obj, true, LV_PART_MAIN)来开启注意要分别对背景弧LV_PART_MAIN和前景弧LV_PART_INDICATOR设置。很多人只设了前景弧结果背景弧还是直角视觉上不统一。我的习惯是两边都开圆角这样即使前景弧没走到头背景弧的端点也是圆的整体更协调。这里有个细节圆角开启后弧线的实际视觉长度会略微缩短因为圆角是在端点处“收”进去的。如果你对进度精度要求很高比如做仪表盘刻度需要把角度范围稍微放大一点来补偿。实测下来圆角半径等于弧线宽度的一半时视觉补偿量大约在 1 到 2 度之间一般项目可以忽略但做精密仪表时要注意。2.3 弧线宽度与指示器的联动指示器knob是圆弧上那个跟着进度走的小圆点或小方块。默认指示器是一个矩形尺寸由lv_obj_set_style_bg_img_src或者直接设width/height控制。很多人把弧线调粗了指示器还是默认大小结果指示器陷在弧线里像一颗嵌进去的珠子很难看。正确的做法是指示器直径略大于弧线宽度一般取弧线宽度的 1.2 到 1.5 倍。比如弧线宽 20指示器直径设 26 到 30这样指示器会微微凸出弧线有立体感。指示器的圆角也要设直接lv_obj_set_style_radius(obj, LV_RADIUS_CIRCLE, LV_PART_KNOB)就能变成正圆。如果你想要方形指示器圆角设成弧线宽度的一半左右看起来像圆角矩形也很精致。我试过把指示器做成和背景同色、只留一圈边框效果很干净适合极简风格的面板。注意LVGL 9.x 里部分样式 API 和 8.x 有差异比如lv_obj_set_style_arc_width在 9.x 里参数顺序和枚举名可能微调移植代码时先查一下对应版本的头文件别直接照搬旧教程。3. 技巧二用渐变色打破单调让圆弧有光影层次3.1 单色弧线的问题在哪默认弧线是单色的前景弧一个颜色背景弧一个颜色。单色不是不能用但缺乏层次尤其在深色背景上一条纯色弧线会显得很“平”像贴纸一样浮在屏幕上。高级感的第二个来源是“光影”——让弧线有从亮到暗、从冷到暖的过渡视觉上就会产生体积感。LVGL 支持线性渐变lv_grad_dir和颜色断点lv_obj_set_style_arc_color配合渐变虽然不如 CSS 那么灵活但做圆弧渐变足够了。3.2 渐变方向与角度匹配lv_arc的渐变方向有水平、垂直、对角等几种。对于圆弧控件我一般用垂直渐变或者对角渐变因为圆弧本身是环绕的水平渐变在左右两端会显得突兀。垂直渐变从上到下由亮到暗模拟顶部受光的效果适合大多数面板。对角渐变从左上到右下适合有明确光源方向的场景比如车载中控通常假设光从上方来。设置的时候要注意渐变是作用在整个弧线区域上的不是沿着弧线路径渐变。也就是说如果你设了垂直渐变弧线顶部和底部的颜色不同但同一水平线上的颜色是一样的。这个效果对于圆弧来说已经够用了如果你想要沿着弧线路径的渐变比如从起点到终点颜色变化LVGL 原生不支持需要用多个弧线拼接或者自己画。我试过用两个半弧拼一个渐变环效果不错但代码复杂度上去了一般项目没必要。3.3 配色方案与对比度控制渐变配色我一般遵循“同色系深浅搭配”或者“邻近色过渡”。同色系比如深蓝到浅蓝安全不出错邻近色比如蓝到紫更有科技感。避免红绿这种对比色渐变除非是做警示类 UI否则容易显得土。背景弧的颜色要比前景弧暗 2 到 3 个档次这样前景弧才会“跳”出来。如果背景弧太亮整个圆弧会显得糊在一起。对比度方面前景弧和背景弧的亮度差建议在 30% 以上。你可以用在线对比度工具算一下或者凭感觉调——把屏幕亮度调到最低如果还能一眼分清前景和背景就说明对比度够了。我做穿戴设备时经常在强光下测试对比度不够的圆弧在户外基本看不清这个坑踩过一次就记住了。配色风格前景弧背景弧适用场景科技蓝#00A8FF 到 #0066CC#1A2A3A智能家居、工控活力橙#FF8C00 到 #FF4500#2A1A0A运动设备、车载极简灰#E0E0E0 到 #A0A0A0#2A2A2A穿戴、医疗自然绿#4CAF50 到 #2E7D32#1A2A1A环保监测、农业4. 技巧三阴影和光晕是提升质感的捷径4.1 阴影参数怎么调才不脏LVGL 支持给对象加阴影lv_obj_set_style_shadow_width、shadow_color、shadow_ofs_x/y、shadow_spread。给圆弧加阴影要克制阴影太大会显得脏太小又没效果。我的经验是阴影宽度取弧线宽度的 1 到 2 倍透明度opa控制在 60 到 120 之间偏移量设为 0 到 4。偏移量为 0 时是均匀光晕适合发光效果偏移量非 0 时是方向性阴影适合模拟立体感。阴影颜色不要用纯黑用前景弧的深色版本或者背景色的深色版本。比如前景弧是蓝色阴影就用深蓝这样光晕和弧线是同一色系看起来更自然。纯黑阴影在深色背景上几乎看不见在浅色背景上又太突兀属于两头不讨好。4.2 光晕效果与呼吸灯结合光晕其实就是偏移量为 0、扩散较大的阴影。做呼吸灯效果时可以让阴影宽度随时间变化配合lv_anim做动画。我做过一个智能音箱的圆弧音量条前景弧是青色阴影是青色光晕呼吸时阴影宽度在 10 到 30 之间循环看起来像在发光客户很满意。实现上就是给shadow_width加一个动画LVGL 的动画系统支持对样式属性做插值很方便。注意阴影会显著增加渲染负担尤其是在低端 MCU 上。STM32F103 这类没有硬件加速的芯片大面积阴影可能导致刷新率下降。建议在性能允许的范围内使用或者只在静态时显示阴影动画时关闭。4.3 阴影与圆角的配合阴影是沿着对象轮廓渲染的所以圆角开启后阴影也会跟着变圆。如果你发现阴影边缘有锯齿可以适当增大shadow_spread让阴影更柔和。另外阴影的渲染顺序在弧线之下所以不会遮挡弧线本身这个可以放心。我试过给指示器单独加阴影效果也不错指示器像浮在弧线上一样但要注意指示器阴影不要盖住弧线偏移量往弧线外侧调。5. 技巧四动画让圆弧“活”起来但别过度5.1 值变化的动画曲线选择lv_arc的值变化默认是瞬间跳变的看起来很生硬。加动画很简单用lv_anim对value属性做插值就行。关键是动画曲线lv_anim_path的选择。线性曲线lv_anim_path_linear适合进度条匀速变化缓入缓出lv_anim_path_ease_in_out适合交互反馈比如用户调节音量时圆弧先慢后快再慢手感更好回弹曲线lv_anim_path_overshoot适合强调变化比如温度超标时圆弧“弹”一下有警示效果。我一般交互类用ease_out数据展示类用linear警示类用overshoot。动画时长控制在 200 到 500 毫秒之间太短看不清太长显得拖沓。如果是实时数据刷新比如传感器读数动画时长要更短100 到 200 毫秒否则数据更新跟不上动画会卡顿。5.2 指示器的跟随动画指示器默认是跟着值走的但如果你只对值做动画指示器会跟着动这没问题。但如果你想让指示器有额外的“延迟跟随”效果比如弧线先走指示器稍后跟上就需要单独对指示器的位置做动画。LVGL 里指示器的位置是由弧线值决定的不能直接动画位置但可以通过动画一个中间变量然后在回调里更新指示器样式来模拟。这个技巧比较进阶一般项目用默认跟随就够了。5.3 动画性能与刷新率动画会触发重绘重绘区域越大性能消耗越高。圆弧控件的重绘区域是整个圆弧包围盒所以动画时整个圆弧都在重绘。在 STM32F4 这类带 DMA2D 的芯片上问题不大但在 F1 或者更低端的芯片上建议缩小圆弧尺寸或者降低动画帧率。LVGL 的动画帧率由LV_DEF_REFR_PERIOD控制默认 30ms 一帧改成 50ms 可以降低 CPU 占用但动画会稍微卡顿。我一般根据芯片性能在 20 到 50 之间调。芯片平台建议刷新周期动画时长阴影使用STM32F10350ms300-500ms慎用STM32F40730ms200-400ms可用STM32H716ms150-300ms推荐PC 模拟器16ms任意随意6. 技巧五多弧叠加与自定义绘制突破原生限制6.1 双弧叠加做“轨道”效果原生lv_arc只有一个背景弧和一个前景弧。如果你想要更复杂的轨道效果比如一个粗背景弧加一个细前景弧或者多个不同颜色的弧段可以用两个lv_arc叠加。具体做法是创建一个父容器里面放两个lv_arc尺寸和位置完全重合一个设粗弧线做背景一个设细弧线做前景分别控制各自的值和颜色。这样就能做出“轨道”效果视觉上比单弧丰富很多。叠加时要注意层级顺序后创建的弧在上面。如果前景弧要盖住背景弧就把前景弧放在后面创建。另外两个弧的角度范围要一致否则会出现错位。我做过一个仪表盘背景弧是深灰粗弧前景弧是渐变细弧中间再叠一个白色小弧做刻度指示三层叠加效果很精致。6.2 自定义绘制事件如果原生弧线满足不了需求比如要画虚线弧、带刻度的弧、或者非均匀粗细的弧可以用LV_EVENT_DRAW_MAIN事件自己画。在事件回调里拿到lv_layer_t然后用lv_draw_arc或者lv_draw_line自己绘制。这个方式最灵活但代码量也最大适合有明确需求的场景。我做过一个带刻度的圆弧就是在LV_EVENT_DRAW_MAIN里先调原生绘制再循环画刻度线。刻度线的角度根据弧线角度范围计算位置根据半径计算颜色和长度可以自定义。这个方案在 LVGL 9.x 上跑得很稳但要注意绘制顺序自定义绘制要在原生绘制之后否则会被覆盖。6.3 多弧叠加的性能考量多弧叠加意味着多次绘制性能消耗成倍增加。如果叠加超过三层在低端芯片上可能会卡。我的建议是能用样式解决的不用叠加能用两层解决的不用三层。如果确实需要多层考虑把静态部分合并成一个图片或者用 canvas 缓存。LVGL 的 canvas 控件可以预先绘制好复杂图形然后作为图片使用性能比实时绘制好很多。7. 常见问题与排查技巧实录7.1 弧线圆角不生效怎么办圆角不生效最常见的原因是只设了前景弧没设背景弧或者设错了 part。lv_arc有三个 partLV_PART_MAIN背景弧、LV_PART_INDICATOR前景弧、LV_PART_KNOB指示器。圆角要分别对 MAIN 和 INDICATOR 设置。另外如果弧线宽度太小比如小于 4圆角效果几乎看不出来这是正常的不是 bug。7.2 指示器位置偏移怎么调指示器位置偏移通常是因为弧线宽度和指示器尺寸不匹配。指示器是居中对齐在弧线路径上的如果弧线很粗而指示器很小指示器会陷在弧线中间看起来像偏了。解决办法是增大指示器尺寸或者减小弧线宽度。另外lv_arc的rotation属性会影响指示器位置如果设了旋转角度指示器会跟着转检查一下这个值是不是 0。7.3 渐变颜色显示不对渐变显示不对可能是颜色格式问题。LVGL 支持 RGB565、RGB888 等格式如果屏幕驱动配置的颜色格式和样式里设的不一致渐变会显示成色块或者颜色错乱。检查LV_COLOR_DEPTH配置确保和屏幕一致。另外渐变断点如果设得太密在低色深屏幕上会出现色带适当减少断点或者增加抖动可以缓解。7.4 动画卡顿怎么优化动画卡顿先从刷新周期入手增大LV_DEF_REFR_PERIOD可以降低 CPU 占用。然后检查阴影和渐变这两个是性能大户动画时可以考虑临时关闭。最后检查圆弧尺寸大尺寸圆弧的重绘区域大缩小尺寸或者用局部刷新可以改善。如果用了 FreeRTOS确保 LVGL 任务优先级合理不要被其他任务频繁打断。问题现象可能原因排查方向解决方案圆角不生效part 设错检查 MAIN 和 INDICATOR分别设置 rounded指示器偏移尺寸不匹配对比弧宽和指示器直径调整比例 1.2-1.5渐变错乱颜色格式不符检查 LV_COLOR_DEPTH统一颜色格式动画卡顿刷新周期太短查看 CPU 占用增大刷新周期阴影锯齿spread 太小观察阴影边缘增大 spread7.5 独家避坑心得第一个坑在 LVGL 8.x 上调的样式代码直接搬到 9.x 可能编译不过因为部分 API 改名了。比如lv_obj_set_style_arc_width在 9.x 里参数没变但lv_arc_set_rotation的行为有调整。移植前先看版本迁移文档。第二个坑在 PC 模拟器上调好的效果放到实际屏幕上可能偏色。模拟器通常用 RGB888实际屏幕可能是 RGB565颜色会有损失。建议在模拟器上调个大概然后在实机上微调。第三个坑FreeRTOS 下 LVGL 任务栈太小会导致动画卡顿甚至死机。LVGL 的绘制和动画需要一定栈空间建议至少 4K 以上复杂 UI 要 8K。第四个坑圆弧控件的点击区域是矩形包围盒不是圆弧本身。如果多个圆弧重叠点击事件会互相干扰。可以用lv_obj_set_ext_click_area调整点击区域或者用lv_obj_add_flag禁用不需要点击的弧。8. 从默认到高级我的实际项目体会上面这 5 个技巧我在不同项目里反复用过。最直观的感受是圆弧控件的美化80% 的效果来自前两个技巧——弧线粗细圆角和渐变配色。把这两点做好默认的“工程师审美”基本就消失了。阴影和动画是锦上添花但要注意性能低端芯片上不要贪多。多弧叠加是进阶玩法适合有明确设计稿的项目不要为了炫技而叠加。我最近做的一个 STM32F407 FreeRTOS LVGL 9.x 的智能面板项目圆弧控件用了渐变加圆角加轻微光晕动画用 ease_out整体效果客户一次过。代码量不大核心就是几个样式设置加一个动画。关键是要理解每个参数的作用而不是盲目抄配置。参数背后的逻辑清楚了换个项目也能快速调出想要的效果。最后分享一个小技巧调样式时先把弧线宽度设大一点比如 30这样圆角、渐变、阴影的效果都看得很清楚调好之后再缩小到实际尺寸。这个方法能帮你快速判断参数是否合理比在小尺寸上反复试效率高很多。
