CN111104111B - 一种树状Canvas画布的布局处理方法及装置 - Google Patents

Abstract

本发明公开一种树状Canvas画布的布局处理方法及装置，属于计算机技术领域。方法包括：获取Canvas画布的布局参数和树形结构数据；对树形结构数据中各级节点分别创建虚拟DOM对象，并计算各个虚拟DOM对象的宽度和高度，记录为各级节点的虚拟宽度和虚拟高度；若布局参数指示对Canvas画布进行左右布局，则从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出根节点的新的虚拟高度；根据各级节点的虚拟宽度和新的虚拟高度，获取各级节点的第一位置信息，并对各级节点分别创建真实DOM对象；根据各级节点的第一位置信息，将各级节点对应的真实DOM对象渲染到Canvas画布上。本发明能提高画布渲染效率。

Description

一种树状Canvas画布的布局处理方法及装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种树状Canvas画布的布局处理方 法及装置。

背景技术

目前，常见的图表库通常是基于HTML5Canvas(画布)进行绘制，Canvas是 HTML5中新增的一个重要元素，专门用来绘制图像，在网页上放置一个Canvas 元素，就相当于在网页上放置一块“画布”，可以在其中进行图像的描绘。更具体 的说，可以在画布中绘制文本(即文字信息)、线条(如直线、曲线或者弧线等等)、 矩形、圆形等等。

在传统的树状Canvas画布的布局处理过程中，通常是先根据画布中心点设 置根节点坐标，每新增子节点，会根据父节点的坐标(x，y)去设置子节点坐标， 以横向布局为例，父节点的纵向坐标是不固定的，每对该父节点新增子节点时， 会根据该父节点所有子节点的累计高度来设置父级节点的纵向坐标，那么父级节 点的变化也必定引起更上一级的位置变化，以此类推，由此可见，这种采取先渲 染后调整，然后再渲染的方式，导致画布渲染效率较低。

发明内容

为了解决上述背景技术中提到的技术问题，本发明提供了一种树状Canvas画 布的布局处理方法及装置，以提高画布渲染效率。

本发明实施例提供的具体技术方案如下：

第一方面，提供了一种树状Canvas画布的布局处理方法，所述方法包括：

获取Canvas画布的布局参数和所述Canvas画布的树形结构数据；

对所述树形结构数据中各级节点分别创建虚拟DOM对象，并计算各个所述 虚拟DOM对象的宽度和高度，记录为所述各级节点的虚拟宽度和虚拟高度；

若所述布局参数指示对所述Canvas画布进行左右布局，则执行如下操作：

对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点 的虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出所 述根节点的新的虚拟高度；

根据所述各级节点的虚拟宽度和所述各级节点的新的虚拟高度，获取所述各 级节点的第一位置信息，并对所述各级节点分别创建真实DOM对象；

根据所述各级节点的第一位置信息，将所述各级节点对应的真实DOM对象 渲染到所述Canvas画布上。

进一步地，所述获取Canvas画布的布局参数和所述Canvas画布的树形结构 数据，包括：

获取用户通过预设的API接口输入的画布配置数据；

从所述画布配置数据中解析出所述布局参数和JSON格式数据；

将所述JSON格式数据转换成所述树形结构数据。

进一步地，对所述各级节点从根节点开始遍历，每增加一级子节点时，根据 该级子节点的虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递 归计算出所述根节点的新的虚拟高度，包括：

采用广度优先算法，对所述各级节点从根节点开始遍历，每增加一级子节点 时，分别对该级子节点中属于同一父节点的子节点的虚拟高度进行求和，以递归 计算出上一级中各个父节点的新的虚拟高度；

根据所述上一级中各个父节点的新的虚拟高度进行反向递归，直至递归计算 出所述根节点的新的虚拟高度。

进一步地，所述第一位置信息包括横坐标和纵坐标，所述根据所述各级节点 的虚拟宽度和所述各级节点的新的虚拟高度，获取所述各级节点的第一位置信息， 包括：

根据所述各级节点的虚拟宽度和预设的横向间距，获得所述各级节点的横坐 标；

分别将所述各级节点分别设置在所述各级节点的新的虚拟高度内的居中位 置处，获得所述各级节点的纵坐标。

进一步地，所述方法还包括：

若所述布局参数指示对所述Canvas画布进行上下布局，则执行如下操作：

对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点 的虚拟宽度进行反向递归计算上一级父节点的新的虚拟宽度，直至递归计算出所 述根节点的新的虚拟宽度；

根据所述各级节点的虚拟高度和所述各级节点的新的虚拟宽度，获取所述各 级节点的第二位置信息，并对所述各级节点分别创建真实DOM对象；

根据所述各级节点的第二位置信息，将所述各级节点对应的真实DOM对象 渲染到所述Canvas画布上。

第二方面，提供了一种树状Canvas画布的布局处理装置，所述装置包括：

数据获取模块，用于获取Canvas画布的布局参数和所述Canvas画布的树形 结构数据；

对象创建模块，用于对所述树形结构数据中各级节点分别创建虚拟DOM对 象，并计算各个所述虚拟DOM对象的宽度和高度，记录为所述各级节点的虚拟 宽度和虚拟高度；

递归计算模块，用于若所述布局参数指示对所述Canvas画布进行左右布局， 则对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的 虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出所述 根节点的新的虚拟高度；

位置获取模块，用于根据所述各级节点的虚拟宽度和所述各级节点的新的虚 拟高度，获取所述各级节点的第一位置信息，并对所述各级节点分别创建真实 DOM对象；

画布渲染模块，用于根据所述各级节点的第一位置信息，将所述各级节点对 应的真实DOM对象渲染到所述Canvas画布上。

进一步地，所述数据获取模块具体用于：

获取用户通过预设的API接口输入的画布配置数据；

从所述画布配置数据中解析出所述布局参数和JSON格式数据；

将所述JSON格式数据转换成所述树形结构数据。

进一步地，所述递归计算模块具体用于：

采用广度优先算法，对所述各级节点从根节点开始遍历，每增加一级子节点 时，分别对该级子节点中属于同一父节点的子节点的虚拟高度进行求和，以递归 计算出上一级中各个父节点的新的虚拟高度；

根据所述上一级中各个父节点的新的虚拟高度进行反向递归，直至递归计算 出所述根节点的新的虚拟高度。

进一步地，所述第一位置信息包括横坐标和纵坐标，所述位置获取模块具体 用于：

根据所述各级节点的虚拟宽度和预设的横向间距，获得所述各级节点的横坐 标；

分别将所述各级节点分别设置在所述各级节点的新的虚拟高度内的居中位 置处，获得所述各级节点的纵坐标。

进一步地，所述递归计算模块，还用于若所述布局参数指示对所述Canvas画 布进行上下布局，则对所述各级节点从根节点开始遍历，每增加一级子节点时， 根据该级子节点的虚拟宽度进行反向递归计算上一级父节点的新的虚拟宽度，直 至递归计算出所述根节点的新的虚拟宽度；

所述位置获取模块，还用于根据所述各级节点的虚拟高度和所述各级节点的 新的虚拟宽度，获取所述各级节点的第二位置信息，并对所述各级节点分别创建 真实DOM对象；

所述画布渲染模块，还用于根据所述各级节点的第二位置信息，将所述各级 节点对应的真实DOM对象渲染到所述Canvas画布上。

第三方面，提供了一种计算机设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个 处理器实现如第一方面任一所述的树状Canvas画布的布局处理方法。

第四方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述 程序被处理器执行时实现如第一方面任一所述的树状Canvas画布的布局处理方 法。

本发明实施例提供一种树状Canvas画布的布局处理方法及装置，在对Canvas 画布进行渲染时，通过利用树形结构中的各层级节点之间的相互关系进行遍历并 反向递归计算，每一次节点的高度变化，仅改变树形结构数据的变化，而不会影 响到树形结构，这样，当变化结束，对各级节点自顶而下一次性渲染相关树，能 够提高画布中各元素的定位计算速度，从而提高画布渲染效率。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需 要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一 些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可 以根据这些附图获得其他的附图。

图1示出了一种树状Canvas画布的布局处理方法的流程示意图；

图2a示出了各级节点的横坐标计算过程示意图；

图2b示出了各级节点的纵坐标计算过程示意图；

图3a至图3f示出了树状Canvas画布的布局处理过程示意图；

图4示出了另一种树状Canvas画布的布局处理方法的流程示意图；

图5示出了一种树状Canvas画布的布局处理装置的结构示意图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合本发明实施例中 的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的 实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施 例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例， 都属于本发明保护的范围。

需要说明的是，除非上下文明确要求，否则整个说明书和权利要求书中的“包括”、“包含”等类似词语应当解释为包含的含义而不是排他或穷举的含义；也就是 说，是“包括但不限于”的含义。

此外，在本发明的描述中，需要理解的是，术语“第一”、“第二”等仅条件森 林库目的，而不能理解为指示或暗示相对重要性。此外，在本发明的描述中，除 非另有说明，“多个”的含义是两个或两个以上。

实施例一

本发明实施例提供了一种树状Canvas画布的布局处理方法，该方法可以应 用于画布组件中，如图1所示，该方法可以包括步骤：

步骤S11，获取Canvas画布的布局参数和Canvas画布的树形结构数据。

其中，布局参数用于指示Canvas画布的布局方向，布局参数可以通过用户 在调用画布组件前进行预先设置，例如将布局参数设置对Canvas画布中的DOM (Document ObjectModel，文档对象模型)对象进行左右布局或上下布局。

其中，树形结构数据可以为JSON格式的数据或其他格式的数据，该树形结 构数据中包括具有父级-子级关系的节点数据。

具体地，步骤S11的实现过程可以包括：

获取用户通过预设的API接口输入的画布配置数据，从画布配置数据中解析 出布局参数和JSON格式数据，将JSON格式数据转换成树形结构数据。

本实施例中，Canvas画布的布局参数和Canvas画布的树形结构数据可以从 用户通过预设的API接口输入的画布配置数据中获得。其中，用户可以根据实际 需求通过调用API接口向画布组件传入画布配置数据，以实现对Canvas画布进 行配置。此外，画布配置数据中除了包括Canvas画布的布局参数和Canvas画布 的JSON格式数据，还可以包括页面容器ID、节点属性、节点事件属性、连线属 性等配置信息；其中，页面容器ID用于指示Canvas画布所展现在页面上的位置； 节点属性用于定义节点类型和节点样式；节点事件属性用于定义节点是否可以拖 拽、节点是否可点击、节点是否禁用等；连线属性用于定义连线是否可修改、连 线颜色、连线类型等，其中，连线类型包括贝塞尔曲线和折线(包含直线)。

步骤S12，对树形结构数据中各级节点分别创建虚拟DOM对象，并计算各 个虚拟DOM对象的宽度和高度，记录为各级节点的虚拟宽度和虚拟高度。

具体地，画布组件可以通过调用内部代码对树形结构数据进行遍历，将遍历 到的每一个节点通过利用Canvas中的Konva库绘制成对应的虚拟DOM对象， 然后针对各个虚拟DOM对象，通过使用其自身的height以及width计算方法获 取各个虚拟DOM对象的宽度与高度，并将各个虚拟DOM对象的宽度与高度分 别作为各级节点的虚拟宽度和虚拟高度记录到树形结构数据中。

本实施例中，在用户未定义各级节点的width值以及height值的情形下，通 过创建虚拟DOM对象的方式，并将虚拟DOM对象的宽度与高度作为各级节点 的虚拟宽度和虚拟高度，进而可以利用各级节点的虚拟宽度和虚拟高度进行对各 级节点进行定位计算。

此外，可以理解的是，当用户定义了各级节点的width值以及height值的情 形下，只需根据用户所定义的各级节点的width值以及height值进行对各级节点 进行定位计算即可，由此使得定位计算更具有灵活性。

步骤S13，若布局参数指示对Canvas画布进行左右布局，则对各级节点从根 节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟高度进行反向递归 计算上一级父节点的新的虚拟高度，直至递归计算出根节点的新的虚拟高度。

其中，在各级节点中，第一层级节点是根节点，第二层级节点为父节点，第 二层级节点为第二层级节点的子节点，依次类推，第n层级节点为第n-1层级节 点的子节点。

具体地，可以采用广度优先算法，对各级节点从根节点开始遍历，每增加一 级子节点时，分别对该级子节点中属于同一父节点的子节点的虚拟高度进行求和， 以递归计算出上一级中各个父节点的新的虚拟高度；根据上一级中各个父节点的 新的虚拟高度进行反向递归，直至递归计算出根节点的新的虚拟高度。

其中，广度优先算法是先遍历层级在前的节点再遍历层级在后的节点，即再 遍历完第一层级节点后，再依次遍历第二层级节点，依次类推，直至到最低一层 级节点。

本实施例中，通过设定各级节点的虚拟高度，并结合遍历各级节点，反向递 归计算的方式，使得每一层级的总高度保持相等，由此能够节省计算时间，降低 计算复杂度。

步骤S14，根据各级节点的虚拟宽度和各级节点的新的虚拟高度，获取各级 节点的第一位置信息，并对各级节点分别创建真实DOM对象。

其中，第一位置信息包括横坐标和纵坐标。

具体地，根据各级节点的虚拟宽度和各级节点的新的虚拟高度，获取各级节 点的第一位置信息，可以包括：

a、根据各级节点的虚拟宽度和预设的横向间距，获得各级节点的横坐标。

其中，横向间距为相邻的各级节点之间的横向间隔距离，横向间距可以根据 实际需要进行设定。

具体来说，可以采用如下公式(1)获取到第n级节点的横坐标：

x_n＝x_n-1+W_n-1+(n-1)*W_GAP 公式(1)；

参照如图2a所示，，X_n表示为第n级节点的横坐标，X_n-1表示为第(n-1) 级节点的横坐标，W_n-1表示为第(n-1)级节点的虚拟宽度，W_GAP表示为相邻两 级节点之间的横向间距，其中，当n＝1时，该级节点即为根节点。

b、分别将各级节点分别设置在各级节点的新的虚拟高度内的居中位置处， 获得各级节点的纵坐标。

可以采用如下公式(2)获取到各级内的节点n的纵坐标：

参照如图2b所示，Y_n表示同一层级内的节点n的纵坐标，VH_i表示为该层 级内的每个节点的虚拟高度，H_GAP表示为同一层级之间的相邻两个节点之间的 纵向间距，H_n表示节点n的真实高度。

当获取各级节点的横坐标和纵坐标后，将各级节点的横坐标和纵坐标写入到 树形结构数据中，得到新的树形结构数据，此时画布组件可以通过调用内部代码 对新的树形结构数据中的各级节点进行遍历，将遍历到的每一个节点通过利用 Canvas中的Konva库绘制成对应的真实DOM对象。

步骤S15，根据各级节点的第一位置信息，将各级节点对应的真实DOM对 象渲染到Canvas画布上。

具体地，根据各级节点的横坐标和纵坐标将各级节点对应的真实DOM对象 渲染到Canvas画布上，并在Canvas画布上对各级节点之间通过连线进行对应连 接。

本实施例中，将连线元素与节点元素分开批量渲染，可以将相关业务解耦， 增加性能以及代码的可扩展性以及可维护性，为后期更新以及功能的完善提供便 利，并且，能够将整个Tree形结构美观且合理地进行展示。

进一步地，方法还可以包括：

对各级节点对应的真实DOM对象分别进行绑定事件，并将事件暴露到API 接口层以供用户调用监听，其中，所绑定的事件例如：点击、双击、右击等，于 本实施例中，可以采用发布-订阅模式作为事件。

本发明实施例提供了一种树状Canvas画布的布局处理方法，在对Canvas画 布进行渲染时，通过利用树形结构中的各层级节点之间的相互关系进行遍历并反 向递归计算，每一次节点的高度变化，仅改变树形结构数据的变化，而不会影响 到树形结构，这样，当变化结束，对各级节点自顶而下一次性渲染相关树，能够 提高画布中各元素的定位计算速度，从而提高画布渲染效率。

下面结合图3a至图3e对本发明实施例的树状Canvas画布的布局处理方法 作进一步说明。

针对Tree类型的Canvas画布，假如对Canvas画布进行左右布局，如图3a 所示，Canvas画布的树形结构数据采用JSON格式，通过对该树形结构数据中各 级节点分别创建虚拟DOM对象，并获取到计算各个虚拟DOM对象的Width(宽 度)和Height(高度)，作为各级节点的虚拟宽度和虚拟高度补充到树形结构数据 中，如图3b所示的数据，在图3b中，第一矩形框内的Width和Height分别为 node 1的虚拟宽度和虚拟高度，第二矩形框内的Width和Height分别为node 2的 虚拟宽度和虚拟高度，然后调用内部代码对树形结构数据中各级节点从根节点开 始遍历，每增加一级子节点时，根据该级子节点的虚拟高度进行反向递归计算上 一级父节点的新的虚拟高度，直至递归计算出根节点的新的虚拟高度。假设树形结构数据中有三个层级节点，从根节点开始遍历，遍历到第二层级子节点时，其 上一级父节点为第一层级节点(即，根节点)，第一层级节点的新的虚拟高度等于 第二层级中两个子节点的虚拟高度之和，即VirtualHeight＝VirtualHeight1+ VirtualHeight2，如图3c所示。依次类推，当遍历新增第三层级子节点时，其上一 级父节点为第二层级节点，同样递归计算到第二层级中各个节点的新的虚拟高度， 并根据第二层级中各个节点的新的虚拟高度，递归计算第一层级节点的最新的虚 拟高度，如图3d所示。这样一层层递归下去之后，就会形成一个完整的树的每 一层级的虚拟高度，使得每一层级的虚拟高度都相等，然后将每个节点在自身最 新的虚拟高度内居中即可，如图3e所示，最后对层级节点之间加上连线，形成树 形画布布局的基础图形，如图3f所示。

实施例二

本发明实施例提供了一种树状Canvas画布的布局处理方法，该方法可以应 用于画布组件中，如图4所示，该方法可以包括步骤：

步骤S41，获取Canvas画布的布局参数和Canvas画布的树形结构数据。

具体地，该过程可以参照上述实施例一中的步骤S11，此处不再赘述。

步骤S42，对树形结构数据中各级节点分别创建虚拟DOM对象，并计算各 个虚拟DOM对象的宽度和高度，记录为各级节点的虚拟宽度和虚拟高度。

具体地，该过程可以参照上述实施例一中的步骤S12，此处不再赘述。

步骤S43，若布局参数指示对Canvas画布进行上下布局，则对各级节点从根 节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟宽度进行反向递归 计算上一级父节点的新的虚拟宽度，直至递归计算出根节点的新的虚拟宽度。

具体地，步骤S43的实现过程可以包括：

采用广度优先算法，对各级节点从根节点开始遍历，每增加一级子节点时， 分别对该级子节点中属于同一父节点的子节点的虚拟宽度进行求和，以递归计算 出上一级中各个父节点的新的虚拟宽度；根据上一级中各个父节点的新的虚拟宽 度进行反向递归，直至递归计算出根节点的新的虚拟宽度。

本实施例中，通过设定各级节点的虚拟宽度，并结合遍历各级节点，反向递 归计算的方式，使得每一层级的总宽度保持相等，由此能够节省计算时间，降低 计算复杂度。

步骤S44，根据各级节点的虚拟高度和各级节点的新的虚拟宽度，获取各级 节点的第二位置信息，并对各级节点分别创建真实DOM对象。

其中，根据各级节点的虚拟高度和各级节点的新的虚拟宽度，获取各级节点 的第二位置信息，可以包括：

根据各级节点的虚拟高度和预设的纵向间距，获得各级节点的纵坐标；分别 将各级节点分别设置在各级节点的新的虚拟宽度内的居中位置处，获得各级节点 的横坐标。

具体地，该过程可以参照实施例一中的步骤S14，此处不再赘述。

步骤S45，根据各级节点的第二位置信息，将各级节点对应的真实DOM对 象渲染到Canvas画布上。

具体地，该过程可以参照实施例一中的步骤S15，此处不再赘述。

本发明实施例提供了一种树状Canvas画布的布局处理方法，在对Canvas画 布进行渲染时，通过利用树形结构中的各层级节点之间的相互关系进行遍历并反 向递归计算，每一次节点的高度变化，仅改变树形结构数据的变化，而不会影响 到树形结构，这样，当变化结束，对各级节点自顶而下一次性渲染相关树，能够 提高画布中各元素的定位计算速度，从而提高画布渲染效率。

实施例三

本发明实施例提供了一种树状Canvas画布的布局处理装置，如图5所示， 该装置可以包括：

数据获取模块51，用于获取Canvas画布的布局参数和Canvas画布的树形结 构数据；

对象创建模块52，用于对树形结构数据中各级节点分别创建虚拟DOM对 象，并计算各个虚拟DOM对象的宽度和高度，记录为各级节点的虚拟宽度和虚 拟高度；

递归计算模块53，用于若布局参数指示对Canvas画布进行左右布局，则对 各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟高度 进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出根节点的新的 虚拟高度；

位置获取模块54，用于根据各级节点的虚拟宽度和各级节点的新的虚拟高 度，获取各级节点的第一位置信息，并对各级节点分别创建真实DOM对象；

画布渲染模块55，用于根据各级节点的第一位置信息，将各级节点对应的真 实DOM对象渲染到Canvas画布上。

进一步地，数据获取模块51具体用于：

获取用户通过预设的API接口输入的画布配置数据；

从画布配置数据中解析出布局参数和JSON格式数据；

将JSON格式数据转换成树形结构数据。

进一步地，递归计算模块53具体用于：

采用广度优先算法，对各级节点从根节点开始遍历，每增加一级子节点时， 分别对该级子节点中属于同一父节点的子节点的虚拟高度进行求和，以递归计算 出上一级中各个父节点的新的虚拟高度；

根据上一级中各个父节点的新的虚拟高度进行反向递归，直至递归计算出根 节点的新的虚拟高度。

进一步地，第一位置信息包括横坐标和纵坐标，位置获取模块54具体用于：

根据各级节点的虚拟宽度和预设的横向间距，获得各级节点的横坐标；

分别将各级节点分别设置在各级节点的新的虚拟高度内的居中位置处，获得 各级节点的纵坐标。

进一步地，递归计算模块53，还用于若布局参数指示对Canvas画布进行上 下布局，则对各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节 点的虚拟宽度进行反向递归计算上一级父节点的新的虚拟宽度，直至递归计算出 根节点的新的虚拟宽度；

位置获取模块54，还用于根据各级节点的虚拟高度和各级节点的新的虚拟宽 度，获取各级节点的第二位置信息，并对各级节点分别创建真实DOM对象；

画布渲染模块55，还用于根据各级节点的第二位置信息，将各级节点对应的 真实DOM对象渲染到Canvas画布上。

本发明实施例提供的树状Canvas画布的布局处理装置，与本发明实施例所 提供的树状Canvas画布的布局处理方法属于同一发明构思，可执行本发明实施 例所提供的树状Canvas画布的布局处理方法，具备执行树状Canvas画布的布局 处理方法相应的功能模块和有益效果。未在本实施例中详尽描述的技术细节，可 参见本发明实施例提供的树状Canvas画布的布局处理方法，此处不再加以赘述。

此外，本发明实施例还提供一种计算机设备，该计算机设备包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序；

当一个或多个程序被一个或多个处理器执行，使得一个或多个处理器实现如 上述实施例的树状Canvas画布的布局处理方法的步骤。

本发明另一实施例还提供一种计算机可读存储介质，其上存储有计算机程序， 程序被处理器执行时实现如上述实施例的树状Canvas画布的布局处理方法的步 骤。

本领域内的技术人员应明白，本发明实施例中的实施例可提供为方法、系统、 或计算机程序产品。因此，本发明实施例中可采用完全硬件实施例、完全软件实 施例、或结合软件和硬件方面的实施例的形式。而且，本发明实施例中可采用在 一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限 于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明实施例中是参照根据本发明实施例中实施例的方法、设备(系统)、和 计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现 流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和 /或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式 处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或 其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程 或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备 以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指 令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和 /或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得 在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从 而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或 多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本发明实施例中的优选实施例，但本领域内的技术人员一旦得 知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权 利要求意欲解释为包括优选实施例以及落入本发明实施例中范围的所有变更和 修改。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明 的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等 同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种树状Canvas画布的布局处理方法，其特征在于，所述方法包括：

获取Canvas画布的布局参数和所述Canvas画布的树形结构数据；

对所述树形结构数据中各级节点分别创建虚拟DOM对象，并计算各个所述虚拟DOM对象的宽度和高度，记录为所述各级节点的虚拟宽度和虚拟高度；

若所述布局参数指示对所述Canvas画布进行左右布局，则执行如下操作：

对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出所述根节点的新的虚拟高度；

根据所述各级节点的虚拟宽度和所述各级节点的新的虚拟高度，获取所述各级节点的第一位置信息，并对所述各级节点分别创建真实DOM对象；

根据所述各级节点的第一位置信息，将所述各级节点对应的真实DOM对象渲染到所述Canvas画布上。

2.根据权利要求1所述的方法，其特征在于，所述获取Canvas画布的布局参数和所述Canvas画布的树形结构数据，包括：

获取用户通过预设的API接口输入的画布配置数据；

从所述画布配置数据中解析出所述布局参数和JSON格式数据；

将所述JSON格式数据转换成所述树形结构数据。

3.根据权利要求1所述的方法，其特征在于，对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出所述根节点的新的虚拟高度，包括：

采用广度优先算法，对所述各级节点从根节点开始遍历，每增加一级子节点时，分别对该级子节点中属于同一父节点的子节点的虚拟高度进行求和，以递归计算出上一级中各个父节点的新的虚拟高度；

根据所述上一级中各个父节点的新的虚拟高度进行反向递归，直至递归计算出所述根节点的新的虚拟高度。

4.根据权利要求1所述的方法，其特征在于，所述第一位置信息包括横坐标和纵坐标，所述根据所述各级节点的虚拟宽度和所述各级节点的新的虚拟高度，获取所述各级节点的第一位置信息，包括：

根据所述各级节点的虚拟宽度和预设的横向间距，获得所述各级节点的横坐标；

分别将所述各级节点分别设置在所述各级节点的新的虚拟高度内的居中位置处，获得所述各级节点的纵坐标。

5.根据权利要求1至4任一所述的方法，其特征在于，所述方法还包括：

若所述布局参数指示对所述Canvas画布进行上下布局，则执行如下操作：

对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟宽度进行反向递归计算上一级父节点的新的虚拟宽度，直至递归计算出所述根节点的新的虚拟宽度；

根据所述各级节点的虚拟高度和所述各级节点的新的虚拟宽度，获取所述各级节点的第二位置信息，并对所述各级节点分别创建真实DOM对象；

根据所述各级节点的第二位置信息，将所述各级节点对应的真实DOM对象渲染到所述Canvas画布上。

6.一种树状Canvas画布的布局处理装置，其特征在于，所述装置包括：

数据获取模块，用于获取Canvas画布的布局参数和所述Canvas画布的树形结构数据；

对象创建模块，用于对所述树形结构数据中各级节点分别创建虚拟DOM对象，并计算各个所述虚拟DOM对象的宽度和高度，记录为所述各级节点的虚拟宽度和虚拟高度；

递归计算模块，用于若所述布局参数指示对所述Canvas画布进行左右布局，则对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟高度进行反向递归计算上一级父节点的新的虚拟高度，直至递归计算出所述根节点的新的虚拟高度；

位置获取模块，用于根据所述各级节点的虚拟宽度和所述各级节点的新的虚拟高度，获取所述各级节点的第一位置信息，并对所述各级节点分别创建真实DOM对象；

画布渲染模块，用于根据所述各级节点的第一位置信息，将所述各级节点对应的真实DOM对象渲染到所述Canvas画布上。

7.根据权利要求6所述的装置，其特征在于，所述数据获取模块具体用于：

获取用户通过预设的API接口输入的画布配置数据；

从所述画布配置数据中解析出所述布局参数和JSON格式数据；

将所述JSON格式数据转换成所述树形结构数据。

8.根据权利要求6所述的装置，其特征在于，所述递归计算模块具体用于：

采用广度优先算法，对所述各级节点从根节点开始遍历，每增加一级子节点时，分别对该级子节点中属于同一父节点的子节点的虚拟高度进行求和，以递归计算出上一级中各个父节点的新的虚拟高度；

根据所述上一级中各个父节点的新的虚拟高度进行反向递归，直至递归计算出所述根节点的新的虚拟高度。

9.根据权利要求6所述的装置，其特征在于，所述第一位置信息包括横坐标和纵坐标，所述位置获取模块具体用于：

根据所述各级节点的虚拟宽度和预设的横向间距，获得所述各级节点的横坐标；

分别将所述各级节点分别设置在所述各级节点的新的虚拟高度内的居中位置处，获得所述各级节点的纵坐标。

10.根据权利要求6至9任一所述的装置，其特征在于，

所述递归计算模块，还用于若所述布局参数指示对所述Canvas画布进行上下布局，则对所述各级节点从根节点开始遍历，每增加一级子节点时，根据该级子节点的虚拟宽度进行反向递归计算上一级父节点的新的虚拟宽度，直至递归计算出所述根节点的新的虚拟宽度；

所述位置获取模块，还用于根据所述各级节点的虚拟高度和所述各级节点的新的虚拟宽度，获取所述各级节点的第二位置信息，并对所述各级节点分别创建真实DOM对象；

所述画布渲染模块，还用于根据所述各级节点的第二位置信息，将所述各级节点对应的真实DOM对象渲染到所述Canvas画布上。

Images