From 2f19d609ae5e08805b330bdc4508f3c9480d1eab Mon Sep 17 00:00:00 2001 From: idea4good Date: Fri, 3 May 2019 22:07:23 +0800 Subject: [PATCH 1/7] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9dee652..76e41df 100644 --- a/README.md +++ b/README.md @@ -96,5 +96,5 @@ GuiLite只是一个框架，本身并不能生成UI。为了能够展示如何 [GitHub链接](https://github.com/idea4good/GuiLite) ## 致谢 -- 感谢开发者群的所有同学，是你们塑造了今天的GuiLite！也欢迎新的大神/小白加入我们。
![QQ group: 841031761](doc/qq.group.jpg) +- 感谢开发者群的所有同学，是你们塑造了今天的GuiLite！也欢迎新的大神/小白加入我们。
[](https://jq.qq.com/?_wv=1027&k=5EO8D9i) - 感谢来自码云用户的捐赠，您的每一分钱都会用来帮助急需帮助的中国儿童或家庭。 From e0e92c2a2fcdf04e6f2efff531b1136913dd5105 Mon Sep 17 00:00:00 2001 From: idea4good Date: Sun, 5 May 2019 11:21:33 +0800 Subject: [PATCH 2/7] update doc --- README.md | 2 +- ...{CodeWalkthrough-cn.md => HowToWork-cn.md} | 72 ++++++++++++------- 2 files changed, 47 insertions(+), 27 deletions(-) rename doc/{CodeWalkthrough-cn.md => HowToWork-cn.md} (57%) diff --git a/README.md b/README.md index 76e41df..ac9b31e 100644 --- a/README.md +++ b/README.md @@ -72,7 +72,7 @@ GuiLite只是一个框架，本身并不能生成UI。为了能够展示如何 ## 开发文档 - [如何编译?](doc/HowToBuild.md) -- [设计原理](doc/CodeWalkthrough-cn.md) +- [设计原理](doc/HowToWork-cn.md) - [如何布局UI?](doc/HowLayoutWork.md) - [如何制作多种文字/位图资源?](https://github.com/idea4good/GuiLiteToolkit) - [如何“换肤”？](https://gitee.com/idea4good/GuiLiteSamples/blob/master/HostMonitor/UIcode/source/resource/resource.cpp) diff --git a/doc/CodeWalkthrough-cn.md b/doc/HowToWork-cn.md similarity index 57% rename from doc/CodeWalkthrough-cn.md rename to doc/HowToWork-cn.md index 98db4c2..f758bc0 100644 --- a/doc/CodeWalkthrough-cn.md +++ b/doc/HowToWork-cn.md @@ -1,13 +1,33 @@ -# 代码结构及注释 -gui: 1）实现了各种常规控件（例如：按钮，标签，键盘）及容器（例如：视窗，对话框，滑动页面），开发者可以根据自己的需要，直接在相应的代码上进行修改或重绘，开发出有自己风格，特色的界面；2）实现了用户输入（例如：手指按下/释放）的消息传递，将用户的输入信息传递到整个UI体系树中，并调用相应的响应回调函数；开发者可以根据自己的需要添加/修改响应回调函数。 - -core: 实现了各个平台（例如：Windows, Linux）的封装，这些封装包括了基本的操作系统接口，底层绘制，图层管理和消息传递。由于开发者面对的应用场景有所不同，所需的操作系统接口也有区别，core中只提供了最基础的接口形式，开发者可以根据自己的需要，直接在api.h/api.cpp中添加新的操作系统接口或**单片机接口**。 - -最后，代码的更新/发布，不会作具体通知，请开发者随时更新代码库。 - +# 设计原理及代码注释 ## GuiLite的基本原理 GuiLite只作两个工作：界面元素管理和图形绘制。 +界面管理包括： +- 添加/删除界面元素（例如：按钮，标签，对话框等控件），设置对应的文字及位置信息 +- 用户输入消息传递：根据用户输入寻找受影响的界面元素，并回调响应的处理的处理函数 +- 用户自定义消息传递：用户可以自定义消息响应函数，并自主产生消息；当消息产生时，对应的响应函数会被调用 + +图形绘制包括： +- 基本的点线绘制，例如：画点，矩形，横线，竖线等 +- 设置绘制图层，如果需要多个图层，在基本点线绘制时，需要给出图层的索引值 +- 图层处理，在图层界面发生变化的时候，将其正确的组合，并输出到最终显示终端上 + +## GuiLited的扩展方法 +GuiLite只给出了基本控件（例如：按钮，标签，键盘，选择框）的实现方法，旨在说明控件的实现方法。对于扩展控件，可以选择下面的方式： +- 如果开发者需要调整基本控件的细节，可以直接在源代码中修改 +- 如果开发者需要构建全新的控件，可以参考基本控件的实现方法，重新实现 + +对于扩展绘制，例如：画圆，画曲线，可以直接在surface.cpp文件中添加响应的函数接口。 + +## 代码介绍 +core: +- 实现了底层绘制，图层管理和消息传递 +- adapter实现了各个平台（例如：Windows, Linux，Android，iOS，macOS,未知OS或无OS）的封装。 + +widgets: +- 实现了各种常规控件（例如：按钮，标签，键盘，波形）及容器（例如：视窗，对话框，滑动页面），开发者可以根据自己的需要，直接在相应的代码上进行修改或重绘，开发出有自己风格，特色的界面 +- 实现了用户的手势识别（例如：手指滑动，鼠标按下/释放）的消息传递，将用户的输入信息传递到整个GUI体系树中，并调用相应的响应回调函数；开发者可以根据自己的需要添加/修改响应回调函数。 + ## 界面元素管理 界面元素管理包括：对所有控件（button，spinbox, lable, keyboard），容器（dialog, view）管理；具体的管理方法是为所有的界面元素建造一棵树，利用这棵树实现对所有界面元素的遍历，查询，状态更改。 @@ -16,7 +36,7 @@ GuiLite只作两个工作：界面元素管理和图形绘制。 ### 界面元素如何创建 所有界面元素都继承自c_wnd类的对象，对象被实例化时，也就完成了界面元素的创建；但此时的界面元素是孤独的，与其他界面元素没有形成联系（没有父母，没有兄弟姐妹） -### 界面元素如何被管理（纳入tree中） +### 界面元素如何被管理 新创建的界面元素纳入管理的过程，就是为其添加父母，兄弟姐妹的过程。使用的函数接口为connect();从此该界面元素会跟其他界面元素一样，纳入一棵树中，并随之响应用户可能的点击操作。 当需要删掉该界面元素时，使用disconnect()；从此该界面元素会断绝所有的父子关系，从树上摘下来，不再响应用户的触控操作；但对象本身不会被销毁。典型应用场景：软键盘的创建/退出。 @@ -27,6 +47,7 @@ GuiLite只作两个工作：界面元素管理和图形绘制。 ### 绘制方法 请参看文件bitmap.cpp和surface.cpp中的draw_xxx()函数。 为了发挥GPU的加速功能，也可以通过改写draw_xxx/fill_xxx函数，使用GPU特性，来提升绘制效率。 + ### 图层管理 GuiLite的所有图层，如下图所示： ![Graphic layer](GraphicLayer.png) @@ -41,38 +62,37 @@ frame层: 该层属于surface层的一个部分；它现实叠加界面元素而存在。 ### 文件注释 -| core 文件名称 | 代码简介 | +| core 重要程度/文件名称 | 代码简介 | | --- | --- | +| ★★★ wnd.cpp | UI元素的基本类，定义所有的UI元素信息、绘制及管理办法 | +| ★★ cmd_target.cpp | 映射UI消息及用户自定义的消息 | +| ★★ display.cpp | 生成显示设备，设定surface的数目，一个surface对应一个滑动页面 | +| ★★ surface.cpp| 实现像素点的绘制，并对各个图层（layer）进行管理 | | bitmap.cpp | 绘制位图，支持16 bits和32 bits | -| cmd_target.cpp | 映射UI消息及用户自定义的消息 | -| display.cpp | 生成显示设备，设定surface的数目，一个surface对应一个滑动页面 | | rect.cpp | UI元素的位置信息 | -| surface.cpp | 实现像素点的绘制，并对各个图层（layer）进行管理 | -| wave_buffer.cpp | 波形数据的缓冲管理 | -| wave_ctrl.cpp | 实现波形控件 | -| wnd.cpp | UI元素的基本类，定义所有的UI元素信息、绘制及管理办法 | | word.cpp | 显示文字 | | api_linux.cpp | Linux适配层 | | api_win.cpp | Window适配层 | +| api_unknow.cpp | 无OS或其他OS适配层 | | audio_linux.cpp | Linux audio适配层 | | audio_win.cpp | Windows audio适配层 | | msg_linux.cpp | Dispatch消息的Linux实现 | | msg_win.cpp | Dispatch消息的Windows实现 | - - -| gui 文件名称 | 代码简介 | +| msg_unknow.cpp | Dispatch消息在无OS或其他OS下的实现 | +*** +| widgets 难度/文件名称 | 代码简介 | | --- | --- | +| label.cpp | 标签控件的绘制 | | button.cpp | 按钮控件的绘制及用户点击响应函数 | +| table.cpp | Table控件的绘制 | | dialog.cpp | 对话框的绘制及管理方法 | | edit.cpp | Edit控件的绘制及用户点击响应函数 | -| gesture.cpp | 手势识别方法，包括：鼠标按下，弹起及滑动 | -| keyboard.cpp | 键盘控件的绘制及用户点击响应函数 | -| label.cpp | 标签控件的绘制 | -| list_box.cpp | List控件的绘制及用户点击响应函数 | -| shape_resource.cpp | 自定义的形状资源，主要用于：支持圆角控件的缩放 | -| slide_group.cpp | 滑动页面的显示及管理 | -| spinbox.cpp | Spinbox控件的绘制及用户点击响应函数 | -| table.cpp | Table控件的绘制 | +| ★ gesture.cpp | 手势识别方法，包括：鼠标按下，弹起及滑动 | +| ★ keyboard.cpp | 键盘控件的绘制及用户点击响应函数 | +| ★★ list_box.cpp | List控件的绘制及用户点击响应函数 | +| ★★ spinbox.cpp | Spinbox控件的绘制及用户点击响应函数 | +| ★★★ wave_buffer.cpp | 波形数据的缓冲管理 | +| ★★★ wave_ctrl.cpp | 实现波形控件 | ### 函数接口注释 | 函数名称 | display.cpp 函数接口注释 | From 02f605872275b6a599c78115d659fe3b0e3fd638 Mon Sep 17 00:00:00 2001 From: idea4good Date: Mon, 6 May 2019 14:53:43 +0800 Subject: [PATCH 3/7] Update HowToWork-cn.md --- doc/HowToWork-cn.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/doc/HowToWork-cn.md b/doc/HowToWork-cn.md index f758bc0..933f799 100644 --- a/doc/HowToWork-cn.md +++ b/doc/HowToWork-cn.md @@ -12,7 +12,7 @@ GuiLite只作两个工作：界面元素管理和图形绘制。 - 设置绘制图层，如果需要多个图层，在基本点线绘制时，需要给出图层的索引值 - 图层处理，在图层界面发生变化的时候，将其正确的组合，并输出到最终显示终端上 -## GuiLited的扩展方法 +## GuiLite的扩展方法 GuiLite只给出了基本控件（例如：按钮，标签，键盘，选择框）的实现方法，旨在说明控件的实现方法。对于扩展控件，可以选择下面的方式： - 如果开发者需要调整基本控件的细节，可以直接在源代码中修改 - 如果开发者需要构建全新的控件，可以参考基本控件的实现方法，重新实现 From e93208f8270b4050068fadc0b4b7db3f0e5c113e Mon Sep 17 00:00:00 2001 From: idea4good Date: Tue, 7 May 2019 01:39:34 +0800 Subject: [PATCH 4/7] update HowToWork --- doc/HowToWork-cn.md | 64 ++++++++++++++++++++++----------------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/doc/HowToWork-cn.md b/doc/HowToWork-cn.md index f758bc0..1d0392d 100644 --- a/doc/HowToWork-cn.md +++ b/doc/HowToWork-cn.md @@ -62,43 +62,43 @@ frame层: 该层属于surface层的一个部分；它现实叠加界面元素而存在。 ### 文件注释 -| core 重要程度/文件名称 | 代码简介 | -| --- | --- | -| ★★★ wnd.cpp | UI元素的基本类，定义所有的UI元素信息、绘制及管理办法 | -| ★★ cmd_target.cpp | 映射UI消息及用户自定义的消息 | -| ★★ display.cpp | 生成显示设备，设定surface的数目，一个surface对应一个滑动页面 | -| ★★ surface.cpp| 实现像素点的绘制，并对各个图层（layer）进行管理 | -| bitmap.cpp | 绘制位图，支持16 bits和32 bits | -| rect.cpp | UI元素的位置信息 | -| word.cpp | 显示文字 | -| api_linux.cpp | Linux适配层 | -| api_win.cpp | Window适配层 | -| api_unknow.cpp | 无OS或其他OS适配层 | -| audio_linux.cpp | Linux audio适配层 | -| audio_win.cpp | Windows audio适配层 | -| msg_linux.cpp | Dispatch消息的Linux实现 | -| msg_win.cpp | Dispatch消息的Windows实现 | -| msg_unknow.cpp | Dispatch消息在无OS或其他OS下的实现 | +| core 重要程度/文件名称 | 代码简介 | 推荐学习时间 | +| --- | --- | --- | +| ★★★ wnd.cpp | UI元素的基本类，定义所有的UI元素信息、绘制及管理办法 | 1.5小时 | +| ★★ cmd_target.cpp | 映射UI消息及用户自定义的消息 | 0.5小时 | +| ★★ display.cpp | 生成显示设备，设定surface的数目，一个surface对应一个滑动页面 | 0.5小时 | +| ★★ surface.cpp| 实现像素点的绘制，并对各个图层（layer）进行管理 | 0.5小时 | +| word.cpp | 显示文字 | < 1小时 | +| bitmap.cpp | 绘制位图，支持16 bits和32 bits | < 0.5小时 | +| rect.cpp | UI元素的位置信息 | < 0.5小时 | +| api_linux.cpp | Linux适配层 | < 0.5小时 | +| api_win.cpp | Window适配层 | < 0.5小时 | +| api_unknow.cpp | 无OS或其他OS适配层 | < 0.5小时 | +| audio_linux.cpp | Linux audio适配层 | < 0.5小时 | +| audio_win.cpp | Windows audio适配层 | < 0.5小时 | +| msg_linux.cpp | 消息管道在Linux上的实现 | < 0.5小时 | +| msg_win.cpp | 消息管道在Windows上的实现 | < 0.5小时 | +| msg_unknow.cpp | 消息管道在其他OS（或无OS）上的实现 | < 0.5小时 | *** -| widgets 难度/文件名称 | 代码简介 | -| --- | --- | -| label.cpp | 标签控件的绘制 | -| button.cpp | 按钮控件的绘制及用户点击响应函数 | -| table.cpp | Table控件的绘制 | -| dialog.cpp | 对话框的绘制及管理方法 | -| edit.cpp | Edit控件的绘制及用户点击响应函数 | -| ★ gesture.cpp | 手势识别方法，包括：鼠标按下，弹起及滑动 | -| ★ keyboard.cpp | 键盘控件的绘制及用户点击响应函数 | -| ★★ list_box.cpp | List控件的绘制及用户点击响应函数 | -| ★★ spinbox.cpp | Spinbox控件的绘制及用户点击响应函数 | -| ★★★ wave_buffer.cpp | 波形数据的缓冲管理 | -| ★★★ wave_ctrl.cpp | 实现波形控件 | +| widgets 难度/文件名称 | 代码简介 | 推荐学习时间 | +| --- | --- | --- | +| label.cpp | 标签控件的绘制 | < 0.5小时 | +| button.cpp | 按钮控件的绘制及用户点击响应函数 | < 0.5小时 | +| table.cpp | Table控件的绘制 | < 0.5小时 | +| dialog.cpp | 对话框的绘制及管理方法 | < 0.5小时 | +| ★ gesture.cpp | 手势识别方法，包括：鼠标按下，弹起及滑动 | 0.5小时 | +| ★ keyboard.cpp | 键盘控件的绘制及用户点击响应函数 | 0.5小时 | +| ★★ list_box.cpp | List控件的绘制及用户点击响应函数 | 1.5小时 | +| ★★ spinbox.cpp | Spinbox控件的绘制及用户点击响应函数 | 1.5小时 | +| ★★ edit.cpp | Edit控件的绘制及用户点击响应函数 | 1.5小时 | +| ★★★ wave_buffer.cpp | 波形数据的缓冲管理 | 1.5小时 | +| ★★★ wave_ctrl.cpp | 实现波形控件 | 1.5小时 | -### 函数接口注释 +### 函数注释 | 函数名称 | display.cpp 函数接口注释 | | --- | --- | | c_display | c_display构造函数，初始化显示参数。输入：物理framebuffer指针，物理显示器宽度，物理显示器高度，surface宽度，surface高度，颜色深度，surface个数/滑动页面的个数 | | create_surface | 创建surface/滑动页面。输入： 用户ID，图层的个数| | merge_surface | 横向组合surface，多用于滑动surface。输入：待组合的surface源1，待组合的surface源2，surface源1的起始点x坐标，surface源2的起始点x坐标，surface源1的起始点y坐标，surface源2的起始点y坐标，横向组合的偏移距离；输出：可能改变当前显示内容 | -| get_frame_buffer | 获取该display的物理framebuffer指针 | +| get_updated_fb | 获取该display的物理framebuffer指针 | | snap_shot | 生成当前显示的快照，并输出到bmp文件 | From ad9bbe926bf73cac8982aa2a0b8c8d8f7fe91bee Mon Sep 17 00:00:00 2001 From: idea4good Date: Tue, 7 May 2019 23:42:22 +0800 Subject: [PATCH 5/7] update HowToWork-cn --- doc/HowToWork-cn.md | 29 +++++++++++++++++++++++------ 1 file changed, 23 insertions(+), 6 deletions(-) diff --git a/doc/HowToWork-cn.md b/doc/HowToWork-cn.md index 6c1be0c..38a1257 100644 --- a/doc/HowToWork-cn.md +++ b/doc/HowToWork-cn.md @@ -1,5 +1,14 @@ -# 设计原理及代码注释 -## GuiLite的基本原理 +# GuiLite设计原理及代码注释 +- [基本原理](#基本原理) +- [扩展方法](#扩展方法) +- [代码目录结构](#代码目录结构) +- [界面元素管理](#界面元素管理) +- [图形绘制](#图形绘制) +- [文件注释](#文件注释) +- [函数注释](#函数注释) +- [速成路线图](#速成路线图) +*** +## 基本原理 GuiLite只作两个工作：界面元素管理和图形绘制。 界面管理包括： @@ -12,14 +21,14 @@ GuiLite只作两个工作：界面元素管理和图形绘制。 - 设置绘制图层，如果需要多个图层，在基本点线绘制时，需要给出图层的索引值 - 图层处理，在图层界面发生变化的时候，将其正确的组合，并输出到最终显示终端上 -## GuiLite的扩展方法 +## 扩展方法 GuiLite只给出了基本控件（例如：按钮，标签，键盘，选择框）的实现方法，旨在说明控件的实现方法。对于扩展控件，可以选择下面的方式： - 如果开发者需要调整基本控件的细节，可以直接在源代码中修改 - 如果开发者需要构建全新的控件，可以参考基本控件的实现方法，重新实现 对于扩展绘制，例如：画圆，画曲线，可以直接在surface.cpp文件中添加响应的函数接口。 -## 代码介绍 +## 代码目录结构 core: - 实现了底层绘制，图层管理和消息传递 - adapter实现了各个平台（例如：Windows, Linux，Android，iOS，macOS,未知OS或无OS）的封装。 @@ -61,7 +70,7 @@ surface层： frame层: 该层属于surface层的一个部分；它现实叠加界面元素而存在。 -### 文件注释 +## 文件注释 | core 重要程度/文件名称 | 代码简介 | 推荐学习时间 | | --- | --- | --- | | ★★★ wnd.cpp | UI元素的基本类，定义所有的UI元素信息、绘制及管理办法 | 1.5小时 | @@ -94,7 +103,7 @@ frame层: | ★★★ wave_buffer.cpp | 波形数据的缓冲管理 | 1.5小时 | | ★★★ wave_ctrl.cpp | 实现波形控件 | 1.5小时 | -### 函数注释 +## 函数注释 | 函数名称 | display.cpp 函数接口注释 | | --- | --- | | c_display | c_display构造函数，初始化显示参数。输入：物理framebuffer指针，物理显示器宽度，物理显示器高度，surface宽度，surface高度，颜色深度，surface个数/滑动页面的个数 | @@ -102,3 +111,11 @@ frame层: | merge_surface | 横向组合surface，多用于滑动surface。输入：待组合的surface源1，待组合的surface源2，surface源1的起始点x坐标，surface源2的起始点x坐标，surface源1的起始点y坐标，surface源2的起始点y坐标，横向组合的偏移距离；输出：可能改变当前显示内容 | | get_updated_fb | 获取该display的物理framebuffer指针 | | snap_shot | 生成当前显示的快照，并输出到bmp文件 | + +## 速成路线图 +1. 精读源文件wnd.cpp中的connect, on_touch, on_key函数，理解界面元素的串联办法；理解响应触控操作的基本原理；理解响应硬按键的基本原理 +2. 快速浏览surface.cpp中用于绘制的draw_xxx函数，熟悉基本的绘制接口；精读c_surface构造函数，理解c_surface类的各种成员关系 +3. 精读button.cpp文件，初步掌握界面元素的基本开发方法 +4. - 快速浏览HelloStar实例的BuildLinux/main.cpp，理解构建一般Linux应用的办法 + - 快速浏览HelloStar实例的BuildMFC/HelloStarDlg.cpp，理解构建一般Windows应用的办法 + - 快速浏览HelloStar实例的BuildSTM32F103-Keil/USER/main.c，理解构建一般单片机系统的办法 From b7cb15c0daa879b7095ec9961fcbc69c93639b35 Mon Sep 17 00:00:00 2001 From: Zzzz <864859648@qq.com> Date: Sat, 11 May 2019 12:41:49 +0800 Subject: [PATCH 6/7] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20api.h=20=E5=AF=B9?= =?UTF-8?q?=E8=BF=99=E4=B8=AAGL=5FRGB=5F16=5Fto=5F32(rgb)=E5=AE=8F?= =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=8C=E5=A2=9E=E5=8A=A0=E9=80=8F=E6=98=8E?= =?UTF-8?q?=E5=BA=A6a=EF=BC=8C=E8=BF=99=E6=A0=B7=E5=BD=93=E9=9C=80?= =?UTF-8?q?=E8=A6=8132=E4=BD=8D=E8=89=B2=E6=97=B6=E9=80=8F=E6=98=8E?= =?UTF-8?q?=E5=BA=A6a=E6=97=B6=EF=BC=8Cdraw=5Fbitmap()=E6=89=8D=E8=83=BD?= =?UTF-8?q?=E6=98=BE=E7=A4=BA=E5=87=BAbitmap=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- core/core_include/api.h | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/core_include/api.h b/core/core_include/api.h index 5961e1d..27c99f5 100644 --- a/core/core_include/api.h +++ b/core/core_include/api.h @@ -23,7 +23,7 @@ void log_out(const char* log); #define GL_RGB_G(rgb) ((((unsigned int)(rgb)) >> 8) & 0xFF) #define GL_RGB_B(rgb) (((unsigned int)(rgb)) & 0xFF) #define GL_RGB_32_to_16(rgb) (((((unsigned int)(rgb)) & 0xFF) >> 3) | ((((unsigned int)(rgb)) & 0xFC00) >> 5) | ((((unsigned int)(rgb)) & 0xF80000) >> 8)) -#define GL_RGB_16_to_32(rgb) (((((unsigned int)(rgb)) & 0x1F) << 3) | ((((unsigned int)(rgb)) & 0x7E0) << 5) | ((((unsigned int)(rgb)) & 0xF800) << 8)) +#define GL_RGB_16_to_32(rgb) ((0xFF << 24) | ((((unsigned int)(rgb)) & 0x1F) << 3) | ((((unsigned int)(rgb)) & 0x7E0) << 5) | ((((unsigned int)(rgb)) & 0xF800) << 8)) typedef struct _T_TIME { From 31b87244ffd1fb33377cbc638e16e471d72f6102 Mon Sep 17 00:00:00 2001 From: idea4good Date: Tue, 14 May 2019 06:25:53 +0800 Subject: [PATCH 7/7] update howtowork.md --- doc/HowToWork-cn.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/doc/HowToWork-cn.md b/doc/HowToWork-cn.md index 38a1257..37af153 100644 --- a/doc/HowToWork-cn.md +++ b/doc/HowToWork-cn.md @@ -19,7 +19,9 @@ GuiLite只作两个工作：界面元素管理和图形绘制。 图形绘制包括： - 基本的点线绘制，例如：画点，矩形，横线，竖线等 - 设置绘制图层，如果需要多个图层，在基本点线绘制时，需要给出图层的索引值 -- 图层处理，在图层界面发生变化的时候，将其正确的组合，并输出到最终显示终端上 +- 图层处理，在图层界面发生变化的时候(例如：打开/关闭对话框)，GuiLite将决定各个图层上的像素点，哪个会被最终显示在屏幕上 + +👉注意：图形绘制不依赖界面管理，可以独立的存在，例如，在资源有限的单片机环境，有时候不需要界面元素管理，而直接进行图形，文字的绘制。 ## 扩展方法 GuiLite只给出了基本控件（例如：按钮，标签，键盘，选择框）的实现方法，旨在说明控件的实现方法。对于扩展控件，可以选择下面的方式： @@ -38,7 +40,7 @@ widgets: - 实现了用户的手势识别（例如：手指滑动，鼠标按下/释放）的消息传递，将用户的输入信息传递到整个GUI体系树中，并调用相应的响应回调函数；开发者可以根据自己的需要添加/修改响应回调函数。 ## 界面元素管理 -界面元素管理包括：对所有控件（button，spinbox, lable, keyboard），容器（dialog, view）管理；具体的管理方法是为所有的界面元素建造一棵树，利用这棵树实现对所有界面元素的遍历，查询，状态更改。 +界面元素管理包括：对所有控件（button，spinbox, lable, keyboard），容器（dialog, view）管理；具体的管理方法是在用户调用connect函数时，会把所有的界面元素连接起来，从而实现对所有界面元素的遍历/添加/删除等操作。这些链接看起来像一棵树，对界面元素的遍历，就是对这棵树的遍历 比如：当你按下一个dialog的button时，手指的位置信息（x，y）会被传入树的根部（root），然后从root开始寻找，哪个dialog被点中，dialog的哪个button被点中，并调用buton被点中的回调函数，用于作相应处理（一般会进行button的状态修改及重绘工作） @@ -51,7 +53,9 @@ widgets: 当需要删掉该界面元素时，使用disconnect()；从此该界面元素会断绝所有的父子关系，从树上摘下来，不再响应用户的触控操作；但对象本身不会被销毁。典型应用场景：软键盘的创建/退出。 ## 图形绘制 -图形绘制包括： 绘制方法和图层管理。其中点绘制是线/面/位图绘制的基础，若干个点的绘制，形成点面及位图；图层管理，则是管理多个界面元素的遮挡关系，系统默认支持3层遮挡关系，这3个层次可以为：视图背景层，对话框层，keyboard/spinbox控件层。 +图形绘制包括： 绘制方法和图层管理。 +- 点绘制是线/面/位图绘制的基础，若干个点的绘制，形成点面及位图 +- 图层管理，则是管理多个界面元素的遮挡关系，系统默认支持3层遮挡关系，这3个层次可以为：视图背景层，对话框层，keyboard/spinbox控件层。 ### 绘制方法 请参看文件bitmap.cpp和surface.cpp中的draw_xxx()函数。