EdgeTX图形界面中LVGL线条绘制异常问题分析

问题描述

在EdgeTX开源项目(一个开源遥控器固件)中，开发者在使用LVGL图形库绘制动态旋转线条时遇到了一个奇怪的显示问题。具体表现为：在模拟器上运行正常的代码，在实际硬件设备上却出现了线条绘制区域受限的情况。

问题现象

开发者尝试实现一个带有旋转指针的圆形仪表盘界面，核心代码如下：

local w = LCD_W;
local h = LCD_H - 60;
local cx = w / 2;
local cy = h / 2 + 30;
local r_circle = h / 2;

-- 绘制圆形
page:circle({x = cx, y = cy, radius = r_circle });

-- 显示数值标签
page:label({x = 5, y = 5, text = (function() return "V: " .. getValue(widget.options.Src); end)});

-- 绘制旋转线条
page:line({
    thickness = 1, 
    color = CYAN, 
    pts = (function()
        local v = getValue(widget.options.Src) * math.pi / 1024;
        local x = r_circle * math.cos(v) + cx;
        local y = r_circle * math.sin(v) + cy;
        return { { cx, cy }, { x, y } };
    end)
});

在模拟器上，这段代码能够正确显示一个圆形和一条从圆心出发、根据输入值旋转的线条。但在实际硬件设备上却出现了以下异常：

1. 在RadioMaster TX12S设备上，线条只能在第二象限(坐标系右上部分)正常显示
2. 在TX16S设备上，线条完全不会旋转，而是固定在某个随机位置
3. 固定坐标的线条绘制则完全正常

技术分析

这个问题涉及到EdgeTX的图形子系统与LVGL库的交互，特别是动态坐标计算和线条绘制机制。从现象来看，可以推测几个可能的原因：

1. 坐标转换问题：LVGL的坐标系转换在动态计算时可能出现异常
2. 闭包函数执行时机：使用匿名函数动态计算坐标点时，函数执行时机可能不符合预期
3. 硬件加速限制：某些硬件可能在特定区域的图形绘制存在限制
4. 浮点运算差异：模拟器和实际硬件在浮点运算精度上可能存在差异

解决方案

该问题最终通过代码提交#6351得到修复。虽然没有详细说明修复细节，但根据问题特征，可能的修复方向包括：

1. 优化坐标计算逻辑，确保在所有象限都能正确转换
2. 调整LVGL线条绘制的参数设置
3. 修复动态属性更新的机制

经验总结

在EdgeTX开发图形界面时，开发者需要注意：

1. 动态绘制的元素在不同硬件上可能有不同的表现，需要进行充分测试
2. LVGL的坐标系统在不同设备上的实现可能存在细微差异
3. 使用闭包函数动态计算属性时，要特别注意执行上下文和性能影响
4. 对于旋转动画等效果，建议先在模拟器上验证基本逻辑，再到实际设备上调试细节

这个问题提醒我们，嵌入式图形开发中，模拟器和实际硬件的差异是需要特别关注的重点之一。