CN116206012A - 元素布局方法以及相关设备 - Google Patents
元素布局方法以及相关设备 Download PDFInfo
- Publication number
- CN116206012A CN116206012A CN202111447457.3A CN202111447457A CN116206012A CN 116206012 A CN116206012 A CN 116206012A CN 202111447457 A CN202111447457 A CN 202111447457A CN 116206012 A CN116206012 A CN 116206012A
- Authority
- CN
- China
- Prior art keywords
- elements
- canvas
- layout
- constraints
- size
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 97
- 238000013461 design Methods 0.000 claims abstract description 54
- 238000005457 optimization Methods 0.000 claims abstract description 43
- 238000012800 visualization Methods 0.000 claims description 39
- 230000003993 interaction Effects 0.000 claims description 15
- 238000005034 decoration Methods 0.000 claims description 14
- 238000003860 storage Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 7
- 230000004044 response Effects 0.000 claims description 7
- 230000001960 triggered effect Effects 0.000 claims description 5
- 238000012163 sequencing technique Methods 0.000 claims description 4
- 230000000694 effects Effects 0.000 abstract description 17
- 238000004891 communication Methods 0.000 description 10
- 238000010586 diagram Methods 0.000 description 10
- 230000006870 function Effects 0.000 description 8
- 230000000007 visual effect Effects 0.000 description 7
- 238000012360 testing method Methods 0.000 description 6
- 238000009826 distribution Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000004458 analytical method Methods 0.000 description 3
- 238000004422 calculation algorithm Methods 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 3
- 238000012545 processing Methods 0.000 description 3
- 239000007787 solid Substances 0.000 description 3
- 238000013459 approach Methods 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 2
- 238000002474 experimental method Methods 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000004904 shortening Methods 0.000 description 2
- 238000012795 verification Methods 0.000 description 2
- 101100153581 Bacillus anthracis topX gene Proteins 0.000 description 1
- 101150041570 TOP1 gene Proteins 0.000 description 1
- 238000003556 assay Methods 0.000 description 1
- 230000001186 cumulative effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000000802 evaporation-induced self-assembly Methods 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000012552 review Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000000528 statistical test Methods 0.000 description 1
- 238000012418 validation experiment Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F17/00—Digital computing or data processing equipment or methods, specially adapted for specific functions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Mathematical Physics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提供了一种元素布局方法，包括：接收用户输入的多个元素，确定多个元素在画布的初始尺寸和初始位置，以多个元素在画布的初始尺寸和初始位置为起点，结合画布的尺寸以及设计约束，对多个元素在画布的尺寸和位置进行迭代优化，获得布局结果，该布局结果包括多个元素在画布的推荐尺寸和推荐位置。该方法将元素布局问题转化为线性规划问题，针对输入的一组元素，采用迭代优化的方式确定元素的推荐位置和推荐尺寸，从而实现智能化的元素布局。该方法对图表等类型的元素也适用，对图表等元素进行布局也具有较好的布局效果，因而具有较高可用性。
Description
技术领域
本申请涉及计算机技术领域，尤其涉及一种元素布局方法、系统以及计算机集群、计算机可读存储介质、计算机程序产品。
背景技术
在日常工作或生活中，常常需要通过屏幕，例如是大尺寸屏幕(也可以简称为大屏)进行内容演示，以提高沟通效率。其中，屏幕演示的内容通常由元素提供。元素是指表达一定含义的组件，例如元素可以包括文本、图表等不同类型的组件。
随着用户对元素的添加与修改，屏幕中元素的布局需要随之发生相应的改变。也即在可视化屏幕的整个设计过程中，需要不断地调整元素的布局。元素组合方式的多样性，以及布局目标的复杂性，如各元素之间相互对齐、元素填充等给屏幕中元素的布局带来了巨大的挑战。
业界提供了基于模板和动态编程自动进行元素布局的方法。该方法提供了多种布局模板，当用户输入元素时，可以基于动态编程自动匹配相应的布局模板，从而实现元素布局。然而，上述方法主要适用于文本类型的元素，图表等类型的元素的格式更加自由，难以匹配布局模板，进而导致基于模板和动态编程的布局效果不佳。
发明内容
本申请提供了一种元素布局方法，该方法将元素布局问题转化为线性规划问题，针对输入的一组元素，采用迭代优化的方式确定元素的推荐位置和推荐尺寸，从而实现智能化的元素布局。由于不需与固定的布局模板进行匹配，解决了对图表等类型的元素不适用，导致布局效果不佳的问题。本申请还提供了上述方法对应的元素布局系统、计算机集群、计算机可读存储介质以及计算机程序产品。
第一方面，本申请提供了一种元素布局方法。该方法可以由元素布局系统执行。在一些实施例中，该元素布局系统可以是软件系统，计算机集群通过运行该软件系统的程序代码，以执行元素布局方法。在另一些实施例中，该元素布局系统也可以是用于元素布局的硬件系统。
具体地，元素布局系统可以接收用户输入的多个元素，确定所述多个元素在画布的初始尺寸和初始位置，然后以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得所述多个元素在所述画布的推荐尺寸和推荐位置，由此实现智能化的元素布局。
在该方法中，元素布局系统通过将元素布局问题转换为线性规划问题，针对输入的一组元素(通常是多个元素)，采用迭代优化的方式求解每个元素的推荐位置和推荐尺寸，使得每个元素不与其他元素重叠，并且不溢出画布。由于不与固定的布局模板进行匹配，因而解决了相关技术中对于图表等类型的元素不适用，布局效果不佳的问题，具有较高可用性。而且，该方法通过设置必要的布局属性如元素的上、下、左、右边缘的位置等，并以用户输入元素的初始尺寸、初始位置等为起点进行迭代优化，实现了基于用户意图进行驱动，提升了交互性，减少了设计者的工作量。此外，该方法采用固定尺寸画布代替像素离散化的画布，由此可以实现采用连续决策变量代替大量的离散决策变量，在连续决策变量所提供的连续空间进行迭代优化，可以大幅降低计算量，降低算法复杂度，缩短智能布局的时间，提高智能布局的效率。
在一些可能的实现方式中，元素布局系统对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局。所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置。然后元素布局系统对多个候选布局进行排序，获得布局结果。该布局结果为所述多个候选布局中排序靠前的候选布局，例如布局结果可以是多个候选布局中排名第一的候选布局。
该方法中，元素布局系统通过对多个候选布局进行排序，根据排序结果从多个候选结果中确定布局结果，如此进一步提升了布局效果，满足了业务需求。
在一些可能的实现方式中，元素布局系统可以根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。如此，可以从元素的尺寸的均衡度、元素在画布呈现的画面的均衡度以及元素的对齐程度等维度中的至少一个维度对布局效果进行排序，从而确定元素的尺寸的均衡度、元素在画布呈现的画面的均衡度和/或元素的对齐程度满足要求的布局结果。
在一些可能的实现方式中，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征。其中，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。如此可以实现对具有较高重要性的元素按照权重进行布局，使得较高重要性的元素处于视觉焦点，满足业务需求。
在一些可能的实现方式中，设计约束不仅可以包括系统内置的基础约束，还可以包括自定义约束。元素布局系统除了基于系统内置的基础约束，对元素的尺寸和位置进行迭代优化，还可以接收用户输入的自定义约束，并结合该自定义约束，对元素的尺寸和位置进行迭代优化。如此可以实现基于用户意图的智能元素布局。
在一些可能的实现方式中，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种。所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。
对齐约束具体用于保证元素对齐，网格约束用于保证画布区域的合理划分，防止元素重叠，大小约束用于保证元素的大小(即尺寸)合理，以满足人眼对于图表等元素的可读性的要求，边界约束用于保证输入的元素充满画布，填充约束用于保证布局内部充满，避免布局内部空缺使得整体的空间失去连续感，进而在一定程度上影响布局的美观度。
锁定约束用于对一个或多个元素进行尺寸和位置的锁定。综横比约束用于对一个或多个元素的缩放比进行约束。对齐偏好约束用于对一个或多个元素进行置顶、置左、置右或者置下约束。
通过在上述约束下，对元素的尺寸和位置进行迭代优化，可以使得最终的布局结果具有较好的布局效果，能够满足业务需求。
在一些可能的实现方式中，所述元素包括图表、文本或装饰中的一种或多种。其中，装饰例如可以是指图表、文本的标题、背景等。在该方法中，元素布局系统可以实现对图表、文本、装饰等不同类型的元素进行智能元素布局，具有较高可用性。
在一些可能的实现方式中，元素布局系统可以向用户呈现设计界面，该设计界面承载有可视化组件，用户可以触发对所述可视化组件的拖拽操作，元素布局系统响应于用户的上述操作，接收与可视化组件对应的多个元素。
通过上述可视化组件，简化用户操作，提高元素布局的效率。而且，通过将可视化组件拖拽至设计界面，可以保障元素布局过程的透明度，便于用户手动调整元素的布局，满足用户精细化的布局要求。
在一些可能的实现方式中，元素布局系统可以设置智能元素布局的触发条件。例如触发条件可以设置为用户触发智能布局控件，或者是距离用户上次输入元素的视觉大于预设时间。基于此，当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，智能元素布局的触发条件被满足，元素布局系统可以以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。
该方法通过设置智能元素布局的触发条件，并在智能元素布局的触发条件被满足时，自动触发智能元素布局，进一步减少了用户操作，提高了元素布局的效率，提升了用户体验。
第二方面，本申请提供了一种元素布局系统。所述系统包括：
交互模块，用于接收用户输入的多个元素；
确定模块，用于确定所述多个元素在画布的初始尺寸和初始位置；
优化模块，用于以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果，所述布局结果包括所述多个元素在所述画布的推荐尺寸和推荐位置。
在一些可能的实现方式中，所述优化模块具体用于：
对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局，所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置；
对所述多个候选布局进行排序，获得布局结果，所述布局结果为所述多个候选布局中排序靠前的候选布局。
在一些可能的实现方式中，所述优化模块具体用于：
根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。
在一些可能的实现方式中，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。
在一些可能的实现方式中，所述交互模块还用于：
接收用户输入的自定义约束；
所述设计约束包括基础约束和所述自定义约束。
在一些可能的实现方式中，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种，所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。
在一些可能的实现方式中，所述元素包括图表、文本或装饰中的一种或多种。
在一些可能的实现方式中，所述交互模块具体用于：
向用户呈现设计界面，所述设计界面承载有可视化组件；
响应于用户对所述可视化组件的拖拽操作，接收与所述可视化组件对应的多个元素。
在一些可能的实现方式中，所述优化模块具体用于：
当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。
第三方面，本申请提供一种计算机集群。该计算机集群包括至少一台计算机，至少一台计算机包括至少一个处理器和至少一个存储器。所述至少一个处理器、所述至少一个存储器进行相互的通信。所述至少一个处理器用于执行所述至少一个存储器中存储的指令，以使得计算机集群执行如第一方面或第一方面的任一种实现方式中的元素布局方法。
第四方面，本申请提供一种计算机可读存储介质。所述计算机可读存储介质中存储有指令，所述指令指示计算机集群执行上述第一方面或第一方面的任一种实现方式所述的元素布局方法。
第五方面，本申请提供了一种包含指令的计算机程序产品，当其在计算机集群上运行时，使得计算机集群执行上述第一方面或第一方面的任一种实现方式所述的元素布局方法。
本申请在上述各方面提供的实现方式的基础上，还可以进行进一步组合以提供更多实现方式。
附图说明
为了更清楚地说明本申请实施例的技术方法，下面将对实施例中所需使用的附图作以简单地介绍。
图1A至图1D为本申请实施例提供的元素布局方法的应用场景图；
图2为本申请实施例提供的一种元素布局方法的系统架构图；
图3为本申请实施例提供的一种元素布局方法的流程图；
图4A至图4H为本申请实施例提供的设计约束的示意图；
图5为本申请实施例提供的一种元素布局方法的原理图；
图6A至图6C为本申请实施例提供的一种不同布局打分的示意图；
图7为本申请实施例提供的一种计算机集群的结构示意图。
具体实施方式
本申请实施例中的术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。
首先对本申请实施例中所涉及到的一些技术术语进行介绍。
元素布局是指设置元素在屏幕(例如是屏幕应用的画布)的尺寸和位置。其中，屏幕或者画布的尺寸通常是固定的，元素的尺寸和位置是可调整的。基于此，元素布局的过程通常是不断调整元素在屏幕或画布的尺寸和位置，以优化演示效果的过程。
元素是指表达一定含义的组件。其中，元素可以多种类型，例如元素可以包括文本、图表、装饰等不同类型。其中，文本可以包括正文或标题(正文的标题或者图表的标题)等，图表可以包括柱状图、折线图、饼图或者图案，装饰可以包括用于突出或美化文本、图表的形状、符号或者背景。
基于模板和动态编程可以实现自动化的元素布局。具体地，元素布局应用可以提供多种布局模板，当用户输入多个元素时，元素布局应用可以基于动态编程自动匹配与多个元素适配的布局模板，并向用户提供与多个元素匹配的布局模板，以供用户选择，从而实现元素布局。然而，上述方法主要适用于文本类型的元素，图表等类型的元素的格式更加自由，难以匹配布局模板，进而导致基于模板和动态编程的布局效果不佳。
有鉴于此，本申请实施例提供了一种元素布局方法。该方法可以由元素布局系统执行。在一些实施例中，该元素布局系统可以是软件系统，计算机集群通过运行该软件系统的程序代码，以执行元素布局方法。在另一些实施例中，该元素布局系统也可以是用于元素布局的硬件系统。本申请实施例以元素布局系统为软件系统进行示例说明。
其中，元素布局问题可以定义为：对于一组需要放置在具有指定宽度和高度的固定尺寸画布上的元素(例如是矩形元素)，找到可行的解决方案，使得所有元素不重叠并且不溢出画布。该方法可以将元素布局问题转换为线性规划问题。该线性规划问题具体为：针对输入的一组元素(通常是多个元素)，求解每个元素的推荐位置和推荐尺寸，使得每个元素不与其他元素重叠，并且不溢出画布。
具体实现时，元素布局系统可以接收用户输入的多个元素，确定所述多个元素在画布的初始尺寸和初始位置，然后以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得所述多个元素在所述画布的推荐尺寸和推荐位置，由此实现智能化的元素布局。
由于该方法是采用迭代优化的方式确定推荐尺寸和推荐位置，而不是与固定的布局模板进行匹配，因而解决了相关技术中对于图表等类型的元素不适用，布局效果不佳的问题，具有较高可用性。而且，该方法通过设置必要的布局属性如元素的上、下、左、右边缘的位置等，并以用户输入元素的初始尺寸、初始位置等为起点进行迭代优化，实现了基于用户意图进行驱动，提升了交互性，减少了设计者的工作量。此外，该方法采用固定尺寸画布代替像素离散化的画布，由此可以实现采用连续决策变量代替大量的离散决策变量，在连续决策变量所提供的连续空间进行迭代优化，可以大幅降低计算量，降低算法复杂度，缩短智能布局的时间，提高智能布局的效率。
本申请实施例的元素布局方法可以适应于多种场景。例如，该元素布局方法可以适用于安全态势感知场景，如图1A所示，元素布局系统可以对访问区域排行柱状图、访问区域地图、访问趋势折线图以及攻击区域排行柱状图、攻击趋势折线图、攻击类型排行表等元素进行智能布局，实现从微观到宏观的全面安全态势感知，为安全事件处置提供决策依据。又例如，该元素布局方法可以适用于贸易分析场景，如图1B所示，元素布局系统可以对销售额统计图、货品出口全球数量分布图、全球销售额排名表、销售情况表、全球港口分布地图等元素进行智能布局，实现全球经济贸易分析。
在一些可能的实现方式中，该元素布局方法还可以用于企业经营管理场景。通过接入企业经营数据，可以对企业的生产情况、产品质量情况和/或产品的销售情况进行呈现，为企业管理者提供可视化的决策依据。例如，元素布局方法可以用于对驾驶舱销售情况进行分析，参见图1C，元素布局系统可以对保费地区排名柱形图、热门保单柱形图、年度保费柱形图以及折线图、新旧客户对比图、实时交易表、年度累计总保费等元素进行智能布局，从而实现驾驶舱销售情况分析。又例如，元素布局方法可以用于对房产项目销售情况进行分析，如图1D所示，元素布局系统可以对年度计划图、销售金额统计柱形图、销售回款趋势图、营业收入情况柱形图、投资与盈利情况柱形图、库存情况折线图、项目价值指标图、库存指标柱形图、常规项目指标图等元素进行智能布局，从而实现房产项目销售情况分析。
上述元素布局方法具体可以以数据可视化服务(data lake visualization，DLV)的方式提供给用户使用。其中，DLV可以是云服务。DLV可以提供一站式的数据可视化平台，例如是上述元素布局系统，该系统能够适配云上或云下多种数据源，并提供丰富多样的二维(2dimension，2D)或三维(3dimension，3D)可视化组件，用户可以拖拽上述可视化组件进行自由布局，从而实现屏幕展示内容的高效定制。
为了使得本申请的技术方案更加清楚、易于理解，下面结合附图，对本申请实施例的系统架构进行介绍。
参见图2所示的元素布局方法的系统架构图，终端10、终端30分别与云环境20连接。其中，终端10为用于设计终端30演示内容的用户终端，例如可以是台式机、笔记本电脑、平板电脑等，终端30为用于演示内容的设备，通常配置有大屏。云环境20指示云服务提供商拥有的，用于提供计算、存储、通信资源的中心计算集群。中心计算集群是由一个或多个中心计算设备(例如是中心服务器)形成的计算机集群。
元素布局系统200可以部署在云环境20上的一台或多台计算机。如图2所示，元素布局系统200包括交互模块202、确定模块204和优化模块206等多个模块，上述多个模块可以集中部署在云环境20的一个计算机，也可以分布式地部署在云环境20上的不同计算机。
终端10部署有客户端(图2中未示出)。该客户端可以是具有元素布局功能的通用客户端，例如是浏览器，也可以是专用于元素布局的专用客户端。客户端可以与元素布局系统200连接，以加载元素布局系统200中交互模块202的交互逻辑，如此，客户端可以向用户呈现设计界面。其中，设计界面可以是图形用户界面(graphical user interface，GUI)。用户可以通过上述设计界面进行交互，以实现元素布局。
具体地，设计界面承载有可视化组件，该可视化组件可以包括柱形图、趋势图、地图、统计表等不同类型，用户可以通过设计界面触发对可视化组件的拖拽操作，客户端响应于上述操作，将相应的事件上报至元素布局系统200。
元素布局系统200的交互模块202可以接收上述事件，从而获得与可视化组件对应的多个元素。其中，多个元素由基于用户拖拽的组件以及接入的数据源确定。然后元素布局系统200的确定模块204确定多个元素在画布的初始尺寸和初始位置，元素布局系统200的优化模块206以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得所述多个元素在所述画布的推荐尺寸和推荐位置。
元素布局系统200的交互模块202还可以向客户端返回多个元素在所述画布的推荐尺寸和推荐位置。当用户确认按照推荐尺寸和推荐位置放置所述多个元素时，元素布局系统200可以将元素以及元素的推荐尺寸和推荐位置下发至终端30，终端30按照上述推荐尺寸和推荐位置放置多个元素，由此实现智能化的元素布局。
需要说明的是，图2是本申请实施例中元素布局系统200的一种示意性部署方式，在本申请实施例其他可能的实现方式中，元素布局系统200也可以部署在边缘环境中。边缘环境指示在地理位置上距离终端(即端侧设备)较近的，用于提供计算、存储、通信资源的边缘计算集群。边缘计算集群是由一个或多个边缘计算设备(例如是边缘服务器)形成的计算机集群。在一些实施例中，元素布局系统200也可以部署在终端中，例如是终端10中。用户可以通过终端10直接控制终端30演示内容。
元素布局系统200可以与多个终端10、多个终端30连接，每个用户可以通过各自的终端10从多个终端30中选择用于演示内容的终端30，元素布局系统200根据用户的选择，将布局结果下发至对应的终端30，如此可以实现为不同用户提供智能布局服务。
接下来，从元素布局系统200的角度，结合附图对本申请实施例提供的元素布局方法进行详细地介绍。
参见图3所示的元素布局方法的流程图，该方法包括：
S302：元素布局系统200接收用户输入的多个元素。
元素布局系统200可以提供丰富的可视化组件，例如是柱形图、折线图、地图、数据表等图表类型的可视化组件，或者是标题框等文本类型的可视化组件，背景等装饰类型的可视化组件，用户可以基于元素布局系统200提供的上述可视化组件输入多个元素。
具体地，元素布局系统200可以向用户呈现设计界面，该设计界面承载有至少一种可视化组件，然后元素布局系统200响应于用户对可视化组件的拖拽操作，接收与可视化组件对应的多个元素。
其中，用户对图表类型的可视化组件执行拖拽操作时，元素布局系统200可以根据该图表类型的可视化组件及其接入的数据源，获得相应的元素。用户对文本类型的可视化组件执行拖拽操作时，元素布局系统200可以根据该文本类型的可视化组件以及用户输入的文本内容，获得相应的元素。例如，用户对标题框执行拖拽操作时，元素布局系统200可以根据用户拖拽的标题框以及用户输入的文本内容，获得标题类型的元素。用户对装饰类型的可视化组件执行拖拽操作时，元素布局系统200可以根据该装饰类型的可视化组件，获得相应的元素。
在一些可能的实现方式中，元素布局系统200也可以接收用户通过元素添加控件输入的多个元素。其中，上述多个元素可以是用户逐个添加，也可以是用户批量添加。用户可以通过元素添加控件设置需要添加的元素的尺寸、位置。元素为矩形元素时，元素的尺寸和位置可以通过元素的上、下、左、右边缘的位置确定。在画布尺寸固定的情况下，上、下、左、右边缘的位置可以通过上边距(元素的上边缘到画布的上边缘的距离)、下边距(元素的下边缘到画布的下边缘的距离)、左边距(元素的左边缘到画布的左边缘的距离)、右边距(元素的右边缘到画布的右边缘的距离)表示。
当元素布局系统200提供多种类型的元素时，用户还可以通过元素添加控件设置需要添加的元素的类型。例如可以是图表、文本或者装饰等类型。其中，图表还可以进一步分为柱形图、折线图、地图等类型。文本可以进一步分为标题或正文等类型。当用户设置添加的元素的类型为图表或文本时，用户还可以通过元素添加控件设置图表接入的数据源或文本对应的文本内容。
S304：元素布局系统200接收用户输入的自定义约束。
在本实施例中，元素布局系统200将元素布局问题转换为线性规划问题，为此，元素布局系统200可以制定设计约束，以便基于该设计约束进行线性规划。其中，设计约束通常是数学约束。该设计约束可以包括根据设计准则如大屏相关设计准则制定的基础约束(也可以称作模型内部约束)，还可以包括用户输入的自定义约束。其中，自定义约束可以根据用户需求选择配置。元素布局系统200可以提供多种自定义约束，然后接收用户选择的一种或多种自定义约束。
其中，基础约束可以包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种。自定义约束可以包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。下面对上述基础约束以及自定义约束进行详细说明。
(1)对齐约束
对齐约束用于保证元素对齐。对齐约束将用户输入的多个元素分为若干个对齐组，例如是上、下、左、右等若干个对齐组。其中，在某个方向上对齐的元素属于一个对齐组，一个对齐组中的元素对齐的线称作对齐线。
具体参见公式(1)至(4)，对齐约束用于将用户输入的所有元素划分为上、下、左、右等若干个对齐组，一个元素的各边缘(如上边缘、下边缘、左边缘或右边缘)分别对应有且只有一个对齐组。
其中，e用于表示元素，
用于表示元素集合，/>
表示元素集合中的任意元素。α、β、γ和δ分别表示左边缘、右边缘、上边缘和下边缘，/>
表示元素e的左边缘对应的对齐组，/>
表示元素e的右边缘对应的对齐组，/>
表示元素e的上边缘对应的对齐组，/>
表示元素e的下边缘对应的对齐组。
为了便于理解，本申请还提供了一具体示例。参见图4A，第一行的第二个元素与第一行的第一个元素、第一行的第三个元素上对齐，第一行的第二个元素与第一行的第三个元素下对齐，此外，第一行的第二个元素还与第二行的第一个元素左对齐和右对齐，图4A所示的四条虚线为上述对齐组对应的对齐线。
(2)网格约束
网格约束用于保证画布区域的合理划分，防止元素重叠。常见的设计准则包括视觉平衡。视觉平衡的一个典型示例是对称平衡。对称平衡是在稳定且常规的布局中组织元素的常用方法。网格约束可以基于对称平衡将元素放置在合适的位置，防止元素重叠。
具体地，根据元素的数量可以将画布区域划分为包括若干行、若干列的网格，并计算对齐线数量，作为对齐线约束的基准量。然后通过垂直或水平分割包含元素的区域来分割设计，基于像素坐标制定分割策略，采用简单的分层设计样式，使得元素视觉平衡。
其中，对齐线数量的计算可以参照公式(5)至(8)：
aligncount＝4*gridcount+2*(gridaddCol+gridaddRest) (5)
gridaddRest＝Nel-gridcount*gridcount-gridaddCol*gridcount (8)
其中，Nel表示元素的数量，gridcount表示网格线行数，gridaddCol表示列拓展数，gridaddRest表示列拓展后剩余元素的数量，aligncount表示对齐线数量。在计算对齐线数量时，如公式(6)至(8)，可以先对元素的数量开根，然后进行向下取整，以确定网格线的行数，对剩余的元素根据行数进行列拓展，接着根据列拓展数确定列拓展后剩余元素的数量。然后，参照上述公式(5)，根据网格线数量和列拓展数、列拓展后剩余元素的数量确定对齐线数量。
为了便于理解，本申请还提供了一些具体示例。参见图4B，元素数量为9时，可以按照三行三列进行排列，每个元素可以有上、下、左、右四条对齐线，不同元素可以包括重复的对齐线，排除重复的对齐线，共有4*3＝12条对齐线。元素数量为13时，先进行开根运算，然后可以开根运算结果进行向下取整，从而确定上述元素可以排列3行，然后基于剩余的5个元素(如图中虚线框所示)拓展1列，再根据拓展列数，确定拓展列后剩余元素的数量为13-3*3-3*1＝1，由此计算出对齐线数量为3*4+2*(1+1)＝16。
对于包括相同数量元素的元素集合，可以有多种布局。针对每一种布局可以确定对齐线数量，对齐线数量越大，则元素布局越均衡。
(3)大小约束
大小约束用于保证元素的大小(也即尺寸)合理。考虑到人眼对于图表的可读性有一定要求，元素在布局过程中应当避免过于缩小。另外从屏幕展示内容整体的美观度而言，于放大的图表可以影响屏幕整体的和谐性，产生杂乱感，因此，元素在布局过程中也应当避免过于放大。为此，可以对元素的缩放范围进行约束，保证元素处于合理大小。
参见公式(9)至(12)：
其中，
标识元素的初始宽度，/>
表示元素的初始高度，widthca表示画布的宽度，heightca表示画布的高度，也即元素的缩放范围可以是宽度介于初始宽度的2/3(即
)与画布的宽度(即widthca)之间，高度介于初始高度的2/3(即/>
)与画布的高度(heightca)之间。
为了便于理解，本申请还提供了一具体示例。如图4C所示，元素的初始大小等于图4C中深灰色区域的大小，该元素的宽和高最小可以缩小至深灰色区域的宽和高的2/3，也即元素最小可以如图中浅灰色区域所示，该元素的宽和高最大可以缩放至画布的宽和高，也即元素最大可以如图中黑色区域所示。
(4)边界约束
边界约束用于保证布局充满画布。锯齿状的轮廓、不平衡的轮廓或任何非凸排列可以影响美观度，因此，可以设置元素布局引起的整体轮廓接近矩形的外部轮廓，从而使得布局结果占满整张屏幕，保证元素充满画布。
针对矩形轮廓的上述需求，可以通过对齐组的上下限进行约束。例如，边界约束使所有元素的左、上对齐组中坐标值最小的元素处于画布的左、上边界，如公式(13)(14)所示，右、下对齐组中坐标值最大的元素处于画布的右、下边界，如式(15)(16)所示。具体如下：
其中，padding表示边距。以画布的左上角为坐标系的原点，上边缘为X轴，左边缘为Y轴，则padding X可以表示沿着X轴方向的设定边距，padding Y可以表示沿着Y轴方向的设定边距。
表征左对齐组中坐标值(如Y轴坐标值)最小的元素的左边缘到画布的坐边缘的距离，/>
表征上对齐组中坐标值(如X轴坐标值)最小的元素的上边缘到画布的上边缘的距离。类似地，/>
表征右对齐组中坐标值(如Y轴坐标值)最大的元素到右边缘到画布的左边缘的距离，/>
表征下对齐组中坐标值(如X轴坐标值)最大的元素到画布的上边缘的距离。
为了便于理解，本申请还提供了一具体示例。参见图4D，4个元素中第一行两个元素形成上对齐组，第二行两个元素形成下对齐组，第一列两个元素形成左对齐组，第二列两个元素形成右对齐组。在排列上述元素时，上对齐组和左对齐组中坐标值最小的元素例如是第一行第一个元素可以排列在到画布左边缘和上边缘距离为padding X、padding Y的位置，类似地，下对齐组和右对齐组中坐标值最大的元素例如是第二行第二个元素可以排列在到画布左边缘和上边缘距离为widthcanvas-paddingX、heightcanvas-paddingY的位置。由此，可以使得所有元素充满画布。
(5)填充约束
填充约束用于保证布局内部充满。除了布局的轮廓形状，布局的内部空缺可以使得整体的空间失去连续感，进而在一定程度上影响布局的美观度。为此，可以设置各个元素之间的间距不可超过设定间距，从而使布局结果内部充满。其中，各个元素之间的间距越近，元素的总面积越接近画布的面积。因此，还可以对元素进行缩放，使得元素的总面积接近画布的面积。
具体地，在对元素进行缩放时，可以根据元素的面积和画布的面积的比例对元素进行缩放。考虑到面积的缩放比例等于宽度的缩放比例乘以高度的缩放比例，可以对元素的面积和画布的面积的比例进行开根运算，然后按照开根运算的结果缩放元素的宽度和高度，如公式(17)和(18)所示：
其中，widthcanvas表示画布的宽度，heightcanvas画布的高度，areacanvas表示画布的面积，areae表示元素的面积，
表示元素的宽度的最大值，/>
表示元素的高度的最大值。
参见图4E，当缩放后的元素的总面积接近画布的面积时，则可以确定满足填充约束。其中，缩放后的元素的总面积是否接近画布的面积可以通过面积比例进行衡量。例如缩放后的元素的总面积和画布的面积的比例大于或等于预设比例，则可以确定缩放后的元素的总面积接近画布的面积。预设比例可以根据经验值设置，例如可以设置为99％。
(6)纵横比约束
纵横比约束用于对一个或多个元素的缩放比进行约束。也即在对元素进行缩放时，对一个或多个元素保持指定的纵横比(ratio)进行缩放。其中，纵横比可以根据元素的初始高度以及初始宽度确定，例如可以为初始高度和初始宽度的比值。参见图4F，在对元素进行缩放时，元素缩放后的高度可以根据缩放后的宽度以及纵横比确定：
height′＝width′*ratio (19)
其中，width′表示缩放后的宽度，height′表示缩放后的高度。
(7)对齐偏好约束
对齐偏好约束用于对一个或多个元素进行置顶、置左、置右或者置下约束。例如，可以将需要置顶的元素放在其他元素的上方，如图4G所示。为了实现不同的对齐偏好，可以设置目标元素在其他元素之上，如公式(20)，或者目标元素在其他元素之右，如公式(21)，或者目标元素在其他元素之左，如公式(22)，或者目标元素在其他元素之下，如公式(23)：
其中，e1表示目标元素，e2表示目标元素之外的其他元素。目标元素是指用户意图置顶、置右、置左或置下的元素。
为布尔逻辑变量。当e1在e2之上时，则/>
取值为1，否则，/>
取值为0。类似地，/>
也是布尔逻辑变量。当e1在e2之右时，则/>
取值为1，否则，/>
取值为0。当e1在e2之左时，
取值为1，否则/>
取值为0。当e1在e2之下时，则/>
取值为1，否则取值为0。
(8)锁定约束
锁定约束用于对一个或多个元素进行尺寸和位置的锁定。也即规定一个或多个元素的大小和位置与输入上述元素时的大小和位置保持一致。通常可以在输入元素时，增加lock字段，该字段为布尔型变量，可以取值为true或false。当取值为true时，则可以将对应元素的大小和位置进行锁定。
参见图4H，当某个元素被锁定时，则在智能布局过程中，该元素的位置和大小保持不变。也即该元素满足如下公式：
Llock＝Xlock (24)
Block＝Ylock (25)
其中，Llock表示被锁定元素的左边界的位置，具体可以通过左边界到Y轴的距离表示，Block表示被锁定元素的下边界的位置，具体可以通过下边界到X轴的距离表示，Xlock、Ylock分别表示被锁定元素的左下顶点的坐标，
分别表示被锁定元素的宽的最小值、最大值和初始值，/>
分别表示被锁定元素的高的最小值、最大值和初始值。
上述约束(1)至(5)为基础约束，约束(6)至(8)为自定义约束。在一些实施例中，元素布局系统200也可以不执行S304，采用基础约束进行线性规划，从而实现元素布局。
S306：元素布局系统200确定多个元素在画布的初始尺寸和初始位置。
当用户采用拖拽可视化组件的方式，输入多个元素时，元素布局系统200可以通过确定多个元素中的每个元素的参考点或边到画布的边缘的距离，确定每个元素的初始尺寸和初始位置。
例如，元素布局系统200可以确定每个元素的上边缘、下边缘到画布的上边缘(记作X轴)的距离，以及每个元素的左边缘、右边缘到画布的左边缘(记作Y轴)的距离。然后，元素布局系统200可以根据元素的上、下边缘到画布的上边缘的距离的差值确定元素的高度，根据元素的左、右边缘到画布的左边缘的距离的差值确定元素的宽度，由此可以获得多个元素在画布的初始尺寸。元素布局系统200可以根据元素的上、下边缘到画布的上边缘的距离的平均值确定元素的中心点的纵坐标，根据元素的左、右边缘到画布的左边缘的距离的平均值确定元素的中心点的横坐标，基于元素的中心点的横纵坐标可以确定元素的初始位置。
当用户采用元素添加控件的方式输入多个元素时，元素布局系统200可以直接根据用户通过元素添加控件输入的元素的布局属性，如元素的上、下、左、右边缘的位置，确定多个元素在画布的初始尺寸和初始位置。
S308：元素布局系统200以多个元素在画布的初始尺寸和初始位置为起点，结合画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局。
具体地，元素的布局可以通过元素的尺寸和位置进行表征，元素布局系统200通过迭代优化算法确定合适的尺寸和位置，以实现元素布局。其中，元素布局系统200可以以多个元素在画布的初始尺寸和初始位置为起点，结合画布的尺寸以及设计约束，例如是基础约束和用户输入的自定义约束(如果存在)，采用优化器对所述多个元素在所述画布的尺寸和位置进行迭代优化，从而获得多个候选布局。
考虑到Gurobi优化器在混合整数线性规划、凸或非凸等二次规划问题上性能领先，CBC优化器也具有不俗的优化效果，元素布局系统200可以采用上述Gurobi优化器或CBC优化器进行迭代优化，以满足不同的业务需求。
在一些可能的实现方式中，元素布局系统200还可以获取各元素的类型，例如是图表、文本、装饰等类型。相应地，元素布局系统200在对多个元素在所述画布的尺寸和位置进行迭代优化时，还可以结合元素的类型进行迭代优化。例如，元素布局系统200可以基于元素的类型对元素进行分组，将属于同一分组的元素绑定，然后按照以绑定后的元素分组为单位进行迭代优化。例如，元素布局系统200可以将一个图表类型的元素与一个文本类型的元素(例如是图表的标题)绑定，然后将绑定后的元素分组视为一个元素进行迭代优化。
参见图5所示的智能布局的原理图，元素布局系统200在布局生成阶段，采用生成模型，例如是核心混合整数线性规划(mixed-integer linear programming，MILP)生成模型，生成候选布局。其中，生成模型的大小通常取决于元素的数量。生成模型中的决策变量和约束的数量与画布和其他因素无关。
生成模型中定义了核心MILP公式(图5中未示出)和目标函数。核心MILP公式用于生成适当的布局网格骨架，以确保元素在允许的位置和尺寸限制内，元素之间不重叠，且不溢出画布。其中，生成模型定义坐标系原点为画布的左上角，X轴的正方向为水平向右，Y轴的正方向为竖直向下。生成模型中定义连续决策变量Le、Re、Te、Be表示单个元素e的左、右、上、下边缘的位置，通过上述变量可以确保适当的元素大小以及防止元素溢出。对齐约束、填充约束等设计约束可以作为生成模型的目标函数(也称作附加约束)，以优化布局网格骨架，生成具有对齐等美学效果的候选布局。
S310：元素布局系统200对所述多个候选布局进行排序，获得布局结果。
元素布局系统200可以从不同维度对多个候选布局进行排序，以选择性能较好的候选布局，作为布局结果。例如，元素布局系统200可以根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。
在一些可能的实现方式中，元素布局系统200可以对多个元素中每个元素的尺寸的均衡度、多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度进行打分，根据相应的分数对所述多个候选布局进行排序。参见图5，元素布局系统200采用排序模型对大小质量Qs(尺寸的均衡度)、平衡质量Qb(多个元素在画布呈现的画面的均衡度)、对齐质量Qa(多个元素的对齐程度)进行打分，得到尺寸均衡分数Scoresize、平衡分数(重要性分数Scoreimportance)和对齐分数ScorealTgn。元素布局系统200可以计算各个候选布局的总分数，如下所示：
Score＝Scoresize+Scorealign+Scoreimportance (30)
元素布局系统200可以基于上述总分数对多个候选布局进行排序，获得布局结果。其中，布局结果可以为所述多个候选布局中排序靠前的候选布局，例如可以是总分数排序为top3的候选布局。在图5的示例中，布局结果可以是排序为top1的候选布局，如候选布局1。该布局结果包括多个元素在所述画布的推荐尺寸和推荐位置。其中，推荐尺寸和推荐位置可以是上述排序靠前的候选布局中元素的尺寸和位置。
接下来，对尺寸均衡分数Scoresize、对齐分数Scorealign、重要性分数Scoreimportance的确定方式进行说明。
尺寸均衡分数Scoresize可以基于各个元素的规格化宽度和规格化高度之和确定。具体计算方式参见公式(31)：
其中，widthe、heighte用于表征元素e的宽度和高度，widthca、heightca用于表征画布的宽度和高度。相应地，
用于表征元素e的规格化宽度和规格化高度。Nel用于表征元素的数量。
参见图6A所示不同布局的尺寸均衡分数的示意图，左边的布局中元素大小差异大于右边的布局中元素大小差异，左边的布局对应的尺寸均衡分数低于右边的布局对应的尺寸均衡分数。其中，尺寸均衡分数越高，代表布局内各元素的大小越均衡。
对齐分数ScorealTgn可以根据每两个元素间上下左右对齐情况确定。若两元素上对齐，则
取1，类似地，若两元素下对齐、左对齐、右对齐，则/>
取1。一个候选布局的对齐分数Scorealign可以参见如下公式：
参见图6B所示不同布局的对齐分数的示意图，左边的布局中元素对齐的数量小于右边的布局中元素对齐的数量，相应地，左边的布局的对齐分数小于右边的布局的对齐分数。
重要性分数Scoreimportance可以根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。例如，候选布局的重要性分数可以基于每个元素的面积以及每个元素到画布的中心点的距离确定。具体计算方式参见公式(33)：
其中，important_weighte表示元素的重要性系数，areae表示元素的面积，xe表示元素的x坐标，ye表示元素的y坐标，widthe、heighte分别表示元素的宽、高，widthcanvas、heightcanvas分别表示画布的宽、高。
参见图6C，一个元素的面积占比越大，距离画布的中心点越近，则该元素的重要性越高，反之，则越低。基于此，图6C中左边的布局中第三列第一行的元素的重要性分数小于右边的布局中第二列的元素的重要性分数。
上述示例是以元素布局系统200基于三个分数之和数进行排序，然后根据排序结果确定布局结果进行示例说明。在一些可能的实现方式中，也可以基于三个分数的加权平均数或者三个分数中的一个或两个分数进行排序，并根据排序结果确定布局结果。
需要说明的是，上述S308至S310为本申请实施例中元素布局系统200以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果的一种实现方式，在一些可的实现方式中，元素布局系统200也可以不执行排序等操作。例如，元素布局系统200可以生成一个候选布局，并将该候选布局作为布局结果。
并且，元素布局系统200可以设置多种触发条件，以触发迭代优化，生成布局的过程。例如，元素布局系统200可以提供智能布局控件，则触发条件可以包括用户触发上述智能布局控件。又例如，元素布局系统200设置有预审时间，触发条件可以包括距离用户上次输入元素的时间大于预设时间。也即，元素布局系统200可以在用户触发智能布局控件，或者距离用户上次输入元素的时间大于预设时间时，以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。
基于上述内容描述，本申请实施例提供了一种元素布局方法。该方法采用迭代优化的方式确定推荐尺寸和推荐位置，而不是与固定的布局模板进行匹配，因而解决了相关技术中对于图表等类型的元素不适用，布局效果不佳的问题，具有较高可用性。进一步地，在迭代优化时，可以生成多个候选布局，并基于尺寸均衡分数、对齐分数和/或重要性分数对多个候选布局进行排序，获得布局结果，可以实现用户意图驱动的智能化布局。
在演示数据图表为主的场景中，通过上述方法可以实现以一个图表(也称作主图表)为视觉焦点，以其余的可视化图表辅助主图表完成数据事实(data fact)的讲述，如此可以获得较好的演示效果。
本申请实施例还设计了相关验证实验，以验证演示效果。考虑到不同人员的年龄、性别、文化、专业背景等多方面因素，本验证实验选择20人进行测试。其中，进行测试的20人具体为15名可视化专业人员以及5名技术专家。
该验证实验采用T-test检验法对测试数据分析。T-test是一种广泛用于比较两组样本均值的统计检验方法，它采用T分布理论来推断差异发生的概率，从而判定两个平均数的差异是否显著。主要用于样本含量较小(例如n<30)，总体标准差σ未知的正态分布。
具体地，给定相同的元素，分别采用本申请实施例的元素布局方法和其他元素布局方法(例如是基于模板和动态编程的元素布局方法)生成不同布局，假设为布局1和布局2。然后，20名测试人员可以对上述布局1和布局2分别打分。对于布局1和布局2，采用T-test判定20名测试人员打分的平均数的差异是否显著。
T-test结果表明：采用本申请实施例的元素布局方法的演示效果显著优于基于模板和动态编程的元素布局方法的演示结果(置信度>99％)。本申请实施例的元素布局方法生成的布局的整套效果较好，元素大小合理，并且较好地填充画布。
上文结合图1A至图6C对本申请实施例提供的元素布局方法进行了详细介绍，下面将结合附图对本申请实施例提供的元素布局系统200进行介绍。
参见图2所示的元素布局系统的结构示意图，该系统200包括：
交互模块202，用于接收用户输入的多个元素；
确定模块204，用于确定所述多个元素在画布的初始尺寸和初始位置；
优化模块206，用于以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果，所述布局结果包括所述多个元素在所述画布的推荐尺寸和推荐位置。
在一些可能的实现方式中，所述优化模块206具体用于：
对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局，所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置；
对所述多个候选布局进行排序，获得布局结果，所述布局结果为所述多个候选布局中排序靠前的候选布局。
在一些可能的实现方式中，所述优化模块206具体用于：
根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。
在一些可能的实现方式中，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。
在一些可能的实现方式中，所述交互模块202还用于：
接收用户输入的自定义约束；
所述设计约束包括基础约束和所述自定义约束。
在一些可能的实现方式中，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种，所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。
在一些可能的实现方式中，所述元素包括图表、文本或装饰中的一种或多种。
在一些可能的实现方式中，所述交互模块202具体用于：
向用户呈现设计界面，所述设计界面承载有可视化组件；
响应于用户对所述可视化组件的拖拽操作，接收与所述可视化组件对应的多个元素。
在一些可能的实现方式中，所述优化模块206具体用于：
当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。
根据本申请实施例的元素布局系统200可对应于执行本申请实施例中描述的方法，并且元素布局系统200的各个模块/单元的上述和其它操作和/或功能分别为了实现图2所示实施例中的各个方法的相应流程，为了简洁，在此不再赘述。
本申请实施例还提供一种计算机集群。该计算机集群包括至少一台计算机，该至少一台计算机中的任一台计算机可以来自云环境或者边缘环境，也可以是终端设备。该计算机集群具体用于实现如图2所示实施例中元素布局系统200的功能。
图7提供了一种计算机集群的结构示意图，如图7所示，计算机集群70包括多台计算机700，计算机700包括总线701、处理器702、通信接口703和存储器704。处理器702、存储器704和通信接口703之间通过总线701通信。
总线701可以是外设部件互连标准(peripheral component interconnect，PCI)总线或扩展工业标准结构(extended industry standard architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，图7中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。
处理器702可以为中央处理器(central processing unit，CPU)、图形处理器(graphics processing unit，GPU)、微处理器(micro processor，MP)或者数字信号处理器(digital signal processor，DSP)等处理器中的任意一种或多种。
通信接口703用于与外部通信。例如，通信接口703用于接收用户输入的多个元素，输出布局结果等等。
存储器704可以包括易失性存储器(volatile memory)，例如随机存取存储器(random access memory，RAM)。存储器704还可以包括非易失性存储器(non-volatilememory)，例如只读存储器(read-only memory，ROM)，快闪存储器，硬盘驱动器(hard diskdrive，HDD)或固态驱动器(solid state drive，SSD)。
存储器704中存储有计算机可读指令，处理器702执行该计算机可读指令，以使得计算机集群70执行前述元素布局方法(或实现前述元素布局系统200的功能)。
具体地，在实现图2所示系统的实施例的情况下，且图2中所描述的元素布局系统200的各模块如交互模块202、确定模块204和优化模块206的功能为通过软件实现的情况下，执行图2中各模块的功能所需的软件或程序代码可以存储在计算机集群70中的至少一个存储器704中。至少一个处理器702执行存储器704中存储的程序代码，以使得计算机集群70执行前述元素布局方法。
本申请实施例还提供了一种计算机可读存储介质。所述计算机可读存储介质可以是计算机集群能够存储的任何可用介质或者是包含一个或多个可用介质的数据中心等数据存储设备。所述可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，DVD)、或者半导体介质(例如固态硬盘)等。该计算机可读存储介质包括指令，所述指令指示计算机集群执行上述元素布局方法。
本申请实施例还提供了一种计算机程序产品。所述计算机程序产品包括一个或多个计算机指令。在计算机集群上加载和执行所述计算机指令时，全部或部分地产生按照本申请实施例所述的流程或功能。所述计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，所述计算机指令可以从一个网站站点、计算设备或数据中心通过有线(例如同轴电缆、光纤、数字用户线(DSL))或无线(例如红外、无线、微波等)方式向另一个网站站点、计算设备或数据中心进行传输。所述计算机程序产品可以为一个软件安装包，在需要使用前述元素布局方法的任一方法的情况下，可以下载该计算机程序产品并在计算机集群上执行该计算机程序产品。
上述各个附图对应的流程或结构的描述各有侧重，某个流程或结构中没有详述的部分，可以参见其他流程或结构的相关描述。
Claims (21)
1.一种元素布局方法，其特征在于，所述方法包括：
接收用户输入的多个元素；
确定所述多个元素在画布的初始尺寸和初始位置；
以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果，所述布局结果包括所述多个元素在所述画布的推荐尺寸和推荐位置。
2.根据权利要求1所述的方法，其特征在于，所述对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果，包括：
对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局，所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置；
对所述多个候选布局进行排序，获得布局结果，所述布局结果为所述多个候选布局中排序靠前的候选布局。
3.根据权利要求2所述的方法，其特征在于，所述对所述多个候选布局进行排序，包括：
根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。
4.根据权利要求3所述的方法，其特征在于，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。
5.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：
接收用户输入的自定义约束；
所述设计约束包括基础约束和所述自定义约束。
6.根据权利要求5所述的方法，其特征在于，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种，所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。
7.根据权利要求1至6任一项所述的方法，其特征在于，所述元素包括图表、文本或装饰中的一种或多种。
8.根据权利要求1至7任一项所述的方法，其特征在于，所述接收用户输入的多个元素，包括：
向用户呈现设计界面，所述设计界面承载有可视化组件；
响应于用户对所述可视化组件的拖拽操作，接收与所述可视化组件对应的多个元素。
9.根据权利要求1至8任一项所述的方法，其特征在于，所述以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，包括：
当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。
10.一种元素布局系统，其特征在于，所述系统包括：
交互模块，用于接收用户输入的多个元素；
确定模块，用于确定所述多个元素在画布的初始尺寸和初始位置；
优化模块，用于以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得布局结果，所述布局结果包括所述多个元素在所述画布的推荐尺寸和推荐位置。
11.根据权利要求10所述的系统，其特征在于，所述优化模块具体用于：
对所述多个元素在所述画布的尺寸和位置进行迭代优化，获得多个候选布局，所述多个候选布局中的每个候选布局包括所述多个元素在所述画布的尺寸和位置；
对所述多个候选布局进行排序，获得布局结果，所述布局结果为所述多个候选布局中排序靠前的候选布局。
12.根据权利要求11所述的系统，其特征在于，所述优化模块具体用于：
根据所述多个元素中每个元素的尺寸的均衡度、所述多个元素在画布呈现的画面的均衡度以及所述多个元素的对齐程度中的至少一个，对所述多个候选布局进行排序。
13.根据权利要求12所述的系统，其特征在于，所述多个元素在画布呈现的画面的均衡度通过每个元素的重要性分数之和表征，所述重要性分数根据所述元素的面积以及所述元素到所述画布的中心点的距离确定。
14.根据权利要求10至13任一项所述的系统，其特征在于，所述交互模块还用于：
接收用户输入的自定义约束；
所述设计约束包括基础约束和所述自定义约束。
15.根据权利要求14所述的系统，其特征在于，所述基础约束包括对齐约束、网格约束、大小约束、边界约束和填充约束中的任意一种或多种，所述自定义约束包括锁定约束、纵横比约束、对齐偏好约束中的任意一种或多种。
16.根据权利要求10至15任一项所述的系统，其特征在于，所述元素包括图表、文本或装饰中的一种或多种。
17.根据权利要求10至16任一项所述的系统，其特征在于，所述交互模块具体用于：
向用户呈现设计界面，所述设计界面承载有可视化组件；
响应于用户对所述可视化组件的拖拽操作，接收与所述可视化组件对应的多个元素。
18.根据权利要求10至17任一项所述的系统，其特征在于，所述优化模块具体用于：
当用户触发智能布局控件或者距离用户上次输入元素的时间大于预设时间时，以所述多个元素在画布的初始尺寸和初始位置为起点，结合所述画布的尺寸以及设计约束，对所述多个元素在所述画布的尺寸和位置进行迭代优化。
19.一种计算机集群，其特征在于，所述计算机集群包括至少一台计算机，所述至少一台计算机包括至少一个处理器和至少一个存储器，所述至少一个存储器中存储有计算机可读指令，所述至少一个处理器执行所述计算机可读指令，使得所述计算机集群执行如权利要求1至9任一项所述的方法。
20.一种计算机可读存储介质，其特征在于，包括计算机可读指令，当所述计算机可读指令在计算机集群上运行时，使得所述计算机集群执行如权利要求1至9任一项所述的方法。
21.一种计算机程序产品，其特征在于，包括计算机可读指令，当所述计算机可读指令在计算机集群上运行时，使得所述计算机集群执行如权利要求1至9任一项所述的方法。
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111447457.3A CN116206012A (zh) | 2021-11-30 | 2021-11-30 | 元素布局方法以及相关设备 |
| PCT/CN2022/093727 WO2023097990A1 (zh) | 2021-11-30 | 2022-05-19 | 元素布局方法以及相关设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111447457.3A CN116206012A (zh) | 2021-11-30 | 2021-11-30 | 元素布局方法以及相关设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN116206012A true CN116206012A (zh) | 2023-06-02 |
Family
ID=86511684
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111447457.3A Pending CN116206012A (zh) | 2021-11-30 | 2021-11-30 | 元素布局方法以及相关设备 |
Country Status (2)
| Country | Link |
|---|---|
| CN (1) | CN116206012A (zh) |
| WO (1) | WO2023097990A1 (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117033844A (zh) * | 2023-10-07 | 2023-11-10 | 之江实验室 | 一种画布元素布局方法、装置、存储介质及电子设备 |
| CN117076811A (zh) * | 2023-10-13 | 2023-11-17 | 腾讯科技（深圳）有限公司 | 一种网页导出方法、装置、设备及存储介质 |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116663483B (zh) * | 2023-07-31 | 2023-10-20 | 全芯智造技术有限公司 | 用于芯片排版的方法、设备和介质 |
| CN117557682B (zh) * | 2024-01-09 | 2024-04-19 | 腾讯科技（深圳）有限公司 | 数据处理方法、装置、产品、设备和介质 |
| CN117828701B (zh) * | 2024-03-05 | 2024-05-24 | 中国石油大学(华东) | 工程图纸布局优化方法、系统、设备及介质 |
Family Cites Families (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7339598B2 (en) * | 2003-07-11 | 2008-03-04 | Vistaprint Technologies Limited | System and method for automated product design |
| CN106056651A (zh) * | 2016-06-03 | 2016-10-26 | 北京金山安全软件有限公司 | 图片布局的管理方法、装置及电子设备 |
| CN107240151B (zh) * | 2017-07-05 | 2020-08-21 | 常州赞云软件科技有限公司 | 一种基于父子约束的场景布局保存与再现方法 |
| CN108280135B (zh) * | 2017-12-26 | 2021-08-10 | 创新先进技术有限公司 | 实现数据结构可视化的方法、装置和电子设备 |
| CN112164127A (zh) * | 2020-09-25 | 2021-01-01 | 大方众智创意广告(珠海)有限公司 | 图片生成方法、装置、电子设备及可读存储介质 |
| CN113190781B (zh) * | 2021-05-12 | 2023-09-01 | 北京奇艺世纪科技有限公司 | 页面布局方法、装置、设备及存储介质 |
-
2021
- 2021-11-30 CN CN202111447457.3A patent/CN116206012A/zh active Pending
-
2022
- 2022-05-19 WO PCT/CN2022/093727 patent/WO2023097990A1/zh unknown
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117033844A (zh) * | 2023-10-07 | 2023-11-10 | 之江实验室 | 一种画布元素布局方法、装置、存储介质及电子设备 |
| CN117033844B (zh) * | 2023-10-07 | 2024-01-16 | 之江实验室 | 一种画布元素布局方法、装置、存储介质及电子设备 |
| CN117076811A (zh) * | 2023-10-13 | 2023-11-17 | 腾讯科技（深圳）有限公司 | 一种网页导出方法、装置、设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| WO2023097990A1 (zh) | 2023-06-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN116206012A (zh) | 元素布局方法以及相关设备 | |
| US9436672B2 (en) | Representing and manipulating hierarchical data | |
| US11880382B2 (en) | Systems and methods for generating tables from print-ready digital source documents | |
| JP5851607B2 (ja) | 漢字構成方法および装置、文字構成方法および装置、ならびにフォントライブラリ構築方法 | |
| CN111428457B (zh) | 数据表的自动格式化 | |
| US10318629B2 (en) | Adaptive content rendering for optimizing page layout | |
| US11954463B2 (en) | User interface design update automation | |
| EP1743319A2 (en) | Display priority for 2d cad documents | |
| US10565560B2 (en) | Alternative people charting for organizational charts | |
| EP2068251A2 (en) | A method of content adaptation for electronic displays | |
| US11144717B2 (en) | Automatic generation of document layouts | |
| US7240047B2 (en) | Apparatus and method for market-based document layout selection | |
| CN109213316B (zh) | 自动布局引擎 | |
| US11232607B2 (en) | Adding color to digital images | |
| US11163725B1 (en) | Personalized user interface systems and methods | |
| US8326812B2 (en) | Data search device, data search method, and recording medium | |
| Marszałkowski et al. | Fast algorithms for online construction of web tag clouds | |
| US11829703B2 (en) | Parallel object analysis for efficiently generating layouts in digital design documents | |
| Buttrey | An excel add-in for statistical process control charts | |
| CN117573847B (zh) | 可视化答案的生成方法、装置、设备及存储介质 | |
| CN109657205A (zh) | 文本行高的调整方法及装置、电子设备 | |
| CN108197193A (zh) | 一种多视图数据的显示方法、系统及相关装置 | |
| BIR et al. | AN INTELLIGENT LAYOUT ALGORITHM FOR VARIABLE SCREEN RESOLUTIONS | |
| CN115115246A (zh) | 数据处理方法、装置、计算机设备和存储介质 | |
| Dubois et al. | Evaluating the Visual Design of Graphical User Interfaces on Mobile Devices: A Family of Experiments |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication |