圆角矩形 (Geometry Rounded Rectangle)

概述

圆角矩形控件是一个轻量级的 GUI 绘图组件，专门用于在用户界面中绘制带圆角的矩形图形。该控件提供了简洁易用的 API ，支持自定义圆角矩形的尺寸、圆角半径、颜色等属性，能够创建现代风格的 UI 元素。

核心功能

描述	API
创建控件	`gui_lite_round_rect_create()`
设置属性	`gui_lite_round_rect_set_style()`
设置位置	`gui_lite_round_rect_set_position()`
设置尺寸	`gui_lite_round_rect_set_size()`
设置颜色	`gui_lite_round_rect_set_color()`
注册点击事件回调	`gui_lite_round_rect_on_click()`

圆角说明

圆角矩形支持四个角具有相同的圆角半径：

radius = 0: 绘制直角矩形
radius > 0: 绘制圆角矩形，半径值决定圆角弧度

特性亮点

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

应用场景

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

现代化按钮: 创建具有圆角效果的交互按钮
卡片式布局: 实现卡片式 UI 设计元素
对话框和面板: 绘制圆角对话框、信息面板
图标背景: 作为应用图标或功能图标的背景
进度条容器: 创建圆角进度条的背景容器
列表项: 实现圆角列表项或菜单项
动画元素: 支持位置动态变化的动画效果

配置说明

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

在 menu_config.h 中添加：

#define CONFIG_REALTEK_BUILD_REAL_LITE_RECT 1

完整示例

#include "gui_components_init.h"
#include "gui_lite_geometry_round_rect.h"
#include "gui_view.h"
#include "gui_view_instance.h"

#define RECT_VIEW_NAME "rect_round_view"
gui_lite_round_rect_t *round_rect = NULL;
void round_rect_timer_cb(void *arg)
{
    gui_lite_round_rect_set_position(arg, 100, 100);
    gui_fb_change();
}
void rect_click_demo(void)
{
    round_rect = gui_lite_round_rect_create(gui_obj_get_root(), "round_rect", 0, 0, 200, 200, 10,
                                            gui_rgba(255, 0, 0, 255));
    gui_lite_round_rect_set_style(round_rect, 200, 200, 200, 200, 10, gui_rgba(255, 0, 0, 255));
    gui_lite_round_rect_on_click(round_rect, round_rect_timer_cb, NULL);
}
static void app_rect_round_design(gui_view_t *view)
{
    gui_view_switch_on_event(view, "rect_view", SWITCH_OUT_ANIMATION_FADE,
                             SWITCH_IN_ANIMATION_FADE,
                             GUI_EVENT_KB_SHORT_CLICKED);
    gui_view_set_animate_step(view, 500);
    uint8_t alpha = 200;
    gui_lite_round_rect_create(gui_obj_get_root(), "bg", 0, 0, 480, 480, 0, gui_rgba(255, 200, 200,
                               255));

    gui_lite_round_rect_create(gui_obj_get_root(), "geometry1", 20, 20, 200, 200, 20, gui_rgba(255, 0,
                               0, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry2", 50, 50, 200, 200, 20, gui_rgba(0, 255,
                               0, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry3", 80, 80, 200, 200, 20, gui_rgba(0, 0,
                               255, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry1", 150, 150, 200, 200, 20, gui_rgba(255, 0,
                               0, alpha));
    gui_lite_round_rect_create(gui_obj_get_root(), "geometry2", 210, 210, 200, 200, 20, gui_rgba(0, 255,
                               0, alpha));

    // rect_click_demo();
}
static int geometry_rect_demo_init(void)
{
    gui_view_create(gui_obj_get_root(), RECT_VIEW_NAME, 0, 0, 0, 0);

    return 0;
}
GUI_VIEW_INSTANCE(RECT_VIEW_NAME, false, app_rect_round_design, 0);
GUI_INIT_APP_EXPORT(geometry_rect_demo_init);

API

Defines

BLOCK_SIZE 100: Tile size for block-based rendering.

Functions

gui_lite_round_rect_t *gui_lite_round_rect_create(void *parent, const char *name, int x, int y, int w, int h, int radius, gui_color_t color)

Create a new lite round rect widget.

参数:

parent -- Parent widget or NULL for root widget.
name -- Widget name or NULL for default name.
x -- X coordinate relative to widget.
y -- Y coordinate relative to widget.
w -- Round rect width.
h -- Round rect height.
radius -- Round rect radius.
color -- Round rect color.

返回:

Pointer to the created lite round rect widget.

void gui_lite_round_rect_set_style(gui_lite_round_rect_t *this, int x, int y, int w, int h, int radius, gui_color_t color)

Set the style of the lite round rect widget.

参数:

this -- Pointer to the lite round rect widget.
x -- X coordinate relative to widget.
y -- Y coordinate relative to widget.
w -- Round rect width.
h -- Round rect height.
radius -- Round rect radius.
color -- Round rect color.

void gui_lite_round_rect_set_position(gui_lite_round_rect_t *this, int x, int y)

Set the position of the lite round rect widget.

参数:

this -- Pointer to the lite round rect widget.
x -- X coordinate relative to widget.
y -- Y coordinate relative to widget.

void gui_lite_round_rect_set_size(gui_lite_round_rect_t *this, int w, int h)

Set the size of the lite round rect widget.

参数:

this -- Pointer to the lite round rect widget.
w -- Round rect width.
h -- Round rect height.

void gui_lite_round_rect_set_radius(gui_lite_round_rect_t *this, int radius)

Set the radius of the lite round rect widget.

参数:

this -- Pointer to the lite round rect widget.
radius -- Round rect radius.

void gui_lite_round_rect_set_color(gui_lite_round_rect_t *this, gui_color_t color)

Set the color of the lite round rect widget.

参数:

this -- Pointer to the lite round rect widget.
color -- Round rect color.

void gui_lite_round_rect_on_click(gui_lite_round_rect_t *this, void *callback, void *parameter)

Register a click event callback for the lite round rect widget.

参数:

this -- Pointer to the lite round rect widget.
callback -- Callback function pointer.
parameter -- Optional parameter to pass to the callback.

struct gui_lite_round_rect_t

Lite arc widget structure.

Public Members

gui_obj_t base: Base widget.

draw_img_t *circle_00

draw_img_t *circle_01

draw_img_t *circle_10

draw_img_t *circle_11

uint8_t *circle_data

draw_img_t *rect_0

draw_img_t *rect_1

draw_img_t *rect_2

uint8_t *rect_data

uint8_t opacity_value: Opacity value.

int radius: Round rect radius.

gui_color_t color: Round rect color.

uint8_t checksum: Checksum for change detection.