[发明专利]一种结合绝对定位和流式定位的画布定位方法

说明书

本发明涉及一种结合绝对定位和流式定位的画布定位方法，包括以下步骤：将应用设计器的画布设置为绝对定位position：absolute；在画布中开辟一个区域专门作为流式布局空间，并通过应用设计器内置的容器组件关联流式片段；通过在绝对画布中拖拽容器组件到指定区域，并通过容器组件对指定的流式片段进行载入渲染。本发明实现了绝对定位和流式布局两种方式兼容使用，能有效提高应用设计的效率。

技术领域

本发明涉及计算机技术领域，具体涉及一种结合绝对定位和流式定位的画布定位方法。

背景技术

应用设计器是物联网云平台中帮助用户快速开发应用的工具,实现设备数据可视化。而现有的应用设计器页面设计时，对画布的定位方式一般采用以下两种实现方案：1.是绝对定位，支持用户拖拽控件到任意位置； 2.是流式布局，支持用户拖拽控件依照流式布局方式进行排列；

这两种方式，均存在局限，采用绝对定位时，当有业务判断需要隐藏某个组件时，布局不会重新计算，会出现隐藏的组件区域空白，同时也无法满足根据内容自适应撑开组件高度；而采用流式布局则无法支持用户任意摆放元素到任意位置，使用较为复杂，需要有布局设计能力。

发明内容

有鉴于此，本发明的目的在于提供一种结合绝对定位和流式定位的画布定位方法，实现绝对定位和流式布局两种方式兼容使用，能有效提高应用设计的效率。

为实现上述目的，本发明采用如下技术方案：

一种结合绝对定位和流式定位的画布定位方法，包括以下步骤：

将应用设计器的画布设置为绝对定位position：absolute；

在画布中开辟一个区域专门作为流式布局空间，并通过应用设计器内置的容器组件关联流式片段；

通过在绝对画布中拖拽容器组件到指定区域，并通过容器组件对指定的流式片段进行载入渲染。

进一步的，所述画布设置父节点为position: relative,子节点设置为position:absolute。

进一步的，所述流式布局空间通过采用element-plus布局容器组件来实现页面的流式布局，具体如下：

通过el-row将页面一行分成24份来渲染，在el-row下嵌套了el-col 通过设置el-colspan 属性将元素按照比例来渲染；

在容器组件中，将容器组件父节点设置position：absolute作为绝对定位进行对容器组件任意位置的拖拽，将其子节点采用el-row组件进行渲染，然后通过指定的片段配置项，将片段内的控件信息用el-col标签渲染到的el-row标签下。

进一步的，遍历读取当前应用的所有的片段信息并以树形式展示给用户选择，用户通过选择完对应的片段，将片段的配置信息进行读取，并通过容器组件按照片段的类型对片段内容进行渲染。

一种结合绝对定位和流式定位的画布定位系统，包括处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如下操作：

将应用设计器的画布设置为绝对定位position：absolute；

在画布中开辟一个区域专门作为流式布局空间，并通过应用设计器内置的容器组件关联流式片段；

通过在绝对画布中拖拽容器组件到指定区域，并通过容器组件对指定的流式片段进行载入渲染。

一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如上所述的方法步骤。

本发明与现有技术相比具有以下有益效果：