CN108196920B - 一种ui界面的显示处理方法及装置 - Google Patents
一种ui界面的显示处理方法及装置 Download PDFInfo
- Publication number
- CN108196920B CN108196920B CN201611121830.5A CN201611121830A CN108196920B CN 108196920 B CN108196920 B CN 108196920B CN 201611121830 A CN201611121830 A CN 201611121830A CN 108196920 B CN108196920 B CN 108196920B
- Authority
- CN
- China
- Prior art keywords
- interface
- node
- rendering
- element node
- information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 15
- 238000009877 rendering Methods 0.000 claims abstract description 99
- 238000000034 method Methods 0.000 claims abstract description 38
- 238000005516 engineering process Methods 0.000 claims abstract description 22
- 238000012545 processing Methods 0.000 claims abstract description 13
- 238000004458 analytical method Methods 0.000 claims description 4
- 230000000694 effects Effects 0.000 abstract description 6
- 230000006870 function Effects 0.000 description 9
- 238000012217 deletion Methods 0.000 description 4
- 230000037430 deletion Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 3
- 230000000007 visual effect Effects 0.000 description 3
- 238000012800 visualization Methods 0.000 description 2
- 238000013461 design Methods 0.000 description 1
- 238000012938 design process Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Digital Computer Display Output (AREA)
Abstract
本发明实施例公开了一种UI界面的显示处理方法及装置，所述方法包括：解析待显示UI界面，得到所述待显示UI界面的元素节点；根据所述待显示UI界面的元素节点创建与待显示UI界面对应的树形控件；配置所述待显示UI界面的与所述树形控件对应的渲染列表；以及根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。本发明实施例提出的UI界面的显示处理方法及装置，能够高效地实现UI界面的渲染，提高复杂UI界面的显示速度和显示效果，提升用户的使用体验。
Description
技术领域
本发明涉及图形用户界面技术领域，尤其涉及一种UI界面的显示处理方法及装置。
背景技术
随着计算机技术的不断发展，硬件性能的不断提高，这使得设计更加复杂的UI控件成为可能。发明人在实现本发明过程中发现：虽然Windows已经提供有相应的UI控件，但是这些UI控件的功能比较单一，使用比较繁琐。而对于复杂的UI控件，不仅设计过程复杂，同时，在对复杂UI控件的界面进行显示时，经常会出现如闪烁或数据残留等现象，影响用户观看体验，而且现有技术无法灵活地实现UI控件的扩展和更新。
发明内容
鉴于上述问题，本发明提出了一种UI界面的显示处理方法及装置，能够高效地实现UI界面的渲染，提高复杂UI界面的显示速度和显示效果，提升用户的使用体验。
本发明的一个方面，提供了一种UI界面的显示处理方法，所述方法包括:
解析待显示UI界面，得到所述待显示UI界面的元素节点；
根据所述待显示UI界面的元素节点创建与待显示UI界面对应的树形控件；
配置所述待显示UI界面的与所述树形控件对应的渲染列表；以及
根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。
可选地，所述树形控件中的每一元素节点配置有对应的元素数据结构，所述元素数据结构包括对应元素节点在树形控件中的绘制信息、位置信息和对应元素节点的父节点信息和子节点列表。
可选地，所述配置所述待显示UI界面的与所述树形控件对应的渲染列表，包括：
确定所述树形控件中每一元素节点对应的元素数据结构的渲染信息；将各个元素数据结构的渲染信息进行组合，得到所述待显示UI界面的渲染列表。
可选地，所述根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染，包括：
采用双缓冲技术创建与所述树形控件对应的位图对象；
根据所述渲染列表中各元素节点在树形控件中的位置信息确定对应元素节点在所述位图对象中对应的待渲染区域；
根据各元素节点在树形控件中的绘制信息对所述待渲染区域进行渲染；
将渲染后的所述位图对象绘制到所述树形控件。
可选地，所述方法还包括：
在接收到元素节点添加请求时，根据待添加元素节点的父节点信息查找对应的父元素节点，所述元素节点添加请求中包括有待添加元素节点的父节点信息；
为所述待添加元素节点配置对应的待添加元素数据结构，将所述待添加元素数据结构添加在所述父元素节点中；
将待添加元素数据结构的渲染信息添加到所述渲染列表中。
可选地，所述方法还包括：
在接收到元素节点更新请求时，根据待更新元素节点的节点信息查找对应的元素节点，所述元素节点更新请求中包括有待更新元素节点的节点信息和该元素节点在树形控件中的目标绘制信息；
根据所述目标绘制信息对所述待更新元素节点对应的待渲染区域进行重新渲染。
本发明的又一个方面，提供了一种UI界面的显示处理装置，所述装置包括:
解析模块，用于解析待显示UI界面，得到所述待显示UI界面的元素节点；
生成模块，用于根据所述待显示UI界面的元素节点创建与待显示UI界面对应的树形控件；
配置模块，用于配置所述待显示UI界面的与所述树形控件对应的渲染列表；
显示模块，用于根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。
可选地，所述树形控件中的每一元素节点配置有对应的元素数据结构，所述元素数据结构包括对应元素节点在树形控件中的绘制信息、位置信息和对应元素节点的父节点信息和子节点列表。
可选地，所述配置模块，具体用于确定所述树形控件中每一元素节点对应的元素数据结构的渲染信息；将各个元素数据结构的渲染信息进行组合，得到所述待显示UI界面的渲染列表。
可选地，所述显示模块，包括：
创建单元，用于采用双缓冲技术创建与所述树形控件对应的位图对象；
确定单元，用于根据所述渲染列表中各元素节点在树形控件中的位置信息确定对应元素节点在所述位图对象中对应的待渲染区域；
渲染单元，用于根据各元素节点在树形控件中的绘制信息对所述待渲染区域进行渲染；
显示单元，用于将渲染后的所述位图对象绘制到所述树形控件。
本发明实施例提供的UI界面的显示处理方法及装置，通过对待显示UI界面进行解析，得到待显示UI界面的元素节点，并根据待显示UI界面的元素节点创建待显示UI界面对应的树形控件，以根据与待显示UI界面的树形控件对应的渲染列表，采用双缓冲技术对该树形控件进行渲染，实现对待显示UI界面的高效渲染，提高复杂UI界面的显示速度和显示效果，进而提升用户的使用体验。
此外，本发明实施例提供的UI界面的显示处理方法及装置，通过对待显示UI界面进行解析，得到待显示UI界面的元素节点，进而可以灵活地实现基于元素节点的UI控件的扩展和更新。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：
图1示出了本发明实施例的一种UI界面的显示处理方法的流程图；
图2示出了本发明实施例的UI界面的显示处理方法中步骤S14的细分流程图；
图3示出了本发明实施例的一种UI界面的显示处理装置的结构示意图；
图4示出了本发明实施例的UI界面的显示处理装置中显示模块的内部结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。
本技术领域技术人员可以理解，除非另外定义，这里使用的所有术语(包括技术术语和科学术语)，具有与本发明所属领域中的普通技术人员的一般理解相同的意义。还应该理解的是，诸如通用字典中定义的那些术语，应该被理解为具有与现有技术的上下文中的意义一致的意义，并且除非被特定定义，否则不会用理想化或过于正式的含义来解释。
图1示意性示出了本发明实施例的一种UI界面的显示处理方法的流程图。参照图1，本发明实施例的UI界面的显示处理方法具体包括以下步骤：
S11、解析待显示UI界面，得到所述待显示UI界面的元素节点。
目前，在开发Windows可视化窗口程序时通常会用到列表或树控件，即将可视化窗口程序中的数组信息展示到窗口上。本实施例中，UI界面的元素节点即UI界面对应的树控件的枝干或树叶，例如要实现一个好友列表的树形控件，好友类型就是一个枝干，类型名称是一个Lable控件是好友枝干的叶子，好友张三列表项又是好友类型对应枝干的枝干，而列表项又是由好友头像UI，好友名字UI，可能还有按钮UI这些叶子组成。因此，通过对UI界面进行解析，可以得到该UI界面的元素节点。
S12、根据所述待显示UI界面的元素节点创建与待显示UI界面对应的树形控件。
本实施例中，树形控件中的每一元素节点配置有对应的元素数据结构，所述元素数据结构包括对应元素节点在树形控件中的绘制信息、位置信息和对应元素节点的父节点信息和子节点列表。其中，父节点信息可以为父节点句柄。元素结构可以看作是列表项。从数据层面看控件其实是一个列表，列表项是子项信息包括了渲染信息，如果现在子项添加其他UI控件，其实就是在子项信息中在添加一个列表，列表项信息就是你要添加的UI控件的渲染信息。当控件需要更新的时候记得遍历子项中的列表就可以实现了。这样一来子项中的UI就被称为子项的子项，也就是大家所认识的树型结构了。
S13、配置所述待显示UI界面的与所述树形控件对应的渲染列表。
相应地，所述配置所述待显示UI界面的与所述树形控件对应的渲染列表，具体包括：确定所述树形控件中每一元素节点对应的元素数据结构的渲染信息；将各个元素数据结构的渲染信息进行组合，得到所述待显示UI界面的渲染列表。
S14、根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。
本发明实施例中，通过对待显示UI界面进行解析，得到所述待显示UI界面的元素节点，然后在MFC中创建一个CWnd原始控件，用来作为容器(或称为画板)，然后通过CWnd控件的消息回调，如OnPain()窗口绘制消息，OnMouseMove()鼠标移动消息，OnLButtonDown()鼠标左键按下消息，OnLButtonUp()鼠标左键抬起，OnMouseWheel()鼠标滑轮消息，OnVScroll()拖放滚动条消息，OnMouseLeave()鼠标移出消息等，来绘制一个与待显示UI界面对应的树形控件，根据待显示UI界面的元素节点添加ROOT元素，具体实现如下：子项信息保存在原始父节点列表中，子项UI信息保存在子项列表中。设置回调函数，本实施例中，为了实现CWnd控件的消息回调，还包括设置消息回调函数的步骤。具体的，回调函数是通过BOOST库提供的函数绑定方法定义函数回调，然后用库提供的方法将外部的函数设置到内部中定义的回调函数值中，最后在控件内部调用回调，函数实现其实是在外部定义的。然后通过CScrollBar的Create方法创建滚动条，然后用SCROLLINFO结构体设置滚动条，最后通过OnVScroll()滚动条拖放消息使控件显示和滚动条高度保持一致。
树形控件中的每一元素节点配置有对应的元素数据结构，该元素数据结构包含对应元素节点在树形控件中的绘制信息(文本图片等)、位置信息和对应元素节点的元素数据信息，如父节点信息和子节点列表等。
元素数据结构的代码实现具体如下：
最后定义控件的一些属性，如渲染列表将所有的元素添加到列表中，当前选中项元素句柄(元素结构内存地址)，ROOT元素是指所有枝干叶子的最上层元素这里可以理解为控件本身，滚动条类型一般只垂直或水平显示等。
本发明实施例提供的UI界面的显示处理方法，通过对待显示UI界面进行解析，得到待显示UI界面的元素节点，并根据待显示UI界面的元素节点创建待显示UI界面对应的树形控件，以根据与待显示UI界面的树形控件对应的渲染列表，采用双缓冲技术对该树形控件进行渲染，实现对待显示UI界面的高效渲染，提高复杂UI界面的显示速度和显示效果，进而提升用户的使用体验。此外，本发明实施例提供的UI界面的显示处理方法，通过对待显示UI界面进行解析，得到待显示UI界面的元素节点，进而可以灵活地实现基于元素节点的UI控件的扩展和更新。
为了进一步体现发明的优越性，如下进一步揭示本发明UI界面的显示处理方法中步骤S14的细分步骤，来体现依据本步骤实现的另一实施例。参照图2，本步骤的细分步骤包括：
S141、采用双缓冲技术创建与所述树形控件对应的位图对象；
操作流程具体如下，创建GDI双缓冲，首先通过CreateCompatibleDC方法创建一个临时DC，然后通过CreateCompatibleBitmap方法创建一个位图对象HBITMAP，最后通过SelectObject方法将HBITMAP选到临时DC中，这样就完成双缓冲创建。
S142、根据所述渲染列表中各元素节点在树形控件中的位置信息确定对应元素节点在所述位图对象中对应的待渲染区域；
S143、根据各元素节点在树形控件中的绘制信息对所述待渲染区域进行渲染；
S144、将渲染后的所述位图对象绘制到所述树形控件。
本发明实施例中，具体通过以下方式实现控件的渲染：
OnPain消息回调：首先获取控件的大小，然后使用GDI+双缓冲技术定义一个与控件的大小相同的Bitmap，遍历渲染列表，根据每个列表项中的位置信息(即列表项对应的元素在Bitmap中的位置)计算当前开始渲染位置并保存渲染节点在列表中的迭代器，然后通过一个While循环从保存的迭代器继续遍历列表，每遍历一个列表项，将该列表项提供的信息渲染到双缓冲区的Bitmap中。最后，通过GDI+的DrawImage方法，把双缓冲区的Bitmap绘制到CWnd中。
InvalidateEx方法：刷新整个控件，通过调用Cwnd::Invalidate方法来实现，刷新逻辑在CWnd::OnPain消息回调中实现。
InvalidateItem方法：更新某一个节点，通过输入的节点句柄，遍历列表查找列表项，然后根据列表项的渲染信息进行绘制，并根据列表项的位置信息覆盖到失效的区域。
本发明实施例中，使用高效的GID+双缓冲技术进行渲染，并通过将UI界面解析成对应的树形控件，从数据层面看控件其实就是一个列表，当更新和显示的时候可以只渲染用户感兴趣的子项，其他子项可以忽略。例如。当显示控件时，是从列表的第一项开始的，然后在渲染第二项…….，当超过控件的显示高度是可以停止了，同理当控件滚动或滑动时是一样的。本发明实施例解决了现有技术中在对复杂UI空间的界面进行显示时，出现的如闪烁或数据残留等现象的问题，达到了随着子节点的增加控件渲染效率不变的效果，提高用户观看体验。
为了实现在控件子项中添加其他UI控件子项，在本发明的一个可选实施例中，所述方法还包括以下步骤：在接收到元素节点添加请求时，根据待添加元素节点的父节点信息查找对应的父元素节点，所述元素节点添加请求中包括有待添加元素节点的父节点信息；为所述待添加元素节点配置对应的待添加元素数据结构，将所述待添加元素数据结构添加在所述父元素节点中；将待添加元素数据结构的渲染信息添加到所述渲染列表中。本发明实施例可以通过在待添加元素节点配置对应的待添加元素数据结构，并通过在对应的父元素节点中添加待添加元素数据结构，实现在控件子项中添加其他UI控件子项的操作，而且本发明实施例提供的在控件子项中添加其他UI控件子项的实现方案中，UI控件子项的增加不会影响控件的渲染效率。
在一个具体实施例中，创建子项可通过以下方式实现：1、通过文件，由于JSON格式的文件本来就是数据结构，本实施可以把列表子项的信息数据按照树型结构保存到文件中，当要显示控件时把JSON文件读取到一个列表中即可实现。2、动态添加，比较简单一般是按照一定的样式一条一条的往列表中添加。
具体代码实现如下：
Addnode方法:根据传进来的父节点句柄查找对应的列表项，然后实例化NEW一个TreeItemInfo结构体添加到查询到的列表项的列表中，如果查询句柄为空直接添加到列表项尾部，最后还要把TreeItemInfo结构添加到渲染列表中。
AddNodeByList方法：跟Addnode大致一样，只是最后添加是从输入的列表完整添加到渲染列表中。
为了实现对树形控件中的元素节点的更新，在本发明的一个可选实施例中，所述方法还包括以下步骤：在接收到元素节点更新请求时，根据待更新元素节点的节点信息查找对应的元素节点，所述元素节点更新请求中包括有待更新元素节点的节点信息和该元素节点在树形控件中的目标绘制信息；根据所述目标绘制信息对所述待更新元素节点对应的待渲染区域进行重新渲染。本发明实施例可以通过对待更新元素节点的节点信息和该元素节点在树形控件中的目标绘制信息进行更新，实现对待更新元素节点对应的待渲染区域的重新渲染。简单方便地实现UI控件子项的更新。
此外，基于相同的原理，本发明实施例还能够实现在控件子项中设置不同的高度的操作。子项设置不同高度，其实就是对列表子项的位置信息的设置，当遍历渲染时只要渲染按照位置信息就可以实现每一个子项的高度都可以不同。本发明实施例能够实现复杂UI界面的快速设置和显示，进一步提升用户的使用体验。
为了实现对树形控件中的元素节点的删除，在本发明的一个可选实施例中，所述方法还包括以下步骤：在接收到元素节点删除请求时，根据待删除元素节点的节点信息查找对应的元素节点，所述元素节点删除请求中包括有待删除元素节点的节点信息；删除该元素节点在树形控件中的目标绘制信息。本发明实施例通过删除元素节点在树形控件中的目标绘制信息的方式，实现元素节点的删除。在一个具体实施例中，删除子项可通过DeleteAllChild方法实现。具体的，DeleteAllChild方法：根据输入的节点句柄，遍历列表查找列表项并进行删除操作。
在执行对树形控件中的元素节点的更新、删除以及在树形控件中的添加新的元素节点等操作后，需要对与所述树形控件对应的渲染列表进行相应操作，并根据更新后的渲染列表，采用双缓冲技术对所述树形控件进行重新渲染，以实现更新后的UI界面的显示。
本发明实施例提供的UI界面的显示处理方法，在开发可视化UI程序时，可以把所可以看到的元素(例如文本，按钮，图片，面板等UI元素)看做一个元素节点或一个列表项，然后把所有的这些元素构建到树型结构中来，例如把主界面看做主干，由主干在分成许多面板枝干，在每个枝干由许多元素(按钮，图片等)来组成，类似枝干的树叶。其中有些复杂的枝干面板又可以由许多面板或元素组成。由此将一个复杂的UI界面构造成一个树型的数据结构。该树型结构，是一个数据信息结构，存在于内存也可以理解为一个字符串，由于最终是想得到一个可视化界面，这样就必须遍历树结构中的所有元素(列表项)，通过元素中绘制信息使用GDI+双缓冲技术或其他绘制技术将元素绘制出来，即得到一个复杂的可视化界面。
对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明实施例并不受所描述的动作顺序的限制，因为依据本发明实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明实施例所必须的。
图3示意性示出了本发明一个实施例的UI界面的显示处理装置的结构示意图。参照图3，本发明实施例的UI界面的显示处理装置具体包括解析模块301、生成模块302、配置模块303以及显示模块304，其中：所述的解析模块301，用于解析待显示UI界面，得到所述待显示UI界面的元素节点；所述的生成模块302，用于根据所述待显示UI界面的元素节点创建与待显示UI界面对应的树形控件；所述的配置模块303，用于配置所述待显示UI界面的与所述树形控件对应的渲染列表；所述的显示模块304，用于根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染。
在本发明实施例中，所述树形控件中的每一元素节点配置有对应的元素数据结构，所述元素数据结构包括对应元素节点在树形控件中的绘制信息、位置信息和对应元素节点的父节点信息和子节点列表。
进一步地，所述配置模块303，具体用于确定所述树形控件中每一元素节点对应的元素数据结构的渲染信息；将各个元素数据结构的渲染信息进行组合，得到所述待显示UI界面的渲染列表。
为了进一步体现发明的优越性，如下进一步揭示本发明UI界面的显示处理装置中显示模块304的内部结构图，来体现依据本步骤实现的另一实施例。参照图4，本实施例中的显示模块304，具体包括：创建单元3041、确定单元3042、渲染单元3043以及显示单元3044，其中：所述的创建单元3041，用于采用双缓冲技术创建与所述树形控件对应的位图对象；所述的确定单元3042，用于根据所述渲染列表中各元素节点在树形控件中的位置信息确定对应元素节点在所述位图对象中对应的待渲染区域；所述的渲染单元3043，用于根据各元素节点在树形控件中的绘制信息对所述待渲染区域进行渲染；所述的显示单元3044，用于将渲染后的所述位图对象绘制到所述树形控件。
本发明实施例中，所述装置还包括附图中未示出的子项添加模块，所述的子项添加模块，用于在接收到元素节点添加请求时，根据待添加元素节点的父节点信息查找对应的父元素节点，所述元素节点添加请求中包括有待添加元素节点的父节点信息；为所述待添加元素节点配置对应的待添加元素数据结构，将所述待添加元素数据结构添加在所述父元素节点中；将待添加元素数据结构的渲染信息添加到所述渲染列表中。本发明实施例中，子项添加模块可以通过在待添加元素节点配置对应的待添加元素数据结构，并通过在对应的父元素节点中添加待添加元素数据结构，实现在控件子项中添加其他UI控件子项的操作，而且本发明实施例提供的在控件子项中添加其他UI控件子项的实现方案中，UI控件子项的增加不会影响控件的渲染效率。
本发明实施例中，所述装置还包括附图中未示出的子项更新模块，所述的子项更新模块，用于在接收到元素节点更新请求时，根据待更新元素节点的节点信息查找对应的元素节点，所述元素节点更新请求中包括有待更新元素节点的节点信息和该元素节点在树形控件中的目标绘制信息；根据所述目标绘制信息对所述待更新元素节点对应的待渲染区域进行重新渲染。本发明实施例中，子项更新模块可以通过对待更新元素节点的节点信息和该元素节点在树形控件中的目标绘制信息进行更新，实现对待更新元素节点对应的待渲染区域的重新渲染。简单方便地实现UI控件子项的更新。
此外，基于相同的原理，所述子项更新模块，还能够实现在控件子项中设置不同的高度的操作。本发明实施例能够实现复杂UI界面的快速设置和显示，进一步提升用户的使用体验。
本发明实施例中，所述装置还包括附图中未示出的子项删除模块，所述的子项删除模块，用于在接收到元素节点删除请求时，根据待删除元素节点的节点信息查找对应的元素节点，所述元素节点删除请求中包括有待删除元素节点的节点信息；删除该元素节点在树形控件中的目标绘制信息。本发明实施例通过删除元素节点在树形控件中的目标绘制信息的方式，实现元素节点的删除。
对于装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。
本发明实施例提供的UI界面的显示处理方法及装置，通过对待显示UI界面进行解析，得到待显示UI界面的元素节点，并根据待显示UI界面的元素节点创建待显示UI界面对应的树形控件，以根据与待显示UI界面的树形控件对应的渲染列表，采用双缓冲技术对该树形控件进行渲染，实现对待显示UI界面的高效渲染，提高复杂UI界面的显示速度和显示效果，进而提升用户的使用体验。此外，本发明实施例提供的UI界面的显示处理方法，通过对待显示UI界面进行解析，得到待显示UI界面的元素节点，进而可以灵活地实现基于元素节点的UI控件的扩展和更新。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
此外，本领域的技术人员能够理解，尽管在此的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (8)
1.一种UI界面的显示处理方法，其特征在于，所述方法包括:
解析待显示UI界面，得到所述待显示UI界面的元素节点；
根据所述待显示UI界面的元素节点创建与所述待显示UI界面对应的树形控件；
配置所述待显示UI界面的与所述树形控件对应的渲染列表；以及
根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染，具体包括：
采用双缓冲技术创建与所述树形控件对应的位图对象；
根据所述渲染列表中各元素节点在树形控件中的位置信息确定对应元素节点在所述位图对象中对应的待渲染区域；
根据各元素节点在树形控件中的绘制信息对所述待渲染区域进行渲染；
将渲染后的所述位图对象绘制到所述树形控件。
2.根据权利要求1所述的方法，其特征在于，所述树形控件中的每一元素节点配置有对应的元素数据结构，所述元素数据结构包括对应元素节点在树形控件中的绘制信息、位置信息和对应元素节点的父节点信息和子节点列表。
3.根据权利要求2所述的方法，其特征在于，所述配置所述待显示UI界面的与所述树形控件对应的渲染列表，包括：
确定所述树形控件中每一元素节点对应的元素数据结构的渲染信息；将各个元素数据结构的渲染信息进行组合，得到所述待显示UI界面的渲染列表。
4.根据权利要求2所述的方法，其特征在于，所述方法还包括：
在接收到元素节点添加请求时，根据待添加元素节点的父节点信息查找对应的父元素节点，所述元素节点添加请求中包括有待添加元素节点的父节点信息；
为所述待添加元素节点配置对应的待添加元素数据结构，将所述待添加元素数据结构添加在所述父元素节点中；
将待添加元素数据结构的渲染信息添加到所述渲染列表中。
5.根据权利要求2所述的方法，其特征在于，所述方法还包括：
在接收到元素节点更新请求时，根据待更新元素节点的节点信息查找对应的元素节点，所述元素节点更新请求中包括有待更新元素节点的节点信息和该元素节点在树形控件中的目标绘制信息；
根据所述目标绘制信息对所述待更新元素节点对应的待渲染区域进行重新渲染。
6.一种UI界面的显示处理装置，其特征在于，所述装置包括:
解析模块，用于解析待显示UI界面，得到所述待显示UI界面的元素节点；
生成模块，用于根据所述待显示UI界面的元素节点创建与待显示UI界面对应的树形控件；
配置模块，用于配置所述待显示UI界面的与所述树形控件对应的渲染列表；
显示模块，用于根据所述渲染列表，采用双缓冲技术对所述树形控件进行渲染，所述显示模块，具体包括：
创建单元，用于采用双缓冲技术创建与所述树形控件对应的位图对象；
确定单元，用于根据所述渲染列表中各元素节点在树形控件中的位置信息确定对应元素节点在所述位图对象中对应的待渲染区域；
渲染单元，用于根据各元素节点在树形控件中的绘制信息对所述待渲染区域进行渲染；
显示单元，用于将渲染后的所述位图对象绘制到所述树形控件。
7.根据权利要求6所述的装置，其特征在于，所述树形控件中的每一元素节点配置有对应的元素数据结构，所述元素数据结构包括对应元素节点在树形控件中的绘制信息、位置信息和对应元素节点的父节点信息和子节点列表。
8.根据权利要求6所述的装置，其特征在于，所述配置模块，具体用于确定所述树形控件中每一元素节点对应的元素数据结构的渲染信息；将各个元素数据结构的渲染信息进行组合，得到所述待显示UI界面的渲染列表。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611121830.5A CN108196920B (zh) | 2016-12-08 | 2016-12-08 | 一种ui界面的显示处理方法及装置 |
| PCT/CN2017/075739 WO2018103218A1 (zh) | 2016-12-08 | 2017-03-06 | 一种ui界面的显示处理方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611121830.5A CN108196920B (zh) | 2016-12-08 | 2016-12-08 | 一种ui界面的显示处理方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108196920A CN108196920A (zh) | 2018-06-22 |
| CN108196920B true CN108196920B (zh) | 2020-01-03 |
Family
ID=62490762
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611121830.5A Active CN108196920B (zh) | 2016-12-08 | 2016-12-08 | 一种ui界面的显示处理方法及装置 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN108196920B (zh) |
| WO (1) | WO2018103218A1 (zh) |
Families Citing this family (19)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109324796B (zh) * | 2018-08-01 | 2022-09-09 | 浙江口碑网络技术有限公司 | 界面布局方法及装置 |
| CN110837368B (zh) * | 2018-08-17 | 2023-04-07 | 阿里巴巴集团控股有限公司 | 一种数据处理的方法、装置及电子设备 |
| US10705708B2 (en) | 2018-11-29 | 2020-07-07 | International Business Machines Corporation | Data expansion control |
| CN109656557B (zh) * | 2018-12-19 | 2022-08-05 | 北京像素软件科技股份有限公司 | 用户界面生成方法及装置 |
| CN110221889B (zh) * | 2019-05-05 | 2020-09-25 | 北京三快在线科技有限公司 | 一种页面展示方法、装置、电子设备及存储介质 |
| CN111899311B (zh) | 2019-05-06 | 2023-09-26 | 广州腾讯科技有限公司 | 元素渲染方法、装置、存储介质和计算机设备 |
| CN110515610B (zh) * | 2019-06-27 | 2021-01-29 | 华为技术有限公司 | 页面绘制的控制方法、装置及设备 |
| CN111221528B (zh) * | 2019-12-27 | 2023-07-25 | 广东金赋科技股份有限公司 | 级联数据显示方法 |
| CN111258474B (zh) * | 2020-01-15 | 2021-07-06 | 广东三维家信息科技有限公司 | 基于gui的交互方法、装置及电子设备 |
| CN111506380A (zh) * | 2020-04-22 | 2020-08-07 | 上海极链网络科技有限公司 | 一种渲染方法、装置、设备及存储介质 |
| CN111539186B (zh) * | 2020-04-29 | 2023-05-09 | 烽火通信科技股份有限公司 | 一种应用于html5的大数据树组件实现方法及系统 |
| CN113626113B (zh) * | 2020-05-08 | 2024-04-05 | 北京沃东天骏信息技术有限公司 | 一种页面渲染方法和装置 |
| CN112604277B (zh) * | 2020-12-29 | 2021-08-31 | 广州银汉科技有限公司 | 一种基于手机游戏gui快速复刻生产方法 |
| CN113190230B (zh) * | 2021-05-21 | 2024-05-03 | 广东群创信息科技有限公司 | 一种自定义设置ui界面的医疗显示方法及系统 |
| CN113312135B (zh) * | 2021-07-30 | 2021-11-09 | 平安科技（深圳）有限公司 | 一种列表展示方法、装置、计算机设备及存储介质 |
| CN113342454B (zh) * | 2021-08-05 | 2021-11-16 | 北京金堤科技有限公司 | 用于确定详情卡片位置的方法和装置 |
| CN113923519B (zh) * | 2021-11-11 | 2024-02-13 | 深圳万兴软件有限公司 | 视频渲染方法、装置、计算机设备及存储介质 |
| CN114840293A (zh) * | 2022-04-22 | 2022-08-02 | 平安国际智慧城市科技股份有限公司 | 树形控件的渲染方法、装置、计算机设备及存储介质 |
| CN117648153B (zh) * | 2024-01-29 | 2024-04-26 | 太平金融科技服务（上海）有限公司 | 一种渲染展示方法、装置、电子设备和存储介质 |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101556539A (zh) * | 2009-04-03 | 2009-10-14 | 腾讯科技（北京）有限公司 | 一种基于mac os操作系统上实现树状结构的方法及装置 |
| CN101944027A (zh) * | 2010-09-26 | 2011-01-12 | 北京神州泰岳软件股份有限公司 | 一种用户界面生成方法 |
| CN102955680A (zh) * | 2011-08-25 | 2013-03-06 | 腾讯科技（深圳）有限公司 | 写屏方法及具写屏功能的移动终端 |
-
2016
- 2016-12-08 CN CN201611121830.5A patent/CN108196920B/zh active Active
-
2017
- 2017-03-06 WO PCT/CN2017/075739 patent/WO2018103218A1/zh active Application Filing
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101556539A (zh) * | 2009-04-03 | 2009-10-14 | 腾讯科技（北京）有限公司 | 一种基于mac os操作系统上实现树状结构的方法及装置 |
| CN101944027A (zh) * | 2010-09-26 | 2011-01-12 | 北京神州泰岳软件股份有限公司 | 一种用户界面生成方法 |
| CN102955680A (zh) * | 2011-08-25 | 2013-03-06 | 腾讯科技（深圳）有限公司 | 写屏方法及具写屏功能的移动终端 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2018103218A1 (zh) | 2018-06-14 |
| CN108196920A (zh) | 2018-06-22 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108196920B (zh) | 一种ui界面的显示处理方法及装置 | |
| US10732803B2 (en) | Presentation and analysis of user interaction data | |
| US10261660B2 (en) | Orbit visualization animation | |
| US9965475B2 (en) | User interface for navigating comments associated with collaboratively edited electronic documents | |
| US9589233B2 (en) | Automatic recognition and insights of data | |
| US8810576B2 (en) | Manipulation and management of links and nodes in large graphs | |
| AU2014233570B2 (en) | Presentation and analysis of user interaction data | |
| KR101811464B1 (ko) | 옵션들을 선택하기 위한 스핀 컨트롤 사용자 인터페이스 | |
| KR101794373B1 (ko) | 선택된 데이터의 일시적인 포맷팅 및 도표화 기법 | |
| US10733367B2 (en) | Underlying grid structure and animation of tables | |
| RU2504838C2 (ru) | Синхронизированные, ориентированные на диалог перечень сообщений и область чтения сообщения | |
| US9053081B2 (en) | Creating, updating, saving, and propagating customized views of table and grid information | |
| US8935301B2 (en) | Data context selection in business analytics reports | |
| US8560971B2 (en) | Management of selected and nonselected items in a list | |
| US20140033084A1 (en) | Method and apparatus for filtering object-related features | |
| US10019427B2 (en) | Managing comments for collaborative editing of electronic documents | |
| US10726592B2 (en) | Technology for generating product designs using multiple canvases | |
| CN109190097B (zh) | 用于输出信息的方法和装置 | |
| US11908493B2 (en) | Single clip segmentation of media | |
| US20230086037A1 (en) | Graphical diagram comparison | |
| Pulo | Navani: Navigating large-scale visualisations with animated transitions | |
| US20240005586A1 (en) | Systems and methods for animating transition of an object | |
| US20160062594A1 (en) | Boundary Limits on Directional Selection Commands | |
| CN114398122A (zh) | 输入方法、装置、电子设备、存储介质及产品 | |
| CN118278361A (zh) | 文档的生成方法、装置、电子设备和介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20231123 Address after: Room 606-609, Compound Office Complex Building, No. 757, Dongfeng East Road, Yuexiu District, Guangzhou, Guangdong Province, 510699 Patentee after: China Southern Power Grid Internet Service Co.,Ltd. Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. |
|
| TR01 | Transfer of patent right |