组件可视化前端页面自动布局方法、系统、装置及介质与流程

本发明涉及自动布局，具体为组件可视化前端页面自动布局方法、系统、装置及介质。

背景技术：

1、在当今数字化时代，前端页面的复杂度与交互性持续提升，传统前端开发模式已难以满足快速迭代以及高度定制化的市场需求。尽管基于组件化的前端开发框架如react、vue 等在一定程度上提升了开发效率，但对于非专业开发人员而言，学习门槛依旧较高，且在面对复杂页面时，仍需投入大量时间去编写代码。

技术实现思路

1、鉴于上述存在的问题，提出了本发明。

2、因此，本发明解决的技术问题是：现有的组件布局方法存在需要逐个调整组件，耗时耗力等问题。

3、为解决上述技术问题，本发明提供如下技术方案：组件可视化前端页面自动布局方法，包括：

4、在可视化的前端界面中，捕获用户对组件的拖拽动作；

5、通过捕获的拖拽动作和组件的网格尺寸，计算网格在移动时覆盖的区域；

6、根据拖拽网格时选择的空间压缩策略，对页面布局进行自动调整。

7、作为本发明所述的组件可视化前端页面自动布局方法的一种优选方案，其中：所述组件包括，前端开发中用于构建用户界面的功能模块；

8、每个组件是一个独立的模块，通过在组件内部预设代码和资源，使其具有预设的功能；

9、通过集成高频业务组件，构建组件库；在所述组件库的构建过程中，利用组件注册页面，设置每个组件的默认宽度和高度，以及最小宽度和最小高度；

10、用户通过拖拽动作，从已注册的组件库中选取所需组件，并且以网格的形式直接应用到布局中。

11、作为本发明所述的组件可视化前端页面自动布局方法的一种优选方案，其中：所述计算网格在移动时覆盖的区域包括，在用户启动对网格的拖拽操作时，系统实时捕捉鼠标的当前位置；以鼠标的当前位置为中点，展开网格，并对移动过程中网格所覆盖的区域进行计算，得到当前的覆盖区域；

12、设鼠标在屏幕上的绝对坐标为(xm，ym)；

13、网格的宽为km，长为cm，在拖动网格前能够通过前端对尺寸进行设置；

14、所述当前的覆盖区域fg，通过横坐标的约束和纵坐标的约束，共同来描述区域；

15、所述横坐标的约束表示为：；

16、所述纵坐标的约束表示为：；

17、其中，表示当前的覆盖区域fg的横坐标区域，表示当前的覆盖区域fg的纵坐标区域。

18、作为本发明所述的组件可视化前端页面自动布局方法的一种优选方案，其中：通过边界检查机制，判断网格的边缘是否已超越画布设定的边界；

19、若判定超出边界，则立即终止当前拖拽操作，保持网格原位置不变，并结束此轮布局调整流程；在确认网格完全位于画布范围内后，系统根据预设的空间压缩策略进行判断；

20、所述边界检查机制包括，设画布左上角的绝对坐标为(xc，yc)；画布的尺寸：宽度wc和高度 hc；

21、当满足四种判定中的任意一项时，则判定为超越画布设定的边界；

22、所述四种判定包括：

23、覆盖区域fg中存在大于的横坐标；

24、覆盖区域fg中存在小于的横坐标；

25、覆盖区域fg中存在大于的纵坐标；

26、覆盖区域fg中存在小于的纵坐标。

27、作为本发明所述的组件可视化前端页面自动布局方法的一种优选方案，其中：所述空间压缩策略包括，在设置为不进行空间压缩的情况下，进入堆叠检测与位置调整流程；在无压缩模式下，逐一检查当前拖拽的网格与画布上其他已放置网格之间是否存在堆叠现象；若检测到的堆叠情况，则当前拖拽的网格为不可放置状态，不对当前位置进行更新；若未发现堆叠，则在确认放置后，更新网格位置，并结束此轮位置调整；

28、在启用了垂直空间压缩策略的情况下，通过堆叠检测，逐一检查当前拖拽的网格与画布上其他已放置网格之间是否存在堆叠现象；若未发现堆叠，则在确认放置后，更新网格位置，并结束此轮位置调整；若检测到的堆叠情况，则分析垂直方向上是否存在足够的空余空间以容纳拖拽网格；若存在足够空余空间，则通过对空余空间的压缩，实现页面布局的自动调整；若不存在足够空余空间，则通过对空余空间和垂直方向上网格的压缩，实现页面布局的自动调整；

29、所述堆叠检测包括，将当前拖拽的网格所覆盖的区域fg与逐一画布上其他已放置网格所覆盖的区域取交集，表示为：

30、,

31、其中，表示第i个已放置网格所覆盖的区域，i表示已放置网格的索引，，i为画布上其他已放置网格的数量，表示当前拖拽的网格所覆盖的区域与第i个已放置网格所覆盖的区域的相交部分；若为空集，则表示不存在堆叠；若不为空集，则表示存在堆叠。

32、作为本发明所述的组件可视化前端页面自动布局方法的一种优选方案，其中：所述分析垂直方向上是否存在足够的空余空间以容纳拖拽网格包括，当画布中的已放置网格排列为一列，则直接进行空余空间分析；当画布中的已放置网格排列不仅一列，则获取当前拖拽网格的左右边界，具体为：

33、左侧边界表示横坐标为所在的直线；右侧边界表示横坐标为所在的直线；其中，y表示任意纵坐标；

34、采集在左侧边界和右侧边界之间的所有已放置网格，若采集的所有已放置网格，均未超出所述左侧边界和所述右侧边界，且所述左侧边界和所述右侧边界之间的已放置网格排列为一列，则仅对所述左侧边界和所述右侧边界之间的已放置网格进行空余空间分析；

35、若采集的所有已放置网格，均未超出所述左侧边界和所述右侧边界，但所述左侧边界和所述右侧边界之间的已放置网格排列不仅一列，则仅对所述左侧边界和所述右侧边界之间的已放置网格进行全局垂直空间分析；

36、若采集的所有已放置网格，存在超出所述左侧边界或所述右侧边界，则在左侧超出边界时，将所述左侧边界向左拓展，直至左侧不存在超出边界的已放置网格；在右侧超出边界时，将所述右侧边界向左拓展，直至右侧不存在超出边界的已放置网格；

37、完成边界的拓展后，更新所述左侧边界和所述右侧边界，重新判断所述左侧边界和所述右侧边界之间的已放置网格排列是否仅为一列，当仅为一列时，对所述左侧边界和所述右侧边界之间的已放置网格进行空余空间分析；当不仅一列时，对所述左侧边界和所述右侧边界之间的已放置网格进行全局垂直空间分析；

38、所述空余空间分析包括，计算每两个网格之间的间隙，进行累加后得到间隙之和；

39、,

40、其中，表示画布的上边界与最上方网格之间的距离；画布的下边界与最下方网格之间的距离；表示第j-1个与第j个网格之间的间隙；j表示所述左侧边界和所述右侧边界之间的网格数量；表示间隙合，若，则判定存在足够的空余空间以容纳拖拽网格；若，则判定不存在足够的空余空间以容纳拖拽网格；

41、所述全局垂直空间分析包括，从画布顶端开始，对可调节间隙进行累计：

42、,

43、其中，kx表示可调节间隙的累计结果，若，则判定存在足够的空余空间以容纳拖拽网格；若，则判定不存在足够的空余空间以容纳拖拽网格；表示识别函数，在所述左侧边界和所述右侧边界之间，若输入的y值所在直线未穿过已放置网格，则；若输入的y值所在直线穿过任一已放置网格，则。

44、作为本发明所述的组件可视化前端页面自动布局方法的一种优选方案，其中：所述自动调整包括，通过识别函数，在所述左侧边界和所述右侧边界之间识别的部分，记录每个连续的间隙部分长度，按照顺序记为：；其中，表示第q个连续的间隙部分长度，q为连续的间隙部分数量；

45、以鼠标在屏幕上的纵坐标ym所在直线为分界线；

46、在存在足够空余空间的情况下，当分界线穿过已放置网格时，当前拖拽的网格为不可放置状态，不对当前位置进行更新；当分界线未穿过已放置网格时，对分界线所在连续的间隙部分长度进行放大，同时对之前的，以及之后的分别进行压缩，分界线两侧的压缩比例分别从一开始的100%按照0.01%的压缩步长逐渐减小，直到不存在堆叠且时，停止减小压缩比例；

47、其中，表示当前拖拽的网格上下边缘所在直线与已放置网格边缘所在直线的最短垂直距离；表示在当前压缩状态下，连续的间隙部分长度的最小值；

48、在不存在足够空余空间的情况下，当分界线穿过已放置网格时，当前拖拽的网格为不可放置状态，不对当前位置进行更新；当分界线未穿过已放置网格时，对分界线所在连续的间隙部分长度进行放大，同时将以及全部压缩为0，压缩完成后，对已放置网格的固有尺寸进行压缩，分界线两侧的压缩比例分别从一开始的100%按照0.01%的压缩步长逐渐减小，直到不存在堆叠时，停止减小压缩比例；

49、在压缩过程中，允许鼠标拖动网格，并根据更后的鼠标位置继续压缩。

50、一种采用如本发明所述方法的组件可视化前端页面自动布局系统，包括：

51、采集单元，在可视化的前端界面中，捕获用户对组件的拖拽动作；

52、计算单元，通过捕获的拖拽动作和组件的网格尺寸，计算网格在移动时覆盖的区域；

53、调节单元，根据拖拽网格时选择的空间压缩策略，对页面布局进行自动调整。

54、一种计算机设备，包括：存储器和处理器；所述存储器存储有计算机程序，其中：所述处理器执行所述计算机程序时实现本发明中任一项所述的方法的步骤。

55、一种计算机可读存储介质，其上存储有计算机程序，其中：所述计算机程序被处理器执行时实现本发明中任一项所述的方法的步骤。

56、本发明的有益效果：本发明提供的组件可视化前端页面自动布局方法，借助可视化拖拽引擎，即使是非专业开发人员也能快速生成前端页面布局，显著降低了前端开发的门槛。无需编写大量代码，有效缩短了开发周期并降低了成本，极大地提高了开发效率。