玻璃效果 (Glass)
玻璃控件用于在屏幕上模拟玻璃的折射效果,该控件的使用需要依赖完整的 frame buffer。 在 HoneyGUI 中考虑到运算的时间成本,玻璃控件是一个简化的折射模型,并不遵循真实的光线折射规律。简化后的玻璃模型仅包含当前坐标与折射后坐标的差值关系,示意图如下:
简化模型
玻璃数据生成
基于以上简化模型可以得到规则:折射后的像素点仅与玻璃遮盖范围内像素点的偏移量有关。因此只需要生成玻璃上每个点偏移量的集合即可。在 示例 的设计中,偏移量由玻璃厚度 t (折射率)与观测点位置(x_o, y_o)通过以下关系决定:
其中 distortion 为玻璃上各个点的厚度(折射率),g(x, y)为当前玻璃上的点与观测点(x_o, y_o)的关系。
玻璃效果图像生成器使用说明
GlassTool: GlassTool
软件概述
本软件是一个基于 Python 的玻璃效果图像生成器,支持创建多种形状的玻璃效果图像,当前支持图形包括圆形、圆角矩形和环形。
功能实现
形状选择
圆形:创建圆形玻璃效果
圆角矩形:创建带圆角的矩形玻璃效果
环形:创建环形玻璃效果
自定义路径:通过路径命令创建任意带线宽的曲线
闭合形状:创建自动闭合的自定义路径形状
加载SVG:导入SVG文件并应用玻璃效果
参数调节
半径/尺寸:控制形状的大小
扭曲度:调整玻璃效果的扭曲强度(0-1)
区域:控制效果区域范围(0-1)
自定义保存路径
路径输入:指定数据保存路径
确定输出:点击后生成最终数据
重设:将设定恢复为默认值
图像操作
实时预览:参数调整时实时更新图像
图像保存:支持保存生成的玻璃效果数据,并用于 HoneyGUI 绘制图形
运动效果预览:通过数据拖动玻璃图形预览动态效果
使用方法
软件界面
基础图形
选择所需的形状类型,包含圆形、圆角矩形和环形
调整相应参数滑块
点击 浏览 指定数据保存路径
预览显示效果,并支持拖动功能
矢量图形
自定义路径使用方法:
选择 Custom Path 形状类型
在路径命令输入框中输入绘图命令,或使用 Insert Commands 菜单插入预定义命令
在 Stroke 输入框中设置路径线宽(默认30像素)
使用 Add 按钮添加命令到路径列表
可以通过 Delete 删除选中命令, Clear 清空所有命令
点击 OK 生成自定义路径玻璃效果
支持鼠标拖动调整位置
闭合形状使用方法:
选择 Close Shape 形状类型
按照自定义路径的方式输入和编辑路径命令
系统会自动添加 end 命令确保路径闭合
点击 OK 生成闭合形状玻璃效果
支持鼠标拖动和实时效果更新
SVG 使用方法:
选择 Load SVG 形状类型
点击 Browse 按钮选择 SVG 文件
软件自动解析 SVG 文件中的路径数据
调节 Effect Strength 滑块设置玻璃扭曲强度
调节 Effect Area 滑块设置效果区域范围
点击 Confirm 应用设置并生成玻璃效果
支持拖动功能,可自由调整图形位置
矢量图形使用方法
软件支持三种矢量图形创建方式,提供灵活的自定义路径绘制功能:
自定义路径 (Custom Path)
自定义路径允许用户通过命令序列创建任意形状:
路径命令输入:在路径命令输入框中输入绘图命令
- 命令格式支持:
move(x, y)- 移动画笔到指定位置lineto(x, y)- 绘制直线到指定位置bezierto(x1,y1,x2,y2,x,y)- 绘制三次贝塞尔曲线quadto(x1,y1,x,y)- 绘制二次贝塞尔曲线cubicto(x1,y1,x2,y2,x,y)- 绘制三次贝塞尔曲线(与bezierto相同)end- 闭合路径(绘制直线回到起点)
常用命令插入:通过 Insert Commands 菜单快速插入预定义命令
线宽设置:在 Stroke 输入框中设置路径线宽(默认30像素)
命令管理:支持添加、删除、清空路径命令,以及显示全部命令内容
默认示例:自动加载三角形示例路径,包含 move 、 lineto 命令序列
闭合形状 (Close Shape)
闭合形状提供路径绘制功能,自动确保路径闭合:
路径命令系统:与自定义路径使用相同的命令格式和语法
自动闭合:系统会自动检测并添加 end 命令确保路径正确闭合
路径验证:生成图像前自动验证路径有效性,确保几何正确性
命令编辑:提供完整的路径命令编辑功能,包括添加、删除、清空操作
帮助系统:内置命令格式帮助,指导用户正确使用路径命令
加载 SVG (Load SVG)
加载 SVG 功能支持导入标准SVG文件并应用玻璃效果:
文件选择:通过 Browse 按钮选择本地 SVG 文件
SVG 解析:自动解析 SVG 文件中的 path 元素,提取路径数据
- 路径转换:将 SVG 路径命令转换为内部矢量路径格式
支持M/m(移动)、L/l(直线)、Q/q(二次贝塞尔)、C/c(三次贝塞尔)、Z/z(闭合)命令
多路径处理:自动处理包含多个路径的 SVG 文件,使用第一个有效路径
- 效果参数:
Effect Strength:调节玻璃效果扭曲强度(0-100%)
Effect Area:控制效果区域范围(0-100%)
路径显示:加载完成后在界面显示转换后的路径命令序列
错误处理:提供完整的文件读取和解析错误提示
拖动功能
所有形状(包括基础图形和矢量图形)都支持鼠标拖动
拖动时形状会实时跟随鼠标移动
自动边界检查防止移出可视区域
矢量图形的拖动会保持路径形状和比例不变
拖动过程中实时更新玻璃效果渲染
注意事项
拖动功能需要先生成图像
保存数据前请确认保存路径,若未指定路径,则默认保存在工具根目录下
用法
描述 |
|
|---|---|
创建控件 |
|
设置属性 |
|
获得高度 |
|
获得宽度 |
|
刷新属性 |
|
移动位置 |
示例
static int app_init(void)
{
#ifdef _HONEYGUI_SIMULATOR_
unsigned char *resource_root = (unsigned char *)_binary_bg_bin_start;
#else
unsigned char *resource_root = (unsigned char *)BG_ADDR;
#endif
gui_video_t *video = gui_video_create_from_mem(gui_obj_get_root(), "background",
(void *)resource_root,
0, 0, 410,
502);
gui_video_set_state(video, GUI_VIDEO_STATE_PLAYING);
gui_video_set_repeat_count(video, GUI_VIDEO_REPEAT_INFINITE);
gui_glass_create_from_mem(gui_obj_get_root(), "img_2_test", (void *)glass_0, 195, 40, 0, 0);
gui_glass_create_from_mem(gui_obj_get_root(), "img_2_test", (void *)_acglass_1, 50, 40, 0,
0);
gui_glass_create_from_mem(gui_obj_get_root(), "img_2_test", (void *)glass_0, 30, 261, 0, 0);
gui_glass_create_from_mem(gui_obj_get_root(), "img_2_test", (void *)_acglass_1_2, 240, 270,
0, 0);
return 0;
}
GUI_INIT_APP_EXPORT(app_init);

API
Functions
-
uint16_t gui_glass_get_width(gui_glass_t *_this)
-
Load the width of glass in pixel.
- 参数:
-
_this -- Glass widget pointer.
- 返回:
-
Width of glass.
-
uint16_t gui_glass_get_height(gui_glass_t *_this)
-
Load the height of glass in pixel.
- 参数:
-
_this -- Glass widget pointer.
- 返回:
-
Height of glass.
-
void gui_glass_refresh_size(gui_glass_t *_this)
-
Refresh the size of glass.
- 参数:
-
_this -- Glass widget pointer.
-
void gui_glass_refresh_draw_data(gui_glass_t *_this)
-
Refresh the source data of glass.
- 参数:
-
_this -- Glass widget pointer.
-
void gui_glass_set_attribute(gui_glass_t *_this, const char *name, void *addr, int16_t x, int16_t y)
-
Set glass attributes (name, path, position).
- 参数:
this -- Glass widget pointer.
name -- Widget name.
addr -- Glass data address/path.
x -- X-axis coordinate.
y -- Y-axis coordinate.
-
void gui_glass_translate(gui_glass_t *_this, float t_x, float t_y)
-
Translate (move) the glass.
- 参数:
_this -- Glass widget pointer.
t_x -- New X-axis coordinate.
t_y -- New Y-axis coordinate.
-
gui_glass_t *gui_glass_create_from_mem(void *parent, const char *name, void *addr, int16_t x, int16_t y, int16_t w, int16_t h)
-
Create a glass widget from memory address.
备注
Create a glass widget and set attribute.
- 参数:
parent -- Father widget it nested in.
name -- Widget name.
addr -- Bin file address.
x -- X-axis coordinate of the widget.
y -- Y-axis coordinate of the widget.
w -- Width of the widget.
h -- Height of the widget.
- 返回:
-
Widget object pointer.
-
gui_glass_t *gui_glass_create_from_ftl(void *parent, const char *name, void *ftl, int16_t x, int16_t y, int16_t w, int16_t h)
-
Create a glass widget from memory address.
备注
Create a glass widget and set attribute.
- 参数:
parent -- Father widget it nested in.
name -- Widget name.
ftl -- Not xip address, use ftl address.
x -- X-axis coordinate of the widget.
y -- Y-axis coordinate of the widget.
w -- Width of the widget.
h -- Height of the widget.
- 返回:
-
Widget object pointer.
-
gui_glass_t *gui_glass_create_from_fs(void *parent, const char *name, void *file, int16_t x, int16_t y, int16_t w, int16_t h)
-
Create a glass widget from filesystem.
- 参数:
parent -- Father widget it nested in.
name -- Widget name.
file -- Glass file path.
x -- X-axis coordinate of the widget.
y -- Y-axis coordinate of the widget.
w -- Width of the widget.
h -- Height of the widget.
- 返回:
-
Pointer to the created glass widget.
-
float gui_glass_get_t_x(gui_glass_t *_this)
-
Get the translation in X direction.
- 参数:
-
_this -- Glass widget pointer.
- 返回:
-
Translation in X direction.
-
float gui_glass_get_t_y(gui_glass_t *_this)
-
Get the translation in Y direction.
- 参数:
-
_this -- Glass widget pointer.
- 返回:
-
Translation in Y direction.
-
void gui_glass_set_data(gui_glass_t *_this, const uint8_t *glass_data_pointer)
-
Sets the glass data for a specified glass widget.
This function assigns the given glass data to the specified glass widget. The glass data might correspond to various formats, and the format should be compatible with the handling of
gui_glass_t.- 参数:
_this -- Pointer to the glass widget (
gui_glass_t) for which the glass data is to be set.glass_data_pointer -- Pointer to the glass data to be set to the widget. The data should persist as long as the widget needs it or until it is explicitly updated.
-
const uint8_t *gui_glass_get_data(gui_glass_t *_this)
-
Gets the glass data from a specified glass widget.
This function returns the current glass data that is set in the specified glass widget.
- 参数:
-
_this -- Pointer to the glass widget (
gui_glass_t) from which the glass data should be retrieved. - 返回:
-
Pointer to the glass data currently set in the widget. If no glass data is set, the result may be
NULL.
-
void gui_glass_enable_pressing_envent(gui_glass_t *_this)
-
Enable long pressing event on glass widget.
- 参数:
-
_this -- Pointer to the glass widget (
gui_glass_t) from which the glass data should be retrieved.
-
void gui_glass_enable_click_envent(gui_glass_t *_this)
-
Enable click event on glass widget.
- 参数:
-
_this -- Pointer to the glass widget (
gui_glass_t) from which the glass data should be retrieved.
-
struct gui_glass_t
-
Glass widget structure.