元素布局方法以及相关设备与流程

本技术涉及计算机，尤其涉及一种元素布局方法、系统以及计算机集群、计算机可读存储介质、计算机程序产品。

背景技术：

1、在日常工作或生活中，常常需要通过屏幕，例如是大尺寸屏幕(也可以简称为大屏)进行内容演示，以提高沟通效率。其中，屏幕演示的内容通常由元素提供。元素是指表达一定含义的组件，例如元素可以包括文本、图表等不同类型的组件。

2、随着用户对元素的添加与修改，屏幕中元素的布局需要随之发生相应的改变。也即在可视化屏幕的整个设计过程中，需要不断地调整元素的布局。元素组合方式的多样性，以及布局目标的复杂性，如各元素之间相互对齐、元素填充等给屏幕中元素的布局带来了巨大的挑战。

3、业界提供了基于模板和动态编程自动进行元素布局的方法。该方法提供了多种布局模板，当用户输入元素时，可以基于动态编程自动匹配相应的布局模板，从而实现元素布局。然而，上述方法主要适用于文本类型的元素，图表等类型的元素的格式更加自由，难以匹配布局模板，进而导致基于模板和动态编程的布局效果不佳。

技术实现思路

1、本技术提供了一种元素布局方法，该方法将元素布局问题转化为线性规划问题，针对输入的一组元素，采用迭代优化的方式确定元素的推荐位置和推荐尺寸，从而实现智能化的元素布局。由于不需与固定的布局模板进行匹配，解决了对图表等类型的元素不适用，导致布局效果不佳的问题。本技术还提供了上述方法对应的元素布局系统、计算机集群、计算机可读存储介质以及计算机程序产品。

2、第一方面，本技术提供了一种元素布局方法。该方法可以由元素布局系统执行。在一些实施例中，该元素布局系统可以是软件系统，计算机集群通过运行该软件系统的程序代码，以执行元素布局方法。在另一些实施例中，该元素布局系统也可以是用于元素布局的硬件系统。

3、具体地，元素布局系统可以接收用户输入的多个元素，确定所述多个元素在画布的初始尺寸和初始位置，然后以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得所述多个元素在所述画布的推荐尺寸和推荐位置，由此实现智能化的元素布局。

4、在该方法中，元素布局系统通过将元素布局问题转换为线性规划问题，针对输入的一组元素(通常是多个元素)，采用迭代优化的方式求解每个元素的推荐位置和推荐尺寸，使得每个元素不与其他元素重叠，并且不溢出画布。由于不与固定的布局模板进行匹配，因而解决了相关技术中对于图表等类型的元素不适用，布局效果不佳的问题，具有较高可用性。而且，该方法通过设置必要的布局属性如元素的上、下、左、右边缘的位置等，并以用户输入元素的初始尺寸、初始位置等为起点进行迭代优化，实现了基于用户意图进行驱动，提升了交互性，减少了设计者的工作量。此外，该方法采用固定尺寸画布代替像素离散化的画布，由此可以实现采用连续决策变量代替大量的离散决策变量，在连续决策变量所提供的连续空间进行迭代优化，可以大幅降低计算量，降低算法复杂度，缩短智能布局的时间，提高智能布局的效率。

5、在一些可能的实现方式中，元素布局系统对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局。所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置。然后元素布局系统对多个候选布局进行排序，获得布局结果。该布局结果为所述多个候选布局中排序靠前的候选布局，例如布局结果可以是多个候选布局中排名第一的候选布局。

6、该方法中，元素布局系统通过对多个候选布局进行排序，根据排序结果从多个候选结果中确定布局结果，如此进一步提升了布局效果，满足了业务需求。

7、在一些可能的实现方式中，元素布局系统可以根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。如此，可以从元素的尺寸的均衡度、元素在画布呈现的画面的均衡度以及元素的对齐程度等维度中的至少一个维度对布局效果进行排序，从而确定元素的尺寸的均衡度、元素在画布呈现的画面的均衡度和/或元素的对齐程度满足要求的布局结果。

8、在一些可能的实现方式中，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征。其中，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。如此可以实现对具有较高重要性的元素按照权重进行布局，使得较高重要性的元素处于视觉焦点，满足业务需求。

9、在一些可能的实现方式中，设计约束不仅可以包括系统内置的基础约束，还可以包括自定义约束。元素布局系统除了基于系统内置的基础约束，对元素的尺寸和位置进行迭代优化，还可以接收用户输入的自定义约束，并结合该自定义约束，对元素的尺寸和位置进行迭代优化。如此可以实现基于用户意图的智能元素布局。

10、在一些可能的实现方式中，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种。所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。

11、对齐约束具体用于保证元素对齐，网格约束用于保证画布区域的合理划分，防止元素重叠，大小约束用于保证元素的大小(即尺寸)合理，以满足人眼对于图表等元素的可读性的要求，边界约束用于保证输入的元素充满画布，填充约束用于保证布局内部充满，避免布局内部空缺使得整体的空间失去连续感，进而在一定程度上影响布局的美观度。

12、锁定约束用于对一个或多个元素进行尺寸和位置的锁定。综横比约束用于对一个或多个元素的缩放比进行约束。对齐偏好约束用于对一个或多个元素进行置顶、置左、置右或者置下约束。

13、通过在上述约束下，对元素的尺寸和位置进行迭代优化，可以使得最终的布局结果具有较好的布局效果，能够满足业务需求。

14、在一些可能的实现方式中，所述元素包括图表、文本或装饰中的一种或多种。其中，装饰例如可以是指图表、文本的标题、背景等。在该方法中，元素布局系统可以实现对图表、文本、装饰等不同类型的元素进行智能元素布局，具有较高可用性。

15、在一些可能的实现方式中，元素布局系统可以向用户呈现设计界面，该设计界面承载有可视化组件，用户可以触发对所述可视化组件的拖拽操作，元素布局系统响应于用户的上述操作，接收与可视化组件对应的多个元素。

16、通过上述可视化组件，简化用户操作，提高元素布局的效率。而且，通过将可视化组件拖拽至设计界面，可以保障元素布局过程的透明度，便于用户手动调整元素的布局，满足用户精细化的布局要求。

17、在一些可能的实现方式中，元素布局系统可以设置智能元素布局的触发条件。例如触发条件可以设置为用户触发智能布局控件，或者是距离用户上次输入元素的视觉大于预设时间。基于此，当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，智能元素布局的触发条件被满足，元素布局系统可以以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。

18、该方法通过设置智能元素布局的触发条件，并在智能元素布局的触发条件被满足时，自动触发智能元素布局，进一步减少了用户操作，提高了元素布局的效率，提升了用户体验。

19、第二方面，本技术提供了一种元素布局系统。所述系统包括：

20、交互模块，用于接收用户输入的多个元素；

21、确定模块，用于确定所述多个元素在画布的初始尺寸和初始位置；

22、优化模块，用于以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果，所述布局结果包括所述多个元素在所述画布的推荐尺寸和推荐位置。

23、在一些可能的实现方式中，所述优化模块具体用于：

24、对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局，所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置；

25、对所述多个候选布局进行排序，获得布局结果，所述布局结果为所述多个候选布局中排序靠前的候选布局。

26、在一些可能的实现方式中，所述优化模块具体用于：

27、根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。

28、在一些可能的实现方式中，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。

29、在一些可能的实现方式中，所述交互模块还用于：

30、接收用户输入的自定义约束；

31、所述设计约束包括基础约束和所述自定义约束。

32、在一些可能的实现方式中，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种，所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。

33、在一些可能的实现方式中，所述元素包括图表、文本或装饰中的一种或多种。

34、在一些可能的实现方式中，所述交互模块具体用于：

35、向用户呈现设计界面，所述设计界面承载有可视化组件；

36、响应于用户对所述可视化组件的拖拽操作，接收与所述可视化组件对应的多个元素。

37、在一些可能的实现方式中，所述优化模块具体用于：

38、当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。

39、第三方面，本技术提供一种计算机集群。该计算机集群包括至少一台计算机，至少一台计算机包括至少一个处理器和至少一个存储器。所述至少一个处理器、所述至少一个存储器进行相互的通信。所述至少一个处理器用于执行所述至少一个存储器中存储的指令，以使得计算机集群执行如第一方面或第一方面的任一种实现方式中的元素布局方法。

40、第四方面，本技术提供一种计算机可读存储介质。所述计算机可读存储介质中存储有指令，所述指令指示计算机集群执行上述第一方面或第一方面的任一种实现方式所述的元素布局方法。

41、第五方面，本技术提供了一种包含指令的计算机程序产品，当其在计算机集群上运行时，使得计算机集群执行上述第一方面或第一方面的任一种实现方式所述的元素布局方法。

42、本技术在上述各方面提供的实现方式的基础上，还可以进行进一步组合以提供更多实现方式。