CN115705375A - Tree component rendering method and device - Google Patents

Abstract

The embodiment of the application provides a tree component rendering method and device. The tree component rendering method comprises the following steps: acquiring a tree component list to be rendered, wherein the tree component list comprises index values corresponding to all nodes in the tree component and hierarchical relations among the nodes; acquiring at least one target node with rendering height matched with the height of the visual area of the tree component from the tree component list based on the height of the visual area of the tree component and the index value corresponding to each node in the tree component list; determining the display position of at least one target node in the rendering window based on the rendering height of at least one target node and the hierarchical relation between the nodes; and rendering the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node. According to the technical scheme of the embodiment of the application, the rendering efficiency is improved, and the rendering delay is reduced.

Description

Translated fromChinese

树形组件渲染方法、装置Tree component rendering method and device

技术领域technical field

本申请涉及组件渲染技术，具体而言，涉及一种树形组件渲染方法、装置。The present application relates to component rendering technology, in particular, to a tree component rendering method and device.

背景技术Background technique

树形结构指的是数据元素之间存在着“一对多”的树形关系的数据结构，是一类重要的非线性数据结构，文件夹的包含关系、组织架构、生物分类的划分、地理地区的划分等都是树形结构，树形结构中的树形组件可以完整展现其中的层级关系，并具有滚动、展开、收起、选择等交互功能。因此，树形组件是前端页面中常用的组件。The tree structure refers to the data structure in which there is a "one-to-many" tree relationship between data elements. It is an important type of non-linear data structure. The division of regions is a tree structure, and the tree components in the tree structure can fully display the hierarchical relationship, and have interactive functions such as scrolling, expanding, collapsing, and selecting. Therefore, the tree component is a commonly used component in the front-end page.

但是，在数据节点层级较多、数据量较大的应用场景中，大量数据会传入树形组件，相关的树形组件就会有明显的渲染延迟等问题。However, in an application scenario with many levels of data nodes and a large amount of data, a large amount of data will be transmitted to the tree component, and the related tree component will have obvious problems such as rendering delay.

发明内容Contents of the invention

本申请的实施例提供了一种树形组件渲染方法、装置，进而至少在一定程度上解决大数据量下树形组件渲染延迟的问题，提高树形组件渲染效率，提升用户体验。Embodiments of the present application provide a tree component rendering method and device, and further solve the problem of tree component rendering delay under a large amount of data at least to a certain extent, improve tree component rendering efficiency, and improve user experience.

本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得。Other features and advantages of the present application will become apparent from the following detailed description, or in part, be learned by practice of the present application.

根据本申请实施例的一个方面，提供了一种树形组件渲染方法，所述方法包括：According to an aspect of an embodiment of the present application, a tree component rendering method is provided, the method comprising:

获取待渲染的树形组件列表，所述树形组件列表包括树形组件中的各个节点所对应的索引值和节点之间的层级关系；Obtain a list of tree components to be rendered, the list of tree components includes index values corresponding to each node in the tree component and the hierarchical relationship between nodes;

基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点；Based on the height of the visible area of the tree component and the index value corresponding to each node in the tree component list, obtain from the list of tree components the rendering height matching the height of the visible area of the tree component at least one target node;

基于所述至少一个目标节点的渲染高度和节点之间的层级关系，确定所述至少一个目标节点在渲染视窗中的显示位置；Based on the rendering height of the at least one target node and the hierarchical relationship between nodes, determine the display position of the at least one target node in the rendering window;

基于所述至少一个目标节点的所述显示位置和所述至少一个目标节点对应的节点内容，在所述渲染视窗中对所述至少一个目标节点进行渲染。Render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.

根据本申请实施例的一个方面，提供了一种树形组件渲染装置，所述装置包括：According to an aspect of an embodiment of the present application, a tree component rendering device is provided, the device comprising:

列表获取单元，用于获取待渲染的树形组件列表，所述树形组件列表包括树形组件中的各个节点所对应的索引值和节点之间的层级关系；A list acquisition unit, configured to acquire a tree component list to be rendered, the tree component list including index values corresponding to each node in the tree component and hierarchical relationships between nodes;

目标节点确定单元，用于基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点；The target node determination unit is configured to obtain the rendering height from the tree component list and the available height of the tree component based on the height of the visible area of the tree component and the index value corresponding to each node in the tree component list. At least one target node matching the height of the viewport;

显示位置确定单元，用于基于所述至少一个目标节点的渲染高度和节点之间的层级关系，确定所述至少一个目标节点在渲染视窗中的显示位置；A display position determining unit, configured to determine the display position of the at least one target node in the rendering window based on the rendering height of the at least one target node and the hierarchical relationship between nodes;

渲染单元，用于基于所述至少一个目标节点的所述显示位置和所述至少一个目标节点对应的节点内容，在所述渲染视窗中对所述至少一个目标节点进行渲染。A rendering unit, configured to render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.

在本申请的一些实施例中，基于前述方案，所述列表获取单元被配置为：获取具有层级关系的树形组件结构；从所述树形组件结构的根节点开始依次进行遍历，生成包含有节点状态信息的状态树，所述节点状态信息包括节点深度和父节点标识符；将所述状态树进行平铺处理，得到所述树形组件列表。In some embodiments of the present application, based on the aforementioned solution, the list acquisition unit is configured to: acquire a tree-shaped component structure with a hierarchical relationship; traverse sequentially from the root node of the tree-shaped component structure, and generate A state tree of node state information, the node state information including node depth and parent node identifier; the state tree is tiled to obtain the tree component list.

在本申请的一些实施例中，基于前述方案，所述树形组件可视区域的高度小于所述树形组件列表中所有未被折叠的节点的渲染高度之和，所述装置还包括：In some embodiments of the present application, based on the foregoing solution, the height of the visible area of the tree component is smaller than the sum of the rendering heights of all unfolded nodes in the tree component list, and the device further includes:

滑动事件监听单元，用于监听所述渲染视窗中触发的滑动事件，得到滑动距离；A sliding event monitoring unit, configured to monitor the sliding event triggered in the rendering window to obtain the sliding distance;

第一节点更新单元，用于基于所述树形组件可视区域的高度、所述滑动距离以及所述树形组件列表中各个节点的索引值，对在所述树形组件可视区域内进行渲染显示的节点进行更新。The first node updating unit is configured to perform an update in the visible area of the tree component based on the height of the visible area of the tree component, the sliding distance, and the index value of each node in the list of the tree component. The node displayed by the renderer is updated.

在本申请的一些实施例中，基于前述方案，所述树形组件列表中各个节点索引值由小到大顺序排列；所述节点更新单元被配置为：In some embodiments of the present application, based on the aforementioned solution, the index values of the nodes in the tree component list are arranged in ascending order; the node update unit is configured to:

基于监听到所述滑动事件前，所述渲染视窗中首个已渲染节点的第一索引值、所述树形组件列表中各个节点的渲染高度，以及所述滑动距离，确定所述目标节点在所述树形组件列表中的起始索引值；Based on the first index value of the first rendered node in the rendering window, the rendering height of each node in the tree component list, and the sliding distance before the sliding event is detected, it is determined that the target node is at The starting index value in the tree component list;

根据所述树形组件可视区域的高度和所述树形组件列表中位于所述起始索引值之后的各个节点的渲染高度，确定所述目标节点在所述树形组件列表中的最小终止索引值；其中，所述目标节点中各个节点的渲染高度之和大于或等于所述树形组件可视区域的高度。Determine the minimum stop of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list Index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of the tree component.

在本申请的一些实施例中，基于前述方案，所述渲染单元被配置为：获取所述渲染视窗中的已创建节点对象；通过对所述已创建节点对象的引用，将所述已创建节点对象对应的节点内容替换为与所述已创建节点对象的显示位置相匹配的目标节点的节点内容；若所述已创建节点对象的数量小于所述目标节点的节点数量，则从所述目标节点中确定未匹配到已创建节点对象的节点；根据所述未匹配到已创建节点对象的节点的节点内容和显示位置，在所述渲染视窗中创建新的节点对象；将所述新的节点对象的引用存储在实际渲染节点列表中。In some embodiments of the present application, based on the foregoing solution, the rendering unit is configured to: obtain the created node object in the rendering window; The node content corresponding to the object is replaced with the node content of the target node that matches the display position of the created node object; if the number of the created node objects is less than the number of nodes of the target node, then from the target node Determine the node that is not matched to the created node object; according to the node content and display position of the node that is not matched to the created node object, create a new node object in the rendering window; put the new node object A reference to is stored in the list of actual render nodes.

在本申请的一些实施例中，基于前述方案，所述装置还包括：In some embodiments of the present application, based on the foregoing solution, the device further includes:

预加载节点确定单元，用于根据所述目标节点的索引值，从所述树形组件列表中截取位于所述目标节点之后的预设数量个节点，作为预加载节点；A preload node determining unit, configured to intercept a preset number of nodes located after the target node from the tree component list as preload nodes according to the index value of the target node;

预加载节点显示位置确定单元，用于基于所述预加载节点的节点层级关系以及渲染高度，确定所述预加载节点的显示位置；A preloading node display position determination unit, configured to determine the display position of the preloading node based on the node hierarchy relationship and rendering height of the preloading node;

预加载节点对象创建单元，用于根据所述预加载节点的显示位置和节点内容，创建预加载节点对象。The preloading node object creation unit is configured to create a preloading node object according to the display position and node content of the preloading node.

在本申请的一些实施例中，基于前述方案，所述装置还包括：In some embodiments of the present application, based on the foregoing solution, the device further includes:

拖曳事件监听单元，用于监听所述渲染视窗中的拖曳事件；a dragging event monitoring unit, configured to monitor dragging events in the rendering window;

第二节点更新单元，用于若所述拖曳事件为将第一节点拖曳到所述渲染视窗中空白区域，则将所述第一节点插入所述树形组件列表中根节点的最后一个子节点的末尾，并更新所述树形组件列表中各个节点的索引值；若所述拖曳事件为将所述第一节点拖曳到所述渲染视窗中第二节点所关联的操作区域，则在所述树形组件列表中将所述第一节点插入到所述第二节点所关联的操作区域对应的位置，并更新所述树形组件列表中各个节点的索引值。The second node update unit is configured to insert the first node into the last child node of the root node in the tree component list if the drag event is dragging the first node to a blank area in the rendering window end, and update the index value of each node in the tree component list; if the drag event is dragging the first node to the operation area associated with the second node in the rendering window, then in the tree inserting the first node into the position corresponding to the operation area associated with the second node in the tree component list, and updating the index value of each node in the tree component list.

在本申请的一些实施例中，基于前述方案，所述目标节点确定单元被配置为：基于所述树形组件可视区域的高度和更新后的树形组件列表中各个节点索引值，从所述更新后的树形组件列表中获取与所述树形组件可视区域的高度相匹配的至少一个目标节点。In some embodiments of the present application, based on the foregoing solution, the target node determination unit is configured to: based on the height of the visible area of the tree component and the updated index value of each node in the tree component list, from the Obtain at least one target node matching the height of the visible area of the tree component from the updated tree component list.

在本申请的一些实施例中，基于前述方案，所述树形组件列表中各个节点的索引值由小到大顺序排列；所述装置还包括：In some embodiments of the present application, based on the foregoing solution, the index values of each node in the tree component list are arranged in ascending order; the device further includes:

检索事件监听单元，用于监听所述渲染视窗中的检索事件，获取所述检索事件中的检索条件；A retrieval event monitoring unit, configured to monitor retrieval events in the rendering window, and obtain retrieval conditions in the retrieval events;

所述目标节点确定单元被配置为：确定所述树形组件列表中第一个满足所述检索条件的节点；获取所述第一个满足所述检索条件的节点的至少一个祖先节点，从所述至少一个祖先节点中确定首个目标节点；所述首个目标节点的索引值为所述目标节点在所述树形组件列表中的起始索引值；根据所述树形组件可视区域的高度和所述树形组件列表中位于所述起始索引值之后的各个节点的渲染高度，确定所述目标节点在所述树形组件列表中的最小终止索引值；其中，所述目标节点中各个节点的渲染高度之和大于或等于所述树形组件可视区域的高度；根据所述起始索引值和所述最小终止索引值获取所述目标节点。The target node determination unit is configured to: determine the first node satisfying the retrieval condition in the tree component list; acquire at least one ancestor node of the first node satisfying the retrieval condition, from the Determine the first target node among the at least one ancestor node; the index value of the first target node is the starting index value of the target node in the tree component list; according to the visible area of the tree component The height and the rendering height of each node after the start index value in the tree component list determine the minimum end index value of the target node in the tree component list; wherein, in the target node The sum of the rendering heights of each node is greater than or equal to the height of the visible area of the tree component; the target node is obtained according to the start index value and the minimum end index value.

根据本申请实施例的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的树形组件渲染方法。According to an aspect of the embodiments of the present application, a computer program product or computer program is provided, the computer program product or computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the tree component rendering method described in the above embodiments.

根据本申请实施例的一个方面，提供了一种计算机可读介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例中所述的树形组件渲染方法。According to an aspect of the embodiments of the present application, a computer-readable medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the tree component rendering method as described in the above-mentioned embodiments is implemented.

根据本申请实施例的一个方面，提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述电子设备实现如上述实施例中树形组件渲染方法。According to an aspect of the embodiments of the present application, an electronic device is provided, including: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more When executed by multiple processors, the electronic device is made to implement the tree component rendering method in the foregoing embodiments.

在本申请的一些实施例所提供的技术方案中，在对树形组件列表进行渲染时，从树形组件列表截取与树形组件可视区域高度相匹配的节点进行渲染显示，提高树形组件的渲染效率。In the technical solutions provided by some embodiments of the present application, when rendering the tree component list, the nodes that match the height of the visible area of the tree component are intercepted from the tree component list for rendering and display, improving the tree component rendering efficiency.

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the application.

附图说明Description of drawings

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理。显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。在附图中：The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description serve to explain the principles of the application. Apparently, the drawings in the following description are only some embodiments of the present application, and those skilled in the art can obtain other drawings according to these drawings without creative efforts. In the attached picture:

图1示出了可以应用本申请实施例的技术方案的示例性系统架构的示意图。Fig. 1 shows a schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of the present application can be applied.

图2-A示出了根据本申请一个实施例的对象树组件的渲染效果图。Fig. 2-A shows a rendering effect diagram of an object tree component according to an embodiment of the present application.

图2-B示出了根据本申请一个实施例的对象树组件的渲染效果图。Fig. 2-B shows a rendering effect diagram of an object tree component according to an embodiment of the present application.

图3-A示出了根据本申请一个实施例的资源树组件的渲染效果图。Fig. 3-A shows a rendering effect diagram of a resource tree component according to an embodiment of the present application.

图3-B示出了根据本申请一个实施例的资源树组件的渲染效果图。Fig. 3-B shows a rendering effect diagram of a resource tree component according to an embodiment of the present application.

图4-A示出了根据本申请一个实施例的文件夹选择树组件的渲染效果图。Fig. 4-A shows a rendering effect diagram of a folder selection tree component according to an embodiment of the present application.

图4-B示出了根据本申请一个实施例的树组件应用在软件中的效果图。Fig. 4-B shows an effect diagram of a tree component applied in software according to an embodiment of the present application.

图5示出了根据本申请一个实施例的树形组件渲染方法的流程图。Fig. 5 shows a flowchart of a tree component rendering method according to an embodiment of the present application.

图6示出了根据本申请一个实施例的树形组件可视区域与树形节点列表的对比图。Fig. 6 shows a comparison diagram between the visible area of the tree component and the list of tree nodes according to an embodiment of the present application.

图7示出了根据本申请一个实施例的步骤510的一种实现过程的流程图。FIG. 7 shows a flowchart of an implementation process ofstep 510 according to an embodiment of the present application.

图8示出了根据本申请一个实施例的树形组件结构。Fig. 8 shows a tree component structure according to an embodiment of the present application.

图9示出了根据本申请一个实施例的节点的数据结构Figure 9 shows the data structure of a node according to an embodiment of the present application

图10示出了根据本申请一个实施例的由树形组件结构生成树形组件列表的过程示意图。Fig. 10 shows a schematic diagram of a process of generating a tree component list from a tree component structure according to an embodiment of the present application.

图11示出了根据本申请一个实施例的树形组件渲染方法的流程图。Fig. 11 shows a flowchart of a tree component rendering method according to an embodiment of the present application.

图12示出了根据本申请一个实施例的Flickable视窗滑动示意图。Fig. 12 shows a schematic diagram of sliding a Flickable window according to an embodiment of the present application.

图13示出了根据本申请一个实施例的渲染视窗前后对比示意图。Fig. 13 shows a schematic diagram of the comparison before and after the rendering window according to an embodiment of the present application.

图14示出了根据本申请一个实施例的步骤1160的一种实现过程的流程图。FIG. 14 shows a flowchart of an implementation process ofstep 1160 according to an embodiment of the present application.

图15示出了根据本申请一个实施例的步骤540的一种实现过程的流程图。FIG. 15 shows a flowchart of an implementation process ofstep 540 according to an embodiment of the present application.

图16示出了根据本申请一个实施例的树形组件渲染方法的流程图。Fig. 16 shows a flowchart of a tree component rendering method according to an embodiment of the present application.

图17示出了根据本申请一个实施例的目标节点和预加载节点示意图。Fig. 17 shows a schematic diagram of a target node and a preload node according to an embodiment of the present application.

图18示出了根据本申请一个实施例的树形组件渲染方法的流程图。Fig. 18 shows a flowchart of a tree component rendering method according to an embodiment of the present application.

图19示出了根据本申请一个实施例的步骤520的一种实现过程的流程图。FIG. 19 shows a flowchart of an implementation process ofstep 520 according to an embodiment of the present application.

图20示出了根据本申请的一个实施例的树形组件渲染装置的框图。Fig. 20 shows a block diagram of an apparatus for rendering a tree component according to an embodiment of the present application.

图21示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。Fig. 21 shows a schematic structural diagram of a computer system suitable for implementing the electronic device of the embodiment of the present application.

具体实施方式Detailed ways

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本申请将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this application will be thorough and complete, and will fully convey the concepts of example embodiments to those skilled in the art.

此外，所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施例中。在下面的描述中，提供许多具体细节从而给出对本申请的实施例的充分理解。然而，本领域技术人员将意识到，可以实践本申请的技术方案而没有特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知方法、装置、实现或者操作以避免模糊本申请的各方面。Furthermore, the described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided in order to give a thorough understanding of the embodiments of the application. However, those skilled in the art will appreciate that the technical solutions of the present application may be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be employed. In other instances, well-known methods, apparatus, implementations, or operations have not been shown or described in detail to avoid obscuring aspects of the application.

附图中所示的方框图仅仅是功能实体，不一定必须与物理上独立的实体相对应。即，可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。The block diagrams shown in the drawings are merely functional entities and do not necessarily correspond to physically separate entities. That is, these functional entities may be implemented in software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices entity.

附图中所示的流程图仅是示例性说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解，而有的操作/步骤可以合并或部分合并，因此实际执行的顺序有可能根据实际情况改变。The flow charts shown in the drawings are only exemplary illustrations, and do not necessarily include all contents and operations/steps, nor must they be performed in the order described. For example, some operations/steps can be decomposed, and some operations/steps can be combined or partly combined, so the actual order of execution may be changed according to the actual situation.

需要说明的是：在本文中提及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。It should be noted that: the "plurality" mentioned in this article refers to two or more than two. "And/or" describes the association relationship of associated objects, indicating that there may be three types of relationships. For example, A and/or B may indicate: A exists alone, A and B exist simultaneously, and B exists independently. The character "/" generally indicates that the contextual objects are an "or" relationship.

需要注意的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的对象在适当情况下可以互换，以便这里描述的本申请的实施例能够以除了在图示或描述的那些以外的顺序实施。It should be noted that the terms "first" and "second" in the specification and claims of the present application and the above drawings are used to distinguish similar objects, but not necessarily to describe a specific sequence or sequence. It is to be understood that the terms so used are interchangeable under appropriate circumstances such that the embodiments of the application described herein can be practiced in sequences other than those illustrated or described.

图1示出了可以应用本申请实施例的技术方案的示例性系统架构的示意图。Fig. 1 shows a schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of the present application can be applied.

如图1所示，系统架构可以包括终端设备(如图1中所示智能手机101、平板电脑102和便携式计算机103中的一种或多种)、网络104和服务器105。网络104用以在终端设备和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线通信链路、无线通信链路等等。As shown in FIG. 1 , the system architecture may include a terminal device (one or more of asmart phone 101 , atablet 102 and aportable computer 103 as shown in FIG. 1 ), anetwork 104 and aserver 105 . Thenetwork 104 is used as a medium for providing a communication link between the terminal device and theserver 105 .Network 104 may include various connection types, such as wired communication links, wireless communication links, and so on.

在本申请的一个实施例中，可以是由终端设备获取来自服务器105的树形节点，终端设备将树形节点处理为待渲染的树形节点列表；基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点；基于所述至少一个目标节点的渲染高度和节点之间的层级关系，确定所述至少一个目标节点在渲染视窗中的显示位置；基于所述至少一个目标节点的所述显示位置和所述至少一个目标节点对应的节点内容，在所述渲染视窗中对所述至少一个目标节点进行渲染。In one embodiment of the present application, the terminal device may acquire the tree nodes from theserver 105, and the terminal device processes the tree nodes as a list of tree nodes to be rendered; based on the height of the visible area of the tree component and the The index value corresponding to each node in the tree component list, obtain at least one target node whose rendering height matches the height of the visible area of the tree component from the tree component list; based on the at least one target The rendering height of the node and the hierarchical relationship between the nodes determine the display position of the at least one target node in the rendering window; based on the display position of the at least one target node and the node content corresponding to the at least one target node , rendering the at least one target node in the rendering window.

需要说明的是，本申请实施例所提供的树形组件渲染方法可以由终端设备执行，相应地，树形组件渲染装置一般设置于终端设备中。但是，在本申请的其它实施例中，服务器也可以与终端设备具有相似的功能，从而执行本申请实施例所提供的树形组件渲染方案。It should be noted that the tree component rendering method provided in the embodiment of the present application may be executed by a terminal device, and accordingly, the tree component rendering apparatus is generally set in the terminal device. However, in other embodiments of the present application, the server may also have a similar function to the terminal device, so as to execute the tree component rendering solution provided in the embodiment of the present application.

还需要说明的是，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。终端可以是智能手机、平板电脑、笔记本电脑、台式计算机、智能音箱、智能手表等，但并不局限于此，本申请在此不做限制。It should also be noted that the numbers of terminal devices, networks and servers in FIG. 1 are only illustrative. According to the implementation requirements, the server can be an independent physical server, or a server cluster or distributed system composed of multiple physical servers, and can also provide cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, Cloud servers for basic cloud computing services such as cloud communications, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms. The terminal may be a smart phone, a tablet computer, a notebook computer, a desktop computer, a smart speaker, a smart watch, etc., but is not limited thereto, and the present application does not make a limitation here.

需要解释的是，如上所述的云计算(cloud computing)是一种计算模式，它将计算任务分布在大量计算机构成的资源池上，使各种应用系统能够根据需要获取计算力、存储空间和信息服务。提供资源的网络被称为“云”。“云”中的资源在使用者看来是可以无限扩展的，并且可以随时获取，按需使用，随时扩展。通过建立云计算资源池(简称云平台，一般称为IaaS(Infrastructure as a Service，基础设施即服务)平台，在资源池中部署多种类型的虚拟资源，供外部客户选择使用。云计算资源池中主要包括：计算设备(为虚拟化机器，包含操作系统)、存储设备、网络设备。What needs to be explained is that the above-mentioned cloud computing (cloud computing) is a computing model, which distributes computing tasks on a resource pool composed of a large number of computers, so that various application systems can obtain computing power, storage space and information as needed Serve. The network that provides resources is called a "cloud". The resources in the "cloud" can be infinitely expanded from the user's point of view, and can be obtained at any time, used on demand, and expanded at any time. By establishing a cloud computing resource pool (cloud platform for short, generally called IaaS (Infrastructure as a Service, infrastructure as a service) platform, various types of virtual resources are deployed in the resource pool for external customers to choose and use. Cloud computing resource pool It mainly includes: computing equipment (a virtualized machine, including an operating system), storage equipment, and network equipment.

图2-A示出了根据本申请一个实施例的对象树组件的渲染效果图。图2-A所示的对象树包含了位于一个拍摄模板下的节点，比如画板节点、LvBu(prefab)节点，一个LvBu(prefab)节点中可以包含用于描述动画的转场、效果等的多个子节点。后续SDK(SoftwareDevelopment Kit))渲染组件根据对象树进行拓扑遍历,按照图层的顺序渲染出来,形成图片序列帧来实现用户的特效。Fig. 2-A shows a rendering effect diagram of an object tree component according to an embodiment of the present application. The object tree shown in Figure 2-A includes nodes under a shooting template, such as a drawing board node and a LvBu (prefab) node. A LvBu (prefab) node can contain many functions for describing animation transitions, effects, etc. child nodes. The follow-up SDK (Software Development Kit)) rendering component performs topology traversal according to the object tree, renders them in the order of layers, and forms image sequence frames to realize user's special effects.

当游戏中只支持2D贴纸图层和PAG(Portable Animated Graphics)的渲染时，对象树一般不超过200个子节点，但是当游戏中加入了3D玩法之后,3D对象节点数量众多，例如一个复杂的3D模型的骨骼动画包含了成百上千个节点，相关对象树并不能在大数据量下进行更好更快的渲染,导致游戏性能的下降，但是应用本申请实施例可以更快地对大数据量对象树进行渲染，提高渲染效率。When the game only supports 2D sticker layers and PAG (Portable Animated Graphics) rendering, the object tree generally does not exceed 200 child nodes, but when 3D gameplay is added to the game, the number of 3D object nodes is large, such as a complex 3D The skeletal animation of the model contains hundreds of nodes, and the related object tree cannot be rendered better and faster under the large amount of data, resulting in a decline in game performance. The object tree is used for rendering to improve rendering efficiency.

图2-B示出了根据本申请一个实施例的对象树组件的渲染效果图。将图2-A中对象树中第一LvBu(prefab)节点展开的效果图，可以发现LvBu(prefab)节点包含众多子节点，渲染视窗一屏无法渲染展示所有子节点，不同节点深度的节点在X方向上缩进不同。Fig. 2-B shows a rendering effect diagram of an object tree component according to an embodiment of the present application. Expand the effect diagram of the first LvBu(prefab) node in the object tree in Figure 2-A, you can find that the LvBu(prefab) node contains many child nodes, and the rendering window cannot render and display all the child nodes in one screen. Nodes with different node depths are in the The indentation is different in the X direction.

图3-A示出了根据本申请一个实施例的资源树组件的渲染效果图。游戏资源主要是Light Studio制作模板过程中需要的一些临时文件和预置的资源。随着游戏项目越来越复杂,需要的2D资源和3D资源也越来越多，资源树对应的节点也越来越多。图3-A展示了利用本申请实施例组件渲染方法在渲染视窗中展示资源树的效果图，其中包含了多个node_modules节点，每个node_modules也包含有多个子节点，其展开后的效果图如图3-B所示。Fig. 3-A shows a rendering effect diagram of a resource tree component according to an embodiment of the present application. Game resources are mainly some temporary files and preset resources that Light Studio needs in the process of making templates. As game projects become more and more complex, more and more 2D resources and 3D resources are required, and more and more nodes correspond to the resource tree. Figure 3-A shows the effect diagram of displaying the resource tree in the rendering window using the component rendering method of the embodiment of the present application, which contains multiple node_modules nodes, and each node_modules also contains multiple child nodes. The expanded effect diagram is as follows Figure 3-B shows.

图4-A示出了根据本申请一个实施例的文件夹选择树组件的渲染效果图。如图4-A所示，该树组件支持检索功能，比如在输入框401中输入检索条件后，通过检索可以在视窗中展示符合检索条件的文件。Fig. 4-A shows a rendering effect diagram of a folder selection tree component according to an embodiment of the present application. As shown in FIG. 4-A , the tree component supports a search function. For example, after inputting a search condition in theinput box 401 , files meeting the search condition can be displayed in the window through search.

图4-B示出了根据本申请一个实施例的树组件应用在软件中的效果图。如图4-B所示，在软件中应用了对象树组件和资源树组件，两种树组件均支持检索功能。在输入框402中输入检索条件后，可以对对象树组件进行检索。对象树组件中被展开的节点较少，需要被渲染显示的节点的高度小于树组件可视区域的高度，因此对象树组件中渲染视窗403只占据树组件可视区域404的一部分。在输入框405中输入检索条件后，可以对资源树组件进行检索。资源树组件中被展开的节点较多，需要被渲染显示的节点的高度大于树组件可视区域的高度，因此渲染视窗406占据整个树组件可视区域407，并且产生了用于页面滑动的滚动条408。Fig. 4-B shows an effect diagram of a tree component applied in software according to an embodiment of the present application. As shown in Figure 4-B, an object tree component and a resource tree component are applied in the software, and both tree components support retrieval functions. After the search condition is entered in theinput box 402, the object tree component can be searched. The expanded nodes in the object tree component are less, and the height of the nodes to be rendered and displayed is smaller than the height of the visible area of the tree component, so therendering window 403 in the object tree component only occupies a part of thevisible area 404 of the tree component. After the retrieval condition is entered in theinput box 405, the resource tree component can be retrieved. There are many expanded nodes in the resource tree component, and the height of the nodes that need to be rendered and displayed is greater than the height of the visible area of the tree component, so therendering window 406 occupies the entirevisible area 407 of the tree component, and scrolling is generated forpage sliding Section 408.

基于前述实施例中所述的树形组件，本申请实施例提出了一种新的树形组件的渲染方法，以下对本申请实施例的技术方案的实现细节执行详细阐述：Based on the tree component described in the foregoing embodiments, the embodiment of the present application proposes a new rendering method of the tree component. The implementation details of the technical solution of the embodiment of the present application are described in detail below:

图5示出了根据本申请一个实施例的树形组件渲染方法的流程图，该树形组件渲染方法可以由具有计算处理功能的电子设备来执行，该电子设备比如可以是服务器或者终端设备等。如图5所示，该方法包括以下步骤。FIG. 5 shows a flow chart of a tree component rendering method according to an embodiment of the present application. The tree component rendering method can be executed by an electronic device with computing and processing functions, such as a server or a terminal device, etc. . As shown in Figure 5, the method includes the following steps.

步骤510：获取待渲染的树形组件列表，树形组件列表包括树形组件中的各个节点所对应的索引值和节点之间的层级关系。Step 510: Obtain a list of tree components to be rendered, the list of tree components includes index values corresponding to each node in the tree component and the hierarchical relationship between nodes.

区别于相关技术方案中将待渲染的数据节点存储为树结构，基于树结构进行渲染的方式，本申请实施例采用列表形式存储待渲染的数据节点。待渲染的树形组件列表就是将待渲染的树形组件中的各个节点以列表形式进行存储的数据，各个节点对应其索引值，但是为了在后续渲染环节中显示出节点之间的层级关系，树形组件列表中存储各个节点之间的层级关系。Different from the method of storing the data nodes to be rendered in a tree structure and rendering based on the tree structure in the related technical solution, the embodiment of the present application stores the data nodes to be rendered in the form of a list. The list of tree components to be rendered is the data that stores each node in the tree component to be rendered in the form of a list. Each node corresponds to its index value, but in order to show the hierarchical relationship between nodes in the subsequent rendering process, The hierarchical relationship between each node is stored in the tree component list.

步骤520：基于树形组件可视区域的高度和树形组件列表中各个节点所对应的索引值，从树形组件列表中获取渲染高度与树形组件可视区域的高度相匹配的至少一个目标节点。Step 520: Based on the height of the visible area of the tree component and the index value corresponding to each node in the tree component list, obtain at least one object whose rendering height matches the height of the visible area of the tree component from the tree component list node.

树形组件可视区域是终端设备的屏幕上用于显示树形组件的区域即树形组件可供浏览的区域。如在终端设备的整个桌面区域渲染树形组件列表，那么终端设备的桌面区域高度即为树形组件可视区域的高度；又比如在图4-B中，对象树组件和资源树组件作为整个软件的组成部分，两者的树形组件可视区域均只占整个软件画面的一部分。The visible area of the tree component is an area on the screen of the terminal device for displaying the tree component, that is, an area where the tree component can be browsed. If the tree component list is rendered in the entire desktop area of the terminal device, the height of the desktop area of the terminal device is the height of the visible area of the tree component; for example, in Figure 4-B, the object tree component and the resource tree component are used as the entire As a component of the software, the visible areas of the tree components of both only occupy a part of the entire software screen.

在待渲染数据节点的数据量非常大的场景下,相关树形组件渲染技术渲染延迟较大，造成性能瓶颈的根源在于每次渲染的节点过多。In the scene where the data volume of the data nodes to be rendered is very large, the rendering delay of the related tree component rendering technology is relatively large, and the root cause of the performance bottleneck is that too many nodes are rendered each time.

当待渲染数据节点的数据量非常大，而树形组件可视区域的大小是有限的(不超过终端设备的屏幕大小)，因此即使将所有节点一次渲染出来，树形组件可视区域也无法一次显示全部的已渲染数据节点，反而会造成渲染延迟、画面卡顿。图6示出了根据本申请一个实施例的树形组件可视区域与树形节点列表的对比图。如图6所示，树形组件可视区域的高度小于树形节点列表中所有节点的渲染高度之和，树形组件可视区域一次只能显示部分节点。When the amount of data to be rendered is very large, the visible area of the tree component is limited (not exceeding the screen size of the terminal device), so even if all nodes are rendered at once, the visible area of the tree component cannot Displaying all the rendered data nodes at once will cause rendering delay and screen freeze. Fig. 6 shows a comparison diagram between the visible area of the tree component and the list of tree nodes according to an embodiment of the present application. As shown in Figure 6, the height of the visible area of the tree component is smaller than the sum of the rendering heights of all nodes in the tree node list, and the visible area of the tree component can only display part of the nodes at a time.

因此本申请实施例只从树形组件列表中按顺序截取部分节点作为目标节点，直到目标节点的渲染高度首次大于或等于树形组件可视区域高度。Therefore, the embodiment of the present application only sequentially intercepts some nodes from the tree component list as target nodes until the rendering height of the target node is greater than or equal to the height of the visible area of the tree component for the first time.

首次渲染的时候,从树形组件列表中第一个节点开始后向截取目标节点,直到目标节点的渲染高度首次大于树形组件可视区域高度。例如，若前八个节点的渲染高度小于树形组件可视区域高度，而前九个节点的渲染高度大于或等于树形组件可视区域高度，则将前九个节点作为目标节点。When rendering for the first time, the target node is intercepted backwards from the first node in the tree component list until the rendering height of the target node is greater than the height of the visible area of the tree component for the first time. For example, if the rendering height of the first eight nodes is smaller than the height of the visible area of the tree component, and the rendering height of the first nine nodes is greater than or equal to the height of the visible area of the tree component, then the first nine nodes are used as target nodes.

步骤530：基于至少一个目标节点的渲染高度和节点之间的层级关系，确定至少一个目标节点在渲染视窗中的显示位置。Step 530: Based on the rendering height of the at least one target node and the hierarchical relationship between the nodes, determine the display position of the at least one target node in the rendering window.

树形组件列表中每个节点的渲染高度可能是不同的，并且子节点相对于其父节点存在缩进，因此需要根据目标节点的渲染高度和节点之间的层级关系，动态计算目标节点中各个节点在渲染视窗中的显示位置。The rendering height of each node in the tree component list may be different, and the child nodes are indented relative to their parent nodes, so it is necessary to dynamically calculate each node in the target node according to the rendering height of the target node and the hierarchical relationship between nodes. The display position of the node in the render viewport.

节点在渲染视窗中的显示位置可以用X，Y值表示，X表示横向位置，Y表示纵向位置。目标节点沿Y方向依次渲染显示，那么目标节点中第一个节点在渲染视窗中Y值是0，(表示这个节点在渲染视窗左上方区域),X值需要根据其深度计算。The display position of the node in the rendering window can be represented by X and Y values, X represents the horizontal position, and Y represents the vertical position. The target nodes are rendered and displayed sequentially along the Y direction, then the Y value of the first node in the target node is 0 in the rendering window (indicating that this node is in the upper left area of the rendering window), and the X value needs to be calculated according to its depth.

例如设置每一层节点的显示位置在X方向的缩进为1，目标节点中第一个节点深度为2，渲染高度为5，目标节点中第二个节点深度为2，那么目标节点中第一个节点的X，Y值为(2，0)，目标节点中第二个节点的X，Y值为(2，5)。For example, set the indentation of the display position of each layer node in the X direction to 1, the depth of the first node in the target node is 2, the rendering height is 5, and the depth of the second node in the target node is 2, then the depth of the first node in the target node is 2. The X, Y value of one node is (2, 0), and the X, Y value of the second node in the target node is (2, 5).

需要说明的是，本申请实施例可以基于QT(Q toolkit)开发库实现，QT为是一个跨平台的C++开发库，主要用来开发桌面端图形用户界面(Graphical User Interface，GUI)程序，或者开发不带界面的命令行(Command User Interface，CUI)程序。渲染视窗可以选择基于QT的Flickable视窗。Flickable视窗可以利用一个较小的视窗来显示较大的内容，用户可以通过滚动滚动条分屏浏览内容。将树形组件列表中所有非折叠属性的节点的高度之和设置为Flickable视窗的内容高度(contentHeight)；将树形组件可视区域的高度设置为Flickable视窗的高度(height)。It should be noted that, the embodiment of the present application can be realized based on the QT (Q toolkit) development library, QT is a cross-platform C++ development library, mainly used to develop a desktop graphical user interface (Graphical User Interface, GUI) program, or Develop a command-line (Command User Interface, CUI) program without an interface. The rendering window can choose the QT-based Flickable window. The Flickable window can use a smaller window to display larger content, and users can browse the content in split screens by scrolling the scroll bar. Set the sum of the heights of all non-collapsed attribute nodes in the tree component list as the content height (contentHeight) of the Flickable window; set the height of the visible area of the tree component as the height (height) of the Flickable window.

步骤540：基于至少一个目标节点的显示位置和至少一个目标节点对应的节点内容，在渲染视窗中对至少一个目标节点进行渲染。Step 540: Render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.

通过QT提供的createObject API，将目标节点的显示位置、目标节点对应的节点内容、目标节点所对应的渲染视窗输入createObject函数，创建目标节点对应的节点对象，从而将目标节点渲染显示在渲染视图中。Through the createObject API provided by QT, the display position of the target node, the node content corresponding to the target node, and the rendering window corresponding to the target node are input into the createObject function to create a node object corresponding to the target node, so that the target node is rendered and displayed in the rendering view .

本申请实施例通过从树形组件列表截取与树形组件可视区域高度相匹配的节点进行渲染显示，提高树形组件的渲染效率，减少渲染延迟。In the embodiment of the present application, the nodes whose height matches the visible area of the tree component are intercepted from the tree component list for rendering and display, so as to improve the rendering efficiency of the tree component and reduce rendering delay.

图7示出了根据本申请一个实施例的步骤510的细节流程图，如图7所示，步骤510包括以下步骤。Fig. 7 shows a detailed flowchart ofstep 510 according to an embodiment of the present application. As shown in Fig. 7,step 510 includes the following steps.

步骤710：获取具有层级关系的树形组件结构。Step 710: Obtain a tree component structure with hierarchical relationship.

树形组件结构是一种特殊的数据结构,根节点没有父节点,每个节点没有子节点或有多个子节点。The tree component structure is a special data structure, the root node has no parent node, and each node has no child nodes or multiple child nodes.

图8示出了根据本申请一个实施例的树形组件结构。从图8可以得出，该树形组件结构包括根节点“0-0”；根节点“0-0”包含子节点“0-0-0”、“0-0-1”以及“0-0-2”；子节点“0-0-0”包含子节点“0-0-0-0”、“0-0-0-1”以及“0-0-0-2”；子节点“0-0-1”包含子节点“0-0-1-0”、“0-0-1-1”以及“0-0-1-2”。Fig. 8 shows a tree component structure according to an embodiment of the present application. As can be seen from Figure 8, the tree component structure includes the root node "0-0"; the root node "0-0" contains child nodes "0-0-0", "0-0-1" and "0- 0-2"; child node "0-0-0" contains child nodes "0-0-0-0", "0-0-0-1" and "0-0-0-2"; child node " 0-0-1" contains child nodes "0-0-1-0", "0-0-1-1" and "0-0-1-2".

图9示出了根据本申请一个实施例的节点的数据结构。如图9所示，树形组件结构中每个节点都有基础的属性,例如：节点的唯一标识符id、节点的名字title,以及节点的子节点children等等。Fig. 9 shows the data structure of a node according to an embodiment of the present application. As shown in Figure 9, each node in the tree component structure has basic attributes, such as: the unique identifier of the node id, the name of the node title, and the children of the node and so on.

本申请实施例中树节点除了包含基础的属性，还可以拓展一些属性,例如节点的深度depth,节点的父节点的标识符id，用于后续高效地对树形组件进行展示和使用。In the embodiment of the present application, besides the basic attributes, the tree node can also expand some attributes, such as the depth of the node, and the identifier id of the parent node of the node, which are used to display and use the tree component efficiently in the future.

需要说明的是，为了实现树形组件的折叠/收起功能，树形组件结构中节点还可以拓展节点的展开状态属性isExpand，用户可以通过鼠标操作设置节点的展开状态属性为展开或者折叠。It should be noted that, in order to realize the folding/collapsing function of the tree component, the nodes in the tree component structure can also expand the expanded state property isExpand of the node, and the user can set the expanded state property of the node to expanded or collapsed by mouse operation.

图2-B和图3-B就分别展示了对象树和资源树中节点的展开效果图，具体参照前述实施例的描述。FIG. 2-B and FIG. 3-B respectively show the expanded effect diagrams of the nodes in the object tree and the resource tree, and refer to the description of the foregoing embodiments for details.

需要说明的是，上述树形组件结构也可以是从区块链中获取到的，具体可以是从区块链的智能合约中获取到的。比如游戏开发人员在生成对象类型的树结构后(包含了游戏中所有的实体和渲染目标画板、转场组、效率组以及效果组之间的关系)，将其发送至区块链网络中，在区块链网络中达成共识后，写入区块链中。It should be noted that the above tree component structure can also be obtained from the blockchain, specifically, it can be obtained from the smart contract of the blockchain. For example, after the game developer generates the tree structure of the object type (including the relationship between all entities in the game and the rendering target artboard, transition group, efficiency group, and effect group), it is sent to the blockchain network. After a consensus is reached in the blockchain network, it is written into the blockchain.

上述的区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层。The above-mentioned blockchain is a new application model of computer technologies such as distributed data storage, point-to-point transmission, consensus mechanism, and encryption algorithm. Blockchain (Blockchain), essentially a decentralized database, is a series of data blocks associated with each other using cryptographic methods. Each data block contains a batch of network transaction information, which is used to verify its Validity of information (anti-counterfeiting) and generation of the next block. The blockchain can include the underlying platform of the blockchain, the platform product service layer, and the application service layer.

区块链底层平台可以包括用户管理、基础服务、智能合约以及运营监控等处理模块。其中，用户管理模块负责所有区块链参与者的身份信息管理，包括维护公私钥生成(账户管理)、密钥管理以及用户真实身份和区块链地址对应关系维护(权限管理)等，并且在授权的情况下，监管和审计某些真实身份的交易情况，提供风险控制的规则配置(风控审计)；基础服务模块部署在所有区块链节点设备上，用来验证业务请求的有效性，并对有效请求完成共识后记录到存储上，对于一个新的业务请求，基础服务先对接口适配解析和鉴权处理(接口适配)，然后通过共识算法将业务信息加密(共识管理)，在加密之后完整一致的传输至共享账本上(网络通信)，并进行记录存储；智能合约模块负责合约的注册发行以及合约触发和合约执行，开发人员可以通过某种编程语言定义合约逻辑，发布到区块链上(合约注册)，根据合约条款的逻辑，调用密钥或者其它的事件触发执行，完成合约逻辑，同时还提供对合约升级注销的功能；运营监控模块主要负责产品发布过程中的部署、配置的修改、合约设置、云适配以及产品运行中的实时状态的可视化输出，例如：告警、监控网络情况、监控节点设备健康状态等。The underlying blockchain platform can include processing modules such as user management, basic services, smart contracts, and operational monitoring. Among them, the user management module is responsible for the identity information management of all blockchain participants, including maintenance of public and private key generation (account management), key management, and maintenance of the corresponding relationship between the user's real identity and blockchain address (authority management), etc., and in In the case of authorization, supervise and audit transactions of certain real identities, and provide risk control rule configuration (risk control audit); the basic service module is deployed on all blockchain node devices to verify the validity of business requests, And complete the consensus on valid requests and record them on the storage. For a new business request, the basic service first analyzes and authenticates the interface adaptation (interface adaptation), and then encrypts the business information through the consensus algorithm (consensus management). After encryption, it is completely and consistently transmitted to the shared ledger (network communication) and recorded for storage; the smart contract module is responsible for the registration and issuance of the contract, contract triggering and contract execution. Developers can define the contract logic through a programming language and publish it to On the blockchain (contract registration), according to the logic of the contract terms, call the key or other events to trigger execution, complete the contract logic, and also provide the function of contract upgrade and cancellation; the operation monitoring module is mainly responsible for the deployment during the product release process , configuration modification, contract setting, cloud adaptation, and visual output of real-time status during product operation, such as: alarms, monitoring network conditions, monitoring node equipment health status, etc.

平台产品服务层提供典型应用的基本能力和实现框架，开发人员可以基于这些基本能力，叠加业务的特性，完成业务逻辑的区块链实现。应用服务层提供基于区块链方案的应用服务给业务参与方进行使用。The platform product service layer provides the basic capabilities and implementation framework of typical applications. Based on these basic capabilities, developers can superimpose the characteristics of the business and complete the blockchain implementation of business logic. The application service layer provides application services based on blockchain solutions for business participants to use.

需要说明的是，在树形结构列表中节点具备展开状态属性时，在步骤520中获取目标节点时，需要考虑各个节点的展开状态属性，展开状态属性为折叠的节点的子节点不作为目标节点。It should be noted that, when the nodes in the tree structure list have the expanded state attribute, when the target node is obtained instep 520, the expanded state attribute of each node needs to be considered, and the child node of the node whose expanded state attribute is collapsed is not regarded as the target node .

为了实现文件类型的树组件,树结构还可以拓展节点的路径属性path和资源标识符属性resourcekey，存储文件存储位置。In order to realize the tree component of the file type, the tree structure can also expand the node's path attribute path and resource identifier attribute resourcekey to store the file storage location.

步骤720：从树形组件结构的根节点开始依次进行遍历，生成包含有节点状态信息的状态树，节点状态信息包括节点深度和父节点标识符。Step 720: Traversing sequentially from the root node of the tree component structure to generate a state tree containing node state information, the node state information includes node depth and parent node identifier.

在具体实施中，为了设置树形组件结构中每个节点的拓展属性，可以从树结构的根节点开始进行递归遍历,为每个节点加上节点的深度depth,以及节点的父节点的标识符id，从而构建得到一颗有节点状态信息的状态树。状态树保存了节点状态信息后，在后续对树组件进行渲染的时候不需要重复计算来获取节点的状态信息。In the specific implementation, in order to set the extended attributes of each node in the tree component structure, recursive traversal can be performed from the root node of the tree structure, and the depth of the node and the identifier of the parent node of the node can be added to each node id, so as to construct a state tree with node state information. After the state tree saves the node state information, it does not need to repeat the calculation to obtain the node state information when rendering the tree component.

步骤730：将状态树进行平铺处理，得到树形组件列表。Step 730: Tiling the state tree to obtain a list of tree components.

在具体实施中，对状态树进行平铺处理可以将状态树的节点展开，如果一个父节点有子节点，则在该父节点下排列其所有子节点；按照展开后的数据节点的排列顺序赋予每个数据节点索引值，其中相邻节点之间的索引值按照固定值递增或递减。In a specific implementation, the state tree can be tiled to expand the nodes of the state tree. If a parent node has child nodes, then arrange all its child nodes under the parent node; according to the arrangement order of the expanded data nodes, assign The index value of each data node, where the index value between adjacent nodes is incremented or decremented by a fixed value.

图10示出了根据本申请一个实施例的由树形组件结构生成树形组件列表的过程示意图。如图10所示，树结构进行平铺处理，得到树形组件列表。如果树形组件列表的索引值从根节点由小到大顺序排列，根节点“0-0”的索引值为0，那么“0-0-0”的索引值为1，“0-0-0-0”的索引值为2，……，“0-2”的索引值为11。Fig. 10 shows a schematic diagram of a process of generating a tree component list from a tree component structure according to an embodiment of the present application. As shown in Figure 10, the tree structure is tiled to obtain a list of tree components. If the index values of the tree component list are arranged in descending order from the root node, and the index value of the root node "0-0" is 0, then the index value of "0-0-0" is 1, and the index value of "0-0- 0-0" has an index value of 2, ..., "0-2" has an index value of 11.

本申请实施例中，树形组件可视区域的高度小于树形组件列表中所有未被折叠的节点的渲染高度之和，渲染视窗形成用于滑动的滚动条。例如，Flickable视窗的内容高度小于Flickable视窗的高度，Flickable视窗形成滚动条，可以模拟节点真实滚动的效果。In the embodiment of the present application, the height of the visible area of the tree component is smaller than the sum of the rendering heights of all unfolded nodes in the tree component list, and the rendering window forms a scroll bar for sliding. For example, the content height of the Flickable window is smaller than the height of the Flickable window, and the Flickable window forms a scroll bar, which can simulate the real scrolling effect of the node.

图11示出了根据本申请一个实施例的树形组件渲染方法的流程图，如图11所示，该方法包括以下步骤1110-步骤1160。FIG. 11 shows a flowchart of a method for rendering a tree component according to an embodiment of the present application. As shown in FIG. 11 , the method includes the following steps 1110 - 1160 .

其中，步骤1110-1140与图5中所示的步骤510-540的具体实现过程类似，在此不再赘述。Wherein, steps 1110-1140 are similar to the specific implementation process of steps 510-540 shown in FIG. 5 , and will not be repeated here.

步骤1150：监听渲染视窗中触发的滑动事件，得到滑动距离。Step 1150: Listen to the sliding event triggered in the rendering window to obtain the sliding distance.

当用户浏览完渲染视窗中当前页面的目标节点后，可以通过键鼠设备或者触摸滑动滚动条。本申请可以通过QT开发库创建QCoreApplication对象，对渲染视窗中onContentY事件即滑动事件进行监听，并获取contentY即Y方向滑动距离，其中，contentY是Flickable视窗的提供的只读属性。After the user browses the target node of the current page in the rendering window, the user can slide the scroll bar through the keyboard and mouse device or touch. This application can create a QCoreApplication object through the QT development library, monitor the onContentY event in the rendering window, that is, the sliding event, and obtain contentY, that is, the sliding distance in the Y direction, where contentY is a read-only attribute provided by the Flickable window.

图12示出了根据本申请一个实施例的Flickable视窗滑动示意图，如图12所示，Flickable视窗中页面Y方向向下滑动50，X方向向左滑动50，contentY为50，X方向滑动距离contentX为-50。Figure 12 shows a schematic diagram of the sliding of the Flickable window according to an embodiment of the present application. As shown in Figure 12, the page in the Flickable window slides down 50 in the Y direction, 50 in the X direction to the left, contentY is 50, and the sliding distance in the X direction is contentX is -50.

步骤1160：基于树形组件可视区域的高度、滑动距离以及树形组件列表中各个节点的索引值，对在树形组件可视区域内进行渲染显示的节点进行更新。Step 1160: Based on the height of the visible area of the tree component, the sliding distance and the index value of each node in the tree component list, update the nodes rendered and displayed in the visible area of the tree component.

Flickable视窗中页面滑动后，页面中应该被显示的节点发生变化，因此需要结合树形组件可视区域的高度和滑动距离，从树形组件列表中重新按照索引值顺序截取部分节点，作为更新后的目标节点，并渲染显示更新后的目标节点。After the page slides in the Flickable window, the nodes that should be displayed on the page change. Therefore, it is necessary to combine the height of the visible area of the tree component and the sliding distance to intercept some nodes from the tree component list according to the order of the index value, as the updated , and rendering shows the updated target node.

图13示出了根据本申请一个实施例的渲染视窗前后对比示意图。如图13所示，左侧为Flickable视窗中首次渲染的效果示意图，树形组件列表中索引值为0的节点显示在页面最上方，受限于树形组件可视区域的高度，页面中只显示了索引值为0-7的八个节点。Fig. 13 shows a schematic diagram of the comparison before and after the rendering window according to an embodiment of the present application. As shown in Figure 13, the left side is a schematic diagram of the effect of the first rendering in the Flickable window. The node with an index value of 0 in the tree component list is displayed at the top of the page. Limited by the height of the visible area of the tree component, only Eight nodes with index values 0-7 are shown.

当页面向下滑动距离小于等于索引值为0的节点的渲染高度时，那么第一个已渲染节点从Flickable视窗滑出,页面第一个节点的索引值从0变成了1，根据树形组件可视区域的高度，在树形组件列表中索引值1开始顺序截取节点，直到索引值为1-8的八个节点渲染高度之和首次大于树形组件可视区域高度，那么更新后的目标节点的索引值为1-8的八个节点。When the sliding distance of the page is less than or equal to the rendering height of the node whose index value is 0, then the first rendered node slides out from the Flickable window, and the index value of the first node on the page changes from 0 to 1, according to the tree The height of the visible area of the component. In the tree component list, nodes are sequentially intercepted starting fromindex value 1, until the sum of the rendering heights of the eight nodes with index values 1-8 is greater than the height of the visible area of the tree component for the first time, then the updated The target node has eight nodes whose index values are 1-8.

相应的，当页面再次向下滑动的距离小于等于索引值为1的节点的渲染高度时，那么页面中第一个已渲染节点从Flickable视窗滑出,页面第一个节点的索引值从1变成了2，在树形组件列表中索引值2开始顺序截取节点，直到索引值为2-9的八个节点渲染高度之和首次大于树形组件可视区域高度，那么更新后的目标节点的索引值为2-9的八个节点。Correspondingly, when the page slides down again and the distance is less than or equal to the rendering height of the node with an index value of 1, then the first rendered node on the page slides out of the Flickable window, and the index value of the first node on the page changes from 1 to becomes 2, theindex value 2 in the tree component list intercepts nodes sequentially until the sum of the rendering heights of the eight nodes with index values 2-9 is greater than the height of the visible area of the tree component for the first time, then the updated target node Eight nodes with index values 2-9.

需要说明的是，在树形结构列表中节点具备展开状态属性时，在从平铺类表中截取目标节点时，需要考虑各个节点的展开状态属性，展开状态属性为折叠的节点的子节点不作为目标节点。It should be noted that when the nodes in the tree structure list have the expanded state attribute, when intercepting the target node from the flat class table, the expanded state attribute of each node needs to be considered, and the child nodes of the node whose expanded state attribute is collapsed are not as the target node.

图14示出了根据本申请一个实施例的步骤1160的一种实现过程的流程图。如图14所示，步骤1160包括以下步骤。FIG. 14 shows a flowchart of an implementation process ofstep 1160 according to an embodiment of the present application. As shown in FIG. 14,step 1160 includes the following steps.

步骤1410：基于监听到滑动事件前，渲染视窗中首个已渲染节点的第一索引值、树形组件列表中各个节点的渲染高度，以及滑动距离，确定目标节点在树形组件列表中的起始索引值。Step 1410: Determine the starting point of the target node in the tree component list based on the first index value of the first rendered node in the rendering window, the rendering height of each node in the tree component list, and the sliding distance before listening to the sliding event start index value.

步骤1420：根据树形组件可视区域的高度和树形组件列表中位于起始索引值之后的各个节点的渲染高度，确定目标节点在树形组件列表中的最小终止索引值；其中，目标节点中各个节点的渲染高度之和大于或等于树形组件可视区域的高度。Step 1420: Determine the minimum end index value of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list; wherein, the target node The sum of the rendered heights of each node in is greater than or equal to the height of the visible area of the tree component.

如图13所示，在监听Flickable视窗中滑动事件前，Flickable视窗首个已渲染节点的索引值为0，当页面向上滑动距离小于等于索引值为0的节点的渲染高度时，索引值为0的节点从视窗滑出，确定目标节点在树形组件列表中的起始索引值为1。As shown in Figure 13, before listening to the sliding event in the Flickable window, the index value of the first rendered node in the Flickable window is 0, and when the upward sliding distance of the page is less than or equal to the rendering height of the node with an index value of 0, the index value is 0 The node of the node slides out from the window, and the initial index value of the target node in the tree component list is determined to be 1.

在树形组件列表中索引值1开始顺序截取节点，直到索引值为1-8的八个节点渲染高度之和首次大于树形组件可视区域高度，那么目标节点在树形组件列表中的最小终止索引值为8。In the tree component list, the nodes are sequentially intercepted starting fromindex value 1, until the sum of the rendering heights of the eight nodes with index values 1-8 is greater than the height of the visible area of the tree component for the first time, then the target node is the smallest in the tree component list The end index value is 8.

又比如，当页面向下滑动距离大于索引值为0-3的节点的渲染高度且小于等于索引值为0-4的节点的渲染高度时，索引值为0-4的节点从视窗滑出，确定目标节点在树形组件列表中的起始索引值为5。For another example, when the sliding distance of the page is greater than the rendering height of the node with the index value 0-3 and less than or equal to the rendering height of the node with the index value 0-4, the node with the index value 0-4 slides out of the window, Determine that the starting index value of the target node in the tree component list is 5.

在树形组件列表中索引值5开始顺序截取节点，直到索引值为5-10的七个节点渲染高度之和首次大于树形组件可视区域高度，那么目标节点在树形组件列表中的最小终止索引值为10。In the tree component list, intercept nodes sequentially starting fromindex value 5 until the sum of the rendering heights of the seven nodes with index value 5-10 is greater than the height of the visible area of the tree component for the first time, then the target node is the smallest in the tree component list The end index value is 10.

图15示出了根据本申请一个实施例的步骤540的一种实现过程的流程图。如图15所示，步骤540包括以下步骤。FIG. 15 shows a flowchart of an implementation process ofstep 540 according to an embodiment of the present application. As shown in Fig. 15,step 540 includes the following steps.

步骤1510：获取渲染视窗中的已创建节点对象。Step 1510: Obtain the created node objects in the rendering window.

本申请实施例中，渲染视窗可以通过QT提供的createObject API创建节点对象。如图13所示，Flickable视窗首次渲染后，视窗中已创建索引值为0-7节点对应的节点对象。In the embodiment of this application, the rendering window can create a node object through the createObject API provided by QT. As shown in Figure 13, after the Flickable window is rendered for the first time, node objects corresponding to nodes with index values 0-7 have been created in the window.

步骤1520：通过对已创建节点对象的引用，将已创建节点对象对应的节点内容替换为与已创建节点对象的显示位置相匹配的目标节点的节点内容。Step 1520: By referring to the created node object, replace the node content corresponding to the created node object with the node content of the target node matching the display position of the created node object.

如图13所示，当Flickable视窗页面向下滑动距离小于等于索引值为0的节点的渲染高度时，那么第一个已渲染节点从Flickable视窗滑出,更新后的目标节点的索引值为1-8的八个节点。As shown in Figure 13, when the sliding distance of the Flickable window page is less than or equal to the rendering height of the node with an index value of 0, then the first rendered node slides out of the Flickable window, and the index value of the updated target node is 1 -8 for eight nodes.

相应的，在对索引值为1-8的八个节点进行渲染的时候，通过已创建的索引值为0-7节点对应的节点对象引用，将索引值为0-7节点对应的节点对象的节点内容，分别替换为索引值为1-8节点的节点内容。Correspondingly, when rendering eight nodes with an index value of 1-8, refer to the node object corresponding to a node with an index value of 0-7 that has been created, and use The node content is replaced with the node content of the index value 1-8 nodes.

因此，当页面滑动前对应的目标节点的数量大于或者等于页面滑动后对应的更新后的目标节点数量时，在页面滑动后渲染过程中不需要创建新的节点对象,因为已创建节点对象的引用可以存储在实际渲染节点列表中,在渲染时只需要将已创建节点对象对应的节点内容替换为与已创建节点对象的显示位置相匹配的目标节点的节点内容大大的节省了内存。Therefore, when the number of corresponding target nodes before page sliding is greater than or equal to the number of corresponding updated target nodes after page sliding, no new node objects need to be created during the rendering process after page sliding, because the references of node objects have already been created It can be stored in the actual rendering node list. When rendering, only the node content corresponding to the created node object needs to be replaced with the node content of the target node matching the display position of the created node object, which greatly saves memory.

步骤1530：若已创建节点对象的数量小于目标节点的节点数量，则从目标节点中确定未匹配到已创建节点对象的节点。Step 1530: If the number of created node objects is less than the number of nodes of the target node, then determine the nodes that are not matched with the created node objects from the target nodes.

由于树形组件列表中，节点的渲染高度是不同，因此渲染视窗滑动前一屏显示出来的节点数量和页面滑动后一屏显示出来的节点数量可能是不同的。当页面滑动前对应的目标节点的数量小于页面滑动后对应的更新后的目标节点数量时，目标节点中部分节点无法直接套用已创建节点对象。Since the rendering heights of the nodes in the tree component list are different, the number of nodes displayed on the screen before the rendering window slides may be different from the number of nodes displayed on the screen after the page slides. When the number of corresponding target nodes before page sliding is less than the number of corresponding updated target nodes after page sliding, some of the target nodes cannot directly apply the created node objects.

步骤1540：根据未匹配到已创建节点对象的节点的节点内容和显示位置，在渲染视窗中创建新的节点对象。Step 1540: Create a new node object in the rendering window according to the node content and display position of the node not matched with the created node object.

在页面滑动后渲染过程中，可以通过Qt提供的createObject API对未匹配到已创建节点对象的节点创建新的节点对象。During the rendering process after the page slides, you can use the createObject API provided by Qt to create new node objects for nodes that are not matched to the created node objects.

步骤1550：将新的节点对象的引用存储在实际渲染节点列表中。Step 1550: Store the reference of the new node object in the actual rendering node list.

本申请实施例在Flickable视窗中根据树形组件可视区域的高度以及树形组件列表中节点的渲染高度，确定目标节点并创建目标节点对应的节点对象，并将当前页面实际显示出来的节点存储实际渲染节点列表。一方面，在Flickable视窗页面滑动或者其他刷新Flickable视窗页面的场景下，可以直接更新已创建节点对象里面的节点的内容即可完成页面刷新渲染，节省内存，优化性能；另一方面，在卸载树形组件的时候，可通过销毁实际渲染节点列表进行组件卸载。In the embodiment of the present application, in the Flickable window, according to the height of the visible area of the tree component and the rendering height of the nodes in the tree component list, the target node is determined and a node object corresponding to the target node is created, and the node actually displayed on the current page is stored The list of actual rendered nodes. On the one hand, when the Flickable window page slides or other scenarios where the Flickable window page is refreshed, the content of the node in the created node object can be directly updated to complete the page refresh and rendering, saving memory and optimizing performance; on the other hand, when unloading the tree When using a shape component, the component can be unloaded by destroying the actual rendering node list.

图16示出了根据本申请一个实施例的树形组件渲染方法的流程图。如图16所示，该方法包括以下步骤1610-步骤1670。Fig. 16 shows a flowchart of a tree component rendering method according to an embodiment of the present application. As shown in FIG. 16 , the method includes the following steps 1610 - 1670 .

其中，步骤1610-1640与图5中所示的步骤510-540的实现过程类似，在此不再赘述。Wherein, steps 1610-1640 are similar to the implementation process of steps 510-540 shown in FIG. 5 , and will not be repeated here.

步骤1650：根据目标节点的索引值，从树形组件列表中截取位于目标节点之后的预设数量个节点，作为预加载节点。Step 1650: According to the index value of the target node, intercept a preset number of nodes after the target node from the tree component list as preloaded nodes.

在树形组件列表中从目标节点的终止索引值之后顺序截取预设数量个节点，作为预加载节点，预加载节点在渲染视窗中当前页面并不显示，但是可能在用户滑动页面后显示。图17示出了根据本申请一个实施例的目标节点和预加载节点示意图。如图17所示，渲染视窗中目标节点为索引值0-8的节点，那么选取索引值为9的节点作为预加载节点。In the tree component list, a preset number of nodes are sequentially intercepted from the end index value of the target node as preload nodes. The preload nodes are not displayed on the current page in the rendering window, but may be displayed after the user slides the page. Fig. 17 shows a schematic diagram of a target node and a preload node according to an embodiment of the present application. As shown in FIG. 17 , if the target node in the rendering window is a node with an index value of 0-8, then the node with an index value of 9 is selected as the preloading node.

步骤1660：基于预加载节点的节点层级关系以及渲染高度，确定预加载节点的显示位置。Step 1660: Determine the display position of the preloaded node based on the node hierarchy and rendering height of the preloaded node.

与确定目标节点显示位置的方法类似，确定预加载节点的显示位置Similar to the method of determining the display position of the target node, determine the display position of the preloaded node

步骤1670：根据预加载节点的显示位置和节点内容，创建预加载节点对象。Step 1670: Create a preloaded node object according to the display position and node content of the preloaded node.

当已经创建完目标节点对应的节点对象时,再多创建预设数量个预加载的节点,这样可以防止页面滑动过快而节点没有及时渲染出来导致的空白。When the node object corresponding to the target node has been created, create a preset number of preloaded nodes, which can prevent the blank caused by the page sliding too fast and the nodes not being rendered in time.

图18示出了根据本申请一个实施例的树形组件渲染方法的流程图。如图18所示，该方法包括以下步骤1810-1840。Fig. 18 shows a flowchart of a tree component rendering method according to an embodiment of the present application. As shown in Figure 18, the method includes the following steps 1810-1840.

其中，步骤1810-1840与图5中步骤510-540的实现过程类似，在此不再赘述。Wherein, steps 1810-1840 are similar to the implementation process of steps 510-540 in FIG. 5 and will not be repeated here.

步骤1850：监听渲染视窗中的拖曳事件。Step 1850: Listen to the drag event in the rendering window.

当在树形组件中新增节点或者调整节点位置时，用户可以通过拖曳节点的方式进行操作，因此本申请可以基于QT创建的事件监听对象，监听DragEvent事件即拖曳事件。When adding a node or adjusting the position of a node in the tree component, the user can operate by dragging the node, so this application can listen to the DragEvent event, that is, the drag event, based on the event monitoring object created by QT.

步骤1860：若拖曳事件为将第一节点拖曳到渲染视窗中空白区域，则将第一节点插入树形组件列表中根节点的最后一个子节点的末尾，并更新树形组件列表中各个节点的索引值。Step 1860: If the drag event is dragging the first node to the blank area in the rendering window, insert the first node at the end of the last child node of the root node in the tree component list, and update the index of each node in the tree component list value.

步骤1870：若拖曳事件为将第一节点拖曳到渲染视窗中第二节点所关联的操作区域，则在树形组件列表中将第一节点插入到第二节点所关联的操作区域对应的位置，并更新树形组件列表中各个节点的索引值。Step 1870: If the drag event is dragging the first node to the operation area associated with the second node in the rendering window, insert the first node into the corresponding position of the operation area associated with the second node in the tree component list, And update the index value of each node in the tree component list.

将渲染视窗中当前页面中已渲染显示每个节点分别划分了三块操作区域,即对鼠标操作的响应区域，每块区域监测到拖曳事件后分别将被拖曳的节点插入树形组件列表中不同位置。The rendered display in the current page in the rendering window is divided into three operation areas for each node, that is, the response area for mouse operations. After each area detects the drag event, insert the dragged node into the tree component list respectively. Location.

相应的，树形组件列表更新后，需要基于树形组件可视区域的高度和更新后的树形组件列表中各个节点索引值，从更新后的树形组件列表中获取与树形组件可视区域的高度相匹配的至少一个目标节点。Correspondingly, after the tree component list is updated, based on the height of the visible area of the tree component and the index value of each node in the updated tree component list, the tree component visible The height of the region matches at least one target node.

进一步，需要重新渲染更新后的目标节点。Further, the updated target node needs to be re-rendered.

为了实现树形组件的检索功能，本申请实施例中，可以监听渲染视窗中的检索事件，获取检索事件中的检索条件。In order to realize the retrieval function of the tree component, in the embodiment of the present application, the retrieval event in the rendering window may be monitored to obtain the retrieval condition in the retrieval event.

当树形组件具备检索功能时，图19示出了根据本申请一个实施例的步骤520的一种实现过程的流程图。如图19所示，图5中所示的步骤520包括以下步骤。When the tree component has a retrieval function, FIG. 19 shows a flowchart of an implementation process ofstep 520 according to an embodiment of the present application. As shown in FIG. 19,step 520 shown in FIG. 5 includes the following steps.

步骤1910：确定树形组件列表中第一个满足检索条件的节点。Step 1910: Determine the first node in the tree component list that meets the retrieval condition.

例如，对图8所示的树形组件结构进行检索，检索条件是“0-0-1”，那么满足检索条件的有“0-0-1”、“0-0-1-0”、“0-0-1-1”以及“0-0-1-2”，第一个满足检索条件的是“0-0-1”。For example, to search the tree component structure shown in Figure 8, the search condition is "0-0-1", then the items that meet the search condition are "0-0-1", "0-0-1-0", "0-0-1-1" and "0-0-1-2", the first one that meets the search condition is "0-0-1".

步骤1920：获取第一个满足检索条件的节点的至少一个祖先节点，从至少一个祖先节点中确定首个目标节点；首个目标节点的索引值为目标节点在树形组件列表中的起始索引值。Step 1920: Obtain at least one ancestor node of the first node that meets the retrieval condition, and determine the first target node from at least one ancestor node; the index value of the first target node is the starting index of the target node in the tree component list value.

根据树形组件列表中节点之间的层级关系，可以得到“0-0-1-0”的最远祖先节点为“0-0”，因此可以将“0-0”作为首个目标节点，“0-0”的索引值为0，目标节点在树形组件列表中的起始索引值为0。According to the hierarchical relationship between nodes in the tree component list, the most distant ancestor node of "0-0-1-0" is "0-0", so "0-0" can be used as the first target node, The index value of "0-0" is 0, and the starting index value of the target node in the tree component list is 0.

需要说明的是，也可以将“0-0-1-0”的最近祖先节点为“0-0-1”，因此可以也将“0-0-1”作为首个目标节点，“0-0-1”的索引值为5，目标节点在树形组件列表中的起始索引值为5。It should be noted that the nearest ancestor node of "0-0-1-0" can also be "0-0-1", so "0-0-1" can also be used as the first target node, "0- 0-1" has an index value of 5, and the starting index value of the target node in the tree component list is 5.

还需要说明的是，如果第一个满足检索条件的节点的祖先节点数量过多，也可以根据树形组件可视区域高度，从祖先节点中折中取某个节点深度的祖先节点作为首个目标节点；或者与第一个满足检索条件的节点的前向同层级节点数量过多，树形组件可视区域高度不足满足第一个满足检索条件的节点及其前向同层级节点同时显示时，也可以选择将第一个满足检索条件的节点作为首个目标节点。It should also be noted that if the number of ancestor nodes of the first node that meets the retrieval conditions is too large, the ancestor node of a certain node depth can also be selected as the first ancestor node according to the height of the visible area of the tree component. Target node; or there are too many forward nodes at the same level as the first node that meets the retrieval conditions, and the height of the visible area of the tree component is insufficient to satisfy the first node that meets the retrieval conditions and its forward nodes at the same level. , you can also choose to take the first node that meets the retrieval conditions as the first target node.

步骤1930：根据树形组件可视区域的高度和树形组件列表中位于起始索引值之后的各个节点的渲染高度，确定目标节点在树形组件列表中的最小终止索引值；其中，目标节点中各个节点的渲染高度之和大于或等于树形组件可视区域的高度。Step 1930: Determine the minimum end index value of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list; wherein, the target node The sum of the rendered heights of each node in is greater than or equal to the height of the visible area of the tree component.

确定目标节点的起始索引值之后，在树形组件列表中从首个目标节点开始顺序截取目标节点，需要说明的是，展开状态为折叠的节点的子节点不作为目标节点。After determining the starting index value of the target node, the target nodes are sequentially intercepted from the first target node in the tree component list. It should be noted that the child nodes of nodes whose expanded state is collapsed are not regarded as target nodes.

步骤1940：根据起始索引值和最小终止索引值获取目标节点。Step 1940: Obtain the target node according to the start index value and the minimum end index value.

为了实现树形组件的拖曳功能，本申请实施例中，可以监听渲染视窗中的拖曳事件。将待拖曳节点拖拽到渲染视窗中某节点的上方则将待拖曳节点插入该节点前面；将待拖曳节点拖拽到渲染视窗中某节点的中方则将待拖曳节点插入该节点的子节点的末尾；将待拖曳节点拖拽到渲染视窗中某节点的下方则将待拖曳节点插入该节点的后面。In order to realize the dragging function of the tree component, in the embodiment of the present application, the dragging event in the rendering window can be monitored. Drag the node to be dragged above a node in the rendering window, and the node to be dragged will be inserted in front of the node; drag the node to be dragged to the middle of a node in the rendering window, and the node to be dragged will be inserted into the child node of the node At the end; drag the node to be dragged to the bottom of a node in the rendering window, and the node to be dragged will be inserted behind the node.

为了实现树形组件的鼠标单双击功能，本申请实施例中，可以基于QT监听鼠标事件MouseEvent，包括单击事件Clicked和双击事件DoubleClicked。当用户进行单击操作时,会触发QT中onClicked信号函数执行；当用户进行双击操作时,会触发QT中onDoubleClicked信号函数执行。用户进行双击操作时一般是对渲染视窗中已渲染节点重命名操作。In order to realize the double-click function of the mouse of the tree component, in the embodiment of the present application, the mouse event MouseEvent can be monitored based on QT, including the single-click event Clicked and the double-click event DoubleClicked. When the user clicks, it will trigger the execution of the onClicked signal function in QT; when the user double-clicks, it will trigger the execution of the onDoubleClicked signal function in QT. When the user double-clicks, it generally renames the rendered node in the rendering window.

值得注意的是，QT开发库中提供了默认的最简单渲染策略，节点渲染显示效果可能无法满足UI(User Interface)的需求，为了实现UI开发人员自定义树形组件的渲染显示效果，本申请实施例可以提供了自定义渲染的接口，UI开发人员可以通过该接口在相应位置编写自定义的渲染组件和自定义的信号接收器，从而自定义渲染视窗中目标节点的渲染显示效果。It is worth noting that the default simplest rendering strategy is provided in the QT development library, and the node rendering display effect may not meet the needs of the UI (User Interface). In order to realize the rendering display effect of UI developers custom tree components, this application The embodiment may provide an interface for custom rendering, through which UI developers can write custom rendering components and custom signal receivers at corresponding positions, thereby customizing the rendering display effect of the target node in the rendering window.

为了进一步优化本申请实施例的性能，渲染视窗中已渲染的单个节点的数据刷新时，可以只更新渲染视窗中已渲染的节点，不刷新整个树形组件列表。渲染视窗中节点的位置改变或者展开收起只刷新需要改变的节点,不刷新整个树形组件列表。渲染视图的宽度改变或者高度改变时,可以调用函数去抖(debounce)避免不必要的刷新。In order to further optimize the performance of the embodiment of the present application, when the data of a single node rendered in the rendering window is refreshed, only the rendered node in the rendering window may be updated, and the entire tree component list may not be refreshed. When the position of the node in the rendering window is changed or expanded or collapsed, only the node that needs to be changed is refreshed, and the entire tree component list is not refreshed. When the width or height of the rendered view changes, the function debounce can be called to avoid unnecessary refresh.

在本申请上述实施例的技术方案中，基于QT在Flickable视窗中对树形组件结构进行渲染时，一方面只渲染显示与树形组件可视区域高度相匹配的部分节点，提高渲染效率；另一方面在实际渲染节点列表中存储已创建节点对象的索引，在Flickable视窗页面滑动或者其他刷新Flickable视窗页面的场景下，可以直接更新已创建节点对象里面的节点的内容即可完成页面刷新渲染，节省内存，优化性能，并且在卸载树形组件的时候，可通过销毁实际渲染节点列表进行组件卸载；再一方面当已经创建完目标节点对应的节点对象时,再多创建预设数量个预加载的节点,防止页面滑动过快而节点没有及时渲染出来导致的空白。In the technical solution of the above-mentioned embodiment of the present application, when rendering the tree-shaped component structure in the Flickable window based on QT, on the one hand, only render and display some nodes that match the height of the visible area of the tree-shaped component, so as to improve rendering efficiency; on the other hand On the one hand, the index of the created node object is stored in the actual rendering node list. In the scene where the Flickable window page slides or other Flickable window page is refreshed, the content of the node in the created node object can be directly updated to complete the page refresh rendering. Save memory, optimize performance, and when unloading the tree component, you can unload the component by destroying the actual rendering node list; on the other hand, when the node object corresponding to the target node has been created, create a preset number of preloading The node, to prevent the page from sliding too fast and the node is not rendered in time to cause the blank.

以下介绍本申请的装置实施例，可以用于执行本申请上述实施例中的视频编辑效果的验证方法。对于本申请装置实施例中未披露的细节，请参照本申请上述的树形组件渲染方法的实施例。The device embodiments of the present application are introduced below, which can be used to implement the method for verifying the video editing effect in the above-mentioned embodiments of the present application. For the details not disclosed in the device embodiments of the present application, please refer to the above embodiments of the tree component rendering method in the present application.

图20示出了根据本申请的一个实施例的树形组件渲染装置的框图，该树形组件渲染装置可以设置在具有计算处理功能的电子设备内，该电子设备比如可以是服务器或者终端设备等。如图20所示，该装置2000包括一下部分。FIG. 20 shows a block diagram of a tree component rendering device according to an embodiment of the present application. The tree component rendering device can be set in an electronic device with computing and processing functions, such as a server or a terminal device, etc. . As shown in Figure 20, the device 2000 includes the following parts.

列表获取单元2010，用于获取待渲染的树形组件列表，树形组件列表包括树形组件中的各个节点所对应的索引值和节点之间的层级关系；Alist acquisition unit 2010, configured to acquire a tree component list to be rendered, the tree component list including index values corresponding to each node in the tree component and the hierarchical relationship between nodes;

目标节点确定单元2020，用于基于树形组件可视区域的高度和树形组件列表中各个节点所对应的索引值，从树形组件列表中获取渲染高度与树形组件可视区域的高度相匹配的至少一个目标节点；The targetnode determination unit 2020 is configured to obtain the rendering height from the tree component list corresponding to the height of the tree component visible area based on the height of the tree component visible area and the index value corresponding to each node in the tree component list. at least one target node that matches;

显示位置确定单元2030，用于基于至少一个目标节点的渲染高度和节点之间的层级关系，确定至少一个目标节点在渲染视窗中的显示位置；A displayposition determining unit 2030, configured to determine the display position of at least one target node in the rendering window based on the rendering height of at least one target node and the hierarchical relationship between the nodes;

渲染单元2040，用于基于至少一个目标节点的显示位置和至少一个目标节点对应的节点内容，在渲染视窗中对至少一个目标节点进行渲染。Therendering unit 2040 is configured to render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.

在本申请的一些实施例中，基于前述方案，列表获取单元被配置为：获取具有层级关系的树形组件结构；从树形组件结构的根节点开始依次进行遍历，生成包含有节点状态信息的状态树，节点状态信息包括节点深度和父节点标识符；将状态树进行平铺处理，得到树形组件列表。In some embodiments of the present application, based on the aforementioned solution, the list acquisition unit is configured to: acquire a tree-shaped component structure with a hierarchical relationship; traverse sequentially from the root node of the tree-shaped component structure, and generate a file containing node state information State tree, the node state information includes node depth and parent node identifier; the state tree is tiled to obtain a list of tree components.

在本申请的一些实施例中，基于前述方案，树形组件可视区域的高度小于树形组件列表中所有未被折叠的节点的渲染高度之和，装置还包括：In some embodiments of the present application, based on the foregoing solution, the height of the visible area of the tree component is less than the sum of the rendering heights of all unfolded nodes in the tree component list, and the device further includes:

滑动事件监听单元，用于监听渲染视窗中触发的滑动事件，得到滑动距离；The sliding event monitoring unit is used to monitor the sliding event triggered in the rendering window to obtain the sliding distance;

第一节点更新单元，用于基于树形组件可视区域的高度、滑动距离以及树形组件列表中各个节点的索引值，对在树形组件可视区域内进行渲染显示的节点进行更新。The first node updating unit is configured to update the nodes rendered and displayed in the visible area of the tree component based on the height of the visible area of the tree component, the sliding distance and the index value of each node in the tree component list.

在本申请的一些实施例中，基于前述方案，树形组件列表中各个节点索引值由小到大顺序排列；节点更新单元被配置为：In some embodiments of the present application, based on the foregoing scheme, the index values of each node in the tree component list are arranged in ascending order; the node update unit is configured as:

基于监听到滑动事件前，渲染视窗中首个已渲染节点的第一索引值、树形组件列表中各个节点的渲染高度，以及滑动距离，确定目标节点在树形组件列表中的起始索引值；Determine the starting index value of the target node in the tree component list based on the first index value of the first rendered node in the rendering window, the rendering height of each node in the tree component list, and the sliding distance before listening to the slide event ;

根据树形组件可视区域的高度和树形组件列表中位于起始索引值之后的各个节点的渲染高度，确定目标节点在树形组件列表中的最小终止索引值；其中，目标节点中各个节点的渲染高度之和大于或等于树形组件可视区域的高度。According to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list, determine the minimum end index value of the target node in the tree component list; wherein, each node in the target node The sum of the rendering heights of is greater than or equal to the height of the visible area of the tree component.

在本申请的一些实施例中，基于前述方案，渲染单元被配置为：获取渲染视窗中的已创建节点对象；通过对已创建节点对象的引用，将已创建节点对象对应的节点内容替换为与已创建节点对象的显示位置相匹配的目标节点的节点内容；若已创建节点对象的数量小于目标节点的节点数量，则从目标节点中确定未匹配到已创建节点对象的节点；根据未匹配到已创建节点对象的节点的节点内容和显示位置，在渲染视窗中创建新的节点对象；将新的节点对象的引用存储在实际渲染节点列表中。In some embodiments of the present application, based on the foregoing solution, the rendering unit is configured to: acquire the created node object in the rendering window; and replace the node content corresponding to the created node object with The display position of the created node object matches the node content of the target node; if the number of created node objects is less than the number of nodes of the target node, then determine the nodes that are not matched with the created node object from the target node; The node content and display position of the node that has created the node object, create a new node object in the rendering window; store the reference of the new node object in the actual rendering node list.

在本申请的一些实施例中，基于前述方案，装置还包括：In some embodiments of the present application, based on the foregoing solution, the device further includes:

预加载节点确定单元，用于根据目标节点的索引值，从树形组件列表中截取位于目标节点之后的预设数量个节点，作为预加载节点；The preload node determination unit is used to intercept a preset number of nodes located after the target node from the tree component list as preload nodes according to the index value of the target node;

预加载节点显示位置确定单元，用于基于预加载节点的节点层级关系以及渲染高度，确定预加载节点的显示位置；The display position determination unit of the preloaded node is used to determine the display position of the preloaded node based on the node hierarchy relationship and the rendering height of the preloaded node;

预加载节点对象创建单元，用于根据预加载节点的显示位置和节点内容，创建预加载节点对象。The preloading node object creation unit is configured to create a preloading node object according to the display position and node content of the preloading node.

在本申请的一些实施例中，基于前述方案，装置还包括：In some embodiments of the present application, based on the foregoing solution, the device further includes:

拖曳事件监听单元，用于监听渲染视窗中的拖曳事件；The dragging event monitoring unit is used to monitor the dragging event in the rendering window;

第二节点更新单元，用于若拖曳事件为将第一节点拖曳到渲染视窗中空白区域，则将第一节点插入树形组件列表中根节点的最后一个子节点的末尾，并更新树形组件列表中各个节点的索引值；若拖曳事件为将第一节点拖曳到渲染视窗中第二节点所关联的操作区域，则在树形组件列表中将第一节点插入到第二节点所关联的操作区域对应的位置，并更新树形组件列表中各个节点的索引值。The second node update unit is used to insert the first node into the end of the last child node of the root node in the tree component list and update the tree component list if the drag event is to drag the first node to the blank area in the rendering window The index value of each node in ; if the drag event is dragging the first node to the operation area associated with the second node in the rendering window, insert the first node into the operation area associated with the second node in the tree component list The corresponding position, and update the index value of each node in the tree component list.

在本申请的一些实施例中，基于前述方案，目标节点确定单元被配置为：基于树形组件可视区域的高度和更新后的树形组件列表中各个节点索引值，从更新后的树形组件列表中获取与树形组件可视区域的高度相匹配的至少一个目标节点。In some embodiments of the present application, based on the foregoing solution, the target node determination unit is configured to: based on the height of the visible area of the tree component and the index value of each node in the updated tree component list, from the updated tree component Get at least one target node in the component list that matches the height of the visible area of the tree component.

在本申请的一些实施例中，基于前述方案，树形组件列表中各个节点的索引值由小到大顺序排列；装置还包括：In some embodiments of the present application, based on the foregoing scheme, the index values of each node in the tree component list are arranged in order from small to large; the device also includes:

检索事件监听单元，用于监听渲染视窗中的检索事件，获取检索事件中的检索条件；A retrieval event monitoring unit, configured to monitor retrieval events in the rendering window, and obtain retrieval conditions in the retrieval events;

目标节点确定单元被配置为：确定树形组件列表中第一个满足检索条件的节点；获取第一个满足检索条件的节点的至少一个祖先节点，从至少一个祖先节点中确定首个目标节点；首个目标节点的索引值为目标节点在树形组件列表中的起始索引值；根据树形组件可视区域的高度和树形组件列表中位于起始索引值之后的各个节点的渲染高度，确定目标节点在树形组件列表中的最小终止索引值；其中，目标节点中各个节点的渲染高度之和大于或等于树形组件可视区域的高度；根据起始索引值和最小终止索引值获取目标节点。The target node determining unit is configured to: determine the first node satisfying the retrieval condition in the tree component list; obtain at least one ancestor node of the first node satisfying the retrieval condition, and determine the first target node from at least one ancestor node; The index value of the first target node is the start index value of the target node in the tree component list; according to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list, Determine the minimum end index value of the target node in the tree component list; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of the tree component; get it according to the start index value and the minimum end index value target node.

图21示出了适于用来实现本申请实施例的电子设备的计算机系统的结构示意图。Fig. 21 shows a schematic structural diagram of a computer system suitable for implementing the electronic device of the embodiment of the present application.

需要说明的是，图21示出的电子设备的计算机系统2100仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。It should be noted that thecomputer system 2100 of the electronic device shown in FIG. 21 is only an example, and should not limit the functions and scope of use of this embodiment of the present application.

如图21所示，计算机系统2100包括中央处理单元(Central Processing Unit，CPU)2101，其可以根据存储在只读存储器(Read-Only Memory，ROM)2102中的程序或者从储存部分2108加载到随机访问存储器(Random Access Memory，RAM)2103中的程序而执行各种适当的动作和处理，例如执行上述实施例中所述的方法。在RAM 2103中，还存储有系统操作所需的各种程序和数据。CPU 2101、ROM 2102以及RAM 2103通过总线2104彼此相连。输入/输出(Input/Output，I/O)接口2105也连接至总线2104。As shown in Figure 21, thecomputer system 2100 includes a central processing unit (Central Processing Unit, CPU) 2101, which can be stored in a program in a read-only memory (Read-Only Memory, ROM) 2102 or loaded from astorage part 2108 to a random It accesses the programs in the memory (Random Access Memory, RAM) 2103 to execute various appropriate actions and processes, for example, executes the methods described in the above-mentioned embodiments. In theRAM 2103, various programs and data necessary for system operation are also stored. TheCPU 2101 ,ROM 2102 , andRAM 2103 are connected to each other via abus 2104 . An input/output (Input/Output, I/O)interface 2105 is also connected to thebus 2104 .

以下部件连接至I/O接口2105：包括键盘、鼠标等的输入部分2106；包括诸如阴极射线管(Cathode Ray Tube，CRT)、液晶显示器(Liquid Crystal Display，LCD)等以及扬声器等的输出部分2107；包括硬盘等的储存部分2108；以及包括诸如LAN(Local AreaNetwork，局域网)卡、调制解调器等的网络接口卡的通信部分2109。通信部分2109经由诸如因特网的网络执行通信处理。驱动器2110也根据需要连接至I/O接口2105。可拆卸介质2111，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器2110上，以便于从其上读出的计算机程序根据需要被安装入储存部分2108。The following components are connected to the I/O interface 2105: aninput section 2106 including a keyboard, a mouse, etc.; anoutput section 2107 including a cathode ray tube (Cathode Ray Tube, CRT), a liquid crystal display (Liquid Crystal Display, LCD), etc., and a speaker ; astorage section 2108 including a hard disk or the like; and acommunication section 2109 including a network interface card such as a LAN (Local Area Network) card, a modem, or the like. Thecommunication section 2109 performs communication processing via a network such as the Internet. Adrive 2110 is also connected to the I/O interface 2105 as needed. A removable medium 2111 such as a magnetic disk, optical disk, magneto-optical disk, semiconductor memory, etc. is mounted on thedrive 2110 as necessary so that a computer program read therefrom is installed into thestorage section 2108 as necessary.

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分2109从网络上被下载和安装，和/或从可拆卸介质2111被安装。在该计算机程序被中央处理单元(CPU)2101执行时，执行本申请的系统中限定的各种功能。In particular, according to the embodiments of the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments of the present application include a computer program product, which includes a computer program carried on a computer-readable medium, where the computer program includes program codes for executing the methods shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from a network via thecommunication portion 2109, and/or installed from aremovable medium 2111. When this computer program is executed by a central processing unit (CPU) 2101, various functions defined in the system of the present application are performed.

需要说明的是，本申请实施例所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read Only Memory，EPROM)、闪存、光纤、便携式紧凑磁盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、有线等等，或者上述的任意合适的组合。It should be noted that the computer-readable medium shown in the embodiment of the present application may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, electrical connections with one or more wires, portable computer diskettes, hard disks, random access memory (RAM), read-only memory (ROM), erasable Programmable Read-Only Memory (Erasable Programmable Read Only Memory, EPROM), flash memory, optical fiber, portable compact disk read-only memory (Compact Disc Read-Only Memory, CD-ROM), optical storage device, magnetic storage device, or any suitable The combination. In the present application, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, however, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, in which computer-readable program codes are carried. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. . Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wired, etc., or any suitable combination of the above.

附图中的流程图和框图，图示了按照本申请各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。其中，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。The flowchart and block diagrams in the Figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. Wherein, each block in the flowchart or block diagram may represent a module, a program segment, or a part of the code, and the above-mentioned module, program segment, or part of the code includes one or more executable instruction. It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or they may sometimes be executed in the reverse order, depending upon the functionality involved. It should also be noted that each block in the block diagrams or flowchart illustrations, and combinations of blocks in the block diagrams or flowchart illustrations, can be implemented by a dedicated hardware-based system that performs the specified function or operation, or can be implemented by a A combination of dedicated hardware and computer instructions.

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。The units described in the embodiments of the present application may be implemented by software or by hardware, and the described units may also be set in a processor. Wherein, the names of these units do not constitute a limitation of the unit itself under certain circumstances.

作为另一方面，本申请还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的树形组件渲染方法。As another aspect, the present application also provides a computer program product or computer program, where the computer program product or computer program includes computer instructions, and the computer instructions are stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the tree component rendering method described in the above embodiments.

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的树形组件渲染方法。As another aspect, the present application also provides a computer-readable medium. The computer-readable medium may be included in the electronic device described in the above-mentioned embodiments; or it may exist independently without being assembled into the electronic device. middle. The above-mentioned computer-readable medium carries one or more programs, and when the above-mentioned one or more programs are executed by the electronic device, the electronic device is made to implement the tree component rendering method described in the above-mentioned embodiments.

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本申请的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。It should be noted that although several modules or units of the device for action execution are mentioned in the above detailed description, this division is not mandatory. Actually, according to the embodiment of the present application, the features and functions of two or more modules or units described above may be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided to be embodied by a plurality of modules or units.

通过以上的实施方式的描述，本领域的技术人员易于理解，这里描述的示例实施方式可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本申请实施方式的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、触控终端、或者网络设备等)执行根据本申请实施方式的方法。Through the description of the above implementations, those skilled in the art can easily understand that the example implementations described here can be implemented by software, or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of the present application can be embodied in the form of software products, which can be stored in a non-volatile storage medium (which can be CD-ROM, U disk, mobile hard disk, etc.) or on the network , including several instructions to make a computing device (which may be a personal computer, server, touch terminal, or network device, etc.) execute the method according to the embodiment of the present application.

本领域技术人员在考虑说明书及实践这里公开的实施方式后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本申请未公开的本技术领域中的公知常识或惯用技术手段。Other embodiments of the present application will be readily apparent to those skilled in the art from consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any modification, use or adaptation of the application, these modifications, uses or adaptations follow the general principles of the application and include common knowledge or conventional technical means in the technical field not disclosed in the application .

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本申请的范围仅由所附的权利要求来限制。It should be understood that the present application is not limited to the precise constructions which have been described above and shown in the drawings, and various modifications and changes may be made without departing from the scope thereof. The scope of the application is limited only by the appended claims.

Claims (10)

Translated fromChinese

1.一种树形组件渲染方法，其特征在于，所述方法包括：1. A tree component rendering method, characterized in that the method comprises:获取待渲染的树形组件列表，所述树形组件列表包括树形组件中的各个节点所对应的索引值和节点之间的层级关系；Obtain a list of tree components to be rendered, the list of tree components includes index values corresponding to each node in the tree component and the hierarchical relationship between nodes;基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点；Based on the height of the visible area of the tree component and the index value corresponding to each node in the tree component list, obtain from the list of tree components the rendering height matching the height of the visible area of the tree component at least one target node;基于所述至少一个目标节点的渲染高度和节点之间的层级关系，确定所述至少一个目标节点在渲染视窗中的显示位置；Based on the rendering height of the at least one target node and the hierarchical relationship between nodes, determine the display position of the at least one target node in the rendering window;基于所述至少一个目标节点的所述显示位置和所述至少一个目标节点对应的节点内容，在所述渲染视窗中对所述至少一个目标节点进行渲染。Render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.2.如权利要求1所述的方法，其特征在于，所述获取待渲染的树形组件列表，包括：2. The method according to claim 1, wherein said acquiring the list of tree components to be rendered comprises:获取具有层级关系的树形组件结构；Obtain a tree-like component structure with hierarchical relationships;从所述树形组件结构的根节点开始依次进行遍历，生成包含有节点状态信息的状态树，所述节点状态信息包括节点深度和父节点标识符；Traverse sequentially from the root node of the tree component structure to generate a state tree containing node state information, the node state information including node depth and parent node identifier;将所述状态树进行平铺处理，得到所述树形组件列表。The state tree is tiled to obtain the tree component list.3.如权利要求1所述的方法，其特征在于，所述树形组件可视区域的高度小于所述树形组件列表中所有未被折叠的节点的渲染高度之和，所述方法还包括：3. The method according to claim 1, wherein the height of the visible area of the tree component is less than the sum of the rendering heights of all unfolded nodes in the tree component list, the method further comprising :监听所述渲染视窗中触发的滑动事件，得到滑动距离；Listening to the sliding event triggered in the rendering window to obtain the sliding distance;基于所述树形组件可视区域的高度、所述滑动距离以及所述树形组件列表中各个节点的索引值，对在所述树形组件可视区域内进行渲染显示的节点进行更新。Based on the height of the visible area of the tree component, the sliding distance, and the index value of each node in the list of the tree component, the nodes rendered and displayed in the visible area of the tree component are updated.4.如权利要求3所述的方法，其特征在于，所述树形组件列表中各个节点索引值由小到大顺序排列；4. The method according to claim 3, wherein the index values of each node in the tree component list are arranged in ascending order;基于所述树形组件可视区域的高度、所述滑动距离以及所述树形组件列表中各个节点的索引值，对在所述树形组件可视区域内进行渲染显示的节点进行更新，包括：Based on the height of the visible area of the tree component, the sliding distance, and the index value of each node in the tree component list, update the nodes rendered and displayed in the visible area of the tree component, including :基于监听到所述滑动事件前，所述渲染视窗中首个已渲染节点的第一索引值、所述树形组件列表中各个节点的渲染高度，以及所述滑动距离，确定所述目标节点在所述树形组件列表中的起始索引值；Based on the first index value of the first rendered node in the rendering window, the rendering height of each node in the tree component list, and the sliding distance before the sliding event is detected, it is determined that the target node is at The starting index value in the tree component list;根据所述树形组件可视区域的高度和所述树形组件列表中位于所述起始索引值之后的各个节点的渲染高度，确定所述目标节点在所述树形组件列表中的最小终止索引值；其中，所述目标节点中各个节点的渲染高度之和大于或等于所述树形组件可视区域的高度。Determine the minimum stop of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list Index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of the tree component.5.如权利要求1所述的方法，其特征在于，所述基于所述至少一个目标节点的显示位置和所述至少一个目标节点对应的节点内容，在所述渲染视窗中对所述至少一个目标节点进行渲染，包括：5. The method according to claim 1, wherein, based on the display position of the at least one target node and the node content corresponding to the at least one target node, in the rendering window, the at least one The target node is rendered, including:获取所述渲染视窗中的已创建节点对象；Obtain the created node object in the rendering viewport;通过对所述已创建节点对象的引用，将所述已创建节点对象对应的节点内容替换为与所述已创建节点对象的显示位置相匹配的目标节点的节点内容；By referring to the created node object, replacing the node content corresponding to the created node object with the node content of the target node matching the display position of the created node object;若所述已创建节点对象的数量小于所述目标节点的节点数量，则从所述目标节点中确定未匹配到已创建节点对象的节点；If the number of the created node objects is less than the number of nodes of the target node, then determine the nodes that do not match the created node objects from the target nodes;根据所述未匹配到已创建节点对象的节点的节点内容和显示位置，在所述渲染视窗中创建新的节点对象；Create a new node object in the rendering window according to the node content and display position of the node that is not matched to the created node object;将所述新的节点对象的引用存储在实际渲染节点列表中。A reference to the new node object is stored in the list of actual rendered nodes.6.如权利要求1所述的方法，其特征在于，所述方法还包括：6. The method of claim 1, further comprising:根据所述目标节点的索引值，从所述树形组件列表中截取位于所述目标节点之后的预设数量个节点，作为预加载节点；According to the index value of the target node, intercept a preset number of nodes located after the target node from the tree component list as preloaded nodes;基于所述预加载节点的节点层级关系以及渲染高度，确定所述预加载节点的显示位置；Determine the display position of the preload node based on the node hierarchy relationship and rendering height of the preload node;根据所述预加载节点的显示位置和节点内容，创建预加载节点对象。Create a preloaded node object according to the display position and node content of the preloaded node.7.如权利要求1所述的方法，其特征在于，所述方法还包括：7. The method of claim 1, further comprising:监听所述渲染视窗中的拖曳事件；Listen to the drag event in the rendering window;若所述拖曳事件为将第一节点拖曳到所述渲染视窗中空白区域，则将所述第一节点插入所述树形组件列表中根节点的最后一个子节点的末尾，并更新所述树形组件列表中各个节点的索引值；If the drag event is dragging the first node to a blank area in the rendering window, insert the first node at the end of the last child node of the root node in the tree component list, and update the tree The index value of each node in the component list;若所述拖曳事件为将所述第一节点拖曳到所述渲染视窗中第二节点所关联的操作区域，则在所述树形组件列表中将所述第一节点插入到所述第二节点所关联的操作区域对应的位置，并更新所述树形组件列表中各个节点的索引值。If the drag event is dragging the first node to the operation area associated with the second node in the rendering window, insert the first node into the second node in the tree component list The location corresponding to the associated operation area, and update the index value of each node in the tree component list.8.如权利要求7所述的方法，其特征在于，基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点，包括：8. The method according to claim 7, characterized in that, based on the height of the visible area of the tree component and the index value corresponding to each node in the tree component list, the rendering is obtained from the tree component list At least one target node whose height matches the height of the visible area of the tree component, including:基于所述树形组件可视区域的高度和更新后的树形组件列表中各个节点索引值，从所述更新后的树形组件列表中获取与所述树形组件可视区域的高度相匹配的至少一个目标节点。Based on the height of the visible area of the tree component and the index value of each node in the updated tree component list, obtain from the updated tree component list that matches the height of the visible area of the tree component at least one target node for .9.如权利要求1至8中任一项所述的方法，其特征在于，所述树形组件列表中各个节点的索引值由小到大顺序排列；所述方法还包括：9. The method according to any one of claims 1 to 8, wherein the index values of each node in the tree component list are arranged in ascending order; the method further comprises:监听所述渲染视窗中的检索事件，获取所述检索事件中的检索条件；Listening to the retrieval event in the rendering window, and obtaining the retrieval condition in the retrieval event;所述基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点，包括：Based on the height of the visible area of the tree component and the index value corresponding to each node in the list of tree components, the rendered height is obtained from the list of tree components corresponding to the height of the visible area of the tree component. Match at least one target node, including:确定所述树形组件列表中第一个满足所述检索条件的节点；determining the first node in the tree component list that satisfies the retrieval condition;获取所述第一个满足所述检索条件的节点的至少一个祖先节点，从所述至少一个祖先节点中确定首个目标节点；所述首个目标节点的索引值为所述目标节点在所述树形组件列表中的起始索引值；Obtain at least one ancestor node of the first node that meets the retrieval condition, and determine the first target node from the at least one ancestor node; the index value of the first target node is in the The starting index value in the tree component list;根据所述树形组件可视区域的高度和所述树形组件列表中位于所述起始索引值之后的各个节点的渲染高度，确定所述目标节点在所述树形组件列表中的最小终止索引值；其中，所述目标节点中各个节点的渲染高度之和大于或等于所述树形组件可视区域的高度；Determine the minimum stop of the target node in the tree component list according to the height of the visible area of the tree component and the rendering height of each node after the start index value in the tree component list Index value; wherein, the sum of the rendering heights of each node in the target node is greater than or equal to the height of the visible area of the tree component;根据所述起始索引值和所述最小终止索引值获取所述目标节点。Acquiring the target node according to the starting index value and the minimum ending index value.10.一种树形组件渲染装置，其特征在于，所述装置包括：10. A tree component rendering device, characterized in that the device comprises:列表获取单元，用于获取待渲染的树形组件列表，所述树形组件列表包括树形组件中的各个节点所对应的索引值和节点之间的层级关系；A list acquisition unit, configured to acquire a tree component list to be rendered, the tree component list including index values corresponding to each node in the tree component and hierarchical relationships between nodes;目标节点确定单元，用于基于树形组件可视区域的高度和所述树形组件列表中各个节点所对应的索引值，从所述树形组件列表中获取渲染高度与所述树形组件可视区域的高度相匹配的至少一个目标节点；The target node determination unit is configured to obtain the rendering height from the tree component list and the available height of the tree component based on the height of the visible area of the tree component and the index value corresponding to each node in the tree component list. At least one target node matching the height of the viewport;显示位置确定单元，用于基于所述至少一个目标节点的渲染高度和节点之间的层级关系，确定所述至少一个目标节点在渲染视窗中的显示位置；A display position determining unit, configured to determine the display position of the at least one target node in the rendering window based on the rendering height of the at least one target node and the hierarchical relationship between nodes;渲染单元，用于基于所述至少一个目标节点的所述显示位置和所述至少一个目标节点对应的节点内容，在所述渲染视窗中对所述至少一个目标节点进行渲染。A rendering unit, configured to render the at least one target node in the rendering window based on the display position of the at least one target node and the node content corresponding to the at least one target node.

Images