圆形 (Geometry Circle)

概述

圆形控件是一个轻量级的 GUI 绘图组件，专门用于在用户界面中绘制圆形图形。该控件提供了简洁易用的 API ，支持自定义圆形的中心位置、半径、颜色等属性，能够创建各种圆形 UI 元素。

核心功能

描述	API
创建控件	`gui_lite_circle_create()`
设置属性	`gui_lite_circle_set_style()`
设置位置	`gui_lite_circle_set_position()`
设置半径	`gui_lite_circle_set_radius()`
设置颜色	`gui_lite_circle_set_color()`
注册点击事件回调	`gui_lite_circle_on_click()`

圆形特性

圆形控件具有以下几何特性：

圆心定位: 通过中心点坐标精确定位
半径控制: 支持任意大小的半径值
完美圆形: 确保绘制完美的几何圆形
边界处理: 自动处理圆形与边界的裁剪

特性亮点

高性能: 采用优化的圆形绘制算法，确保流畅的渲染性能
抗锯齿: 支持边缘抗锯齿，提供平滑的圆形边缘效果
灵活配置: 支持自定义半径、位置和颜色
透明度支持: 支持 RGBA 颜色格式，可创建半透明圆形效果
轻量级: 内存占用小，适合嵌入式系统和资源受限环境
动态更新: 支持运行时动态修改位置和样式

应用场景

圆形控件适用于以下场景：

状态指示器: 创建圆形状态指示灯
用户头像: 实现圆形用户头像显示
图标设计: 绘制各种圆形图标元素
进度指示: 创建圆形进度条或加载动画
按钮设计: 实现圆形交互按钮
装饰元素: 作为 UI 界面的装饰性圆形元素
数据可视化: 用于饼图、雷达图等数据可视化组件

配置说明

要使用圆形控件，需要在配置文件中启用相应的宏定义：

在 menu_config.h 中添加：

#define CONFIG_REALTEK_BUILD_REAL_LITE_CIRCLE 1

完整示例

#include "gui_components_init.h"
#include "gui_lite_geometry_circle.h"
static void gui_lite_circle_cb(gui_obj_t *obj)
{
    gui_log("gui_lite_circle_cb: %s\n", obj->name);
}
static int geometry_circle_demo_init(void)
{
    const uint32_t W = 480, H = 480;
    const uint32_t big_d   = 368;
    const uint32_t small_d = 66;
    const uint32_t margin  = 36;

    gui_lite_circle_t *big_circle = gui_lite_circle_create(gui_obj_get_root(), "big_circle", W / 2,
                                                           H / 2, big_d / 2, gui_rgba(0, 255,
                                                                   0, 255));

    gui_lite_circle_create(gui_obj_get_root(), "top_left", margin + small_d / 2, margin + small_d / 2,
                           small_d / 2,
                           gui_rgba(255, 0, 0, 255));


    gui_lite_circle_create(gui_obj_get_root(), "top_right", W - margin - small_d / 2,
                           margin + small_d / 2, small_d / 2,
                           gui_rgba(0, 255, 0, 255));


    gui_lite_circle_create(gui_obj_get_root(), "bottom_left", margin + small_d / 2,
                           H - margin - small_d / 2, small_d / 2,
                           gui_rgba(0, 0, 255, 255));


    gui_lite_circle_create(gui_obj_get_root(), "bottom_right", W - margin - small_d / 2,
                           H - margin - small_d / 2, small_d / 2,
                           gui_rgba(0, 0, 255, 150));
    gui_obj_add_event_cb(big_circle, (gui_event_cb_t)gui_lite_circle_cb, GUI_EVENT_TOUCH_CLICKED, NULL);
    return 0;
}

GUI_INIT_APP_EXPORT(geometry_circle_demo_init);

API

Defines

BLOCK_SIZE 100: Tile size for block-based rendering.

Functions

gui_lite_circle_t *gui_lite_circle_create(void *parent, const char *name, int x, int y, int radius, gui_color_t color)

Create a lite geometry circle widget.

参数:

parent -- Parent widget.
name -- Widget name.
x -- X coordinate of circle center.
y -- Y coordinate of circle center.
radius -- Circle radius.
color -- Circle color.

返回:

Pointer to the created circle widget.

void gui_lite_circle_set_style(gui_lite_circle_t *this, int x, int y, int radius, gui_color_t color)

Set circle style.

参数:

this -- Circle widget pointer.
x -- X coordinate of circle center.
y -- Y coordinate of circle center.
radius -- Circle radius.
color -- Circle color.

void gui_lite_circle_set_position(gui_lite_circle_t *this, int x, int y)

Set circle position.

参数:

this -- Circle widget pointer.
x -- X coordinate of circle center.
y -- Y coordinate of circle center.

void gui_lite_circle_set_radius(gui_lite_circle_t *this, int radius)

Set circle radius.

参数:

this -- Circle widget pointer.
radius -- Circle radius.

void gui_lite_circle_set_color(gui_lite_circle_t *this, gui_color_t color)

Set circle color.

参数:

this -- Circle widget pointer.
color -- Circle color.

void gui_lite_circle_on_click(gui_lite_circle_t *this, void *callback, void *parameter)

Set click callback for the circle.

参数:

this -- Circle widget pointer.
callback -- Callback function.
parameter -- Callback parameter.

struct gui_lite_circle_t

Lite circle widget structure.

Public Members

gui_obj_t base: Base widget.

draw_img_t *center_rect: Center rectangle (inscribed square).

draw_img_t *arc_left: Left arc.

draw_img_t *arc_right: Right arc.

draw_img_t *arc_top: Top arc.

draw_img_t *arc_bottom: Bottom arc.

int x: Center X coordinate relative to widget.

int y: Center Y coordinate relative to widget.

int radius: Circle radius.

gui_color_t color: Circle color.

uint8_t opacity_value: Opacity value.

uint8_t checksum: Checksum for change detection.