CN117033844B - 一种画布元素布局方法、装置、存储介质及电子设备 - Google Patents

Abstract

本说明书公开了一种画布元素布局方法、装置、存储介质及电子设备。在本说明书提供的画布元素布局方法中，获取目标画布，并确定所述目标画布中各元素的大小和位置；根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；依次针对每个元素，对该元素进行扩展，直到该元素与其它元素和/或所述元素框架发生接触；根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

Description

一种画布元素布局方法、装置、存储介质及电子设备

技术领域

本说明书涉及计算机技术领域，尤其涉及一种画布元素布局方法、装置、存储介质及电子设备。

背景技术

在常规的网页页面中，元素是按照从上到下、从左到右的方式进行排布，彼此之间排列的很紧密，而网格画布是在此基础上延伸出的另外一种排布形式。主要思想是把当前页面借助网格线在水平、垂直方向上进行划分，得到的是一个个相同大小的网格方块。通过这种方式，画布中的所有元素都可以借助网格进行描述，一般多用于展示页面，如报表页、仪表盘等。

在目前网格画布应用的中，元素的排布方式基本都是以用户手动交互为唯一标准，即用户决定每个元素的大小、位置等。通常一个页面上会存在大量的元素，这种需要用户手动确定每一个元素的布局的方式无疑给用户带来了巨大的操作量；同时，对于一个已经排布好的画布，如果要对内部的一些元素进行增删，往往也需要花费大量的时间对整体布局进行调整。

因此，如何更加快速、高效地实现网格画布中的画布布局是一个亟待解决的问题。

发明内容

本说明书提供一种画布元素布局方法、装置、存储介质及电子设备，以至少部分地解决现有技术存在的上述问题。

本说明书采用下述技术方案：

本说明书提供了一种画布元素布局方法，包括：

获取目标画布，并确定所述目标画布中各元素的大小和位置；

根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；

依次针对每个元素，对该元素进行扩展，直到该元素与其它元素和/或所述元素框架发生接触；

根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

可选地，确定所述目标画布中各元素的大小和位置，具体包括：

针对所述目标画布中的每个元素，确定该元素的高度与宽度，作为该元素的大小，并确定该元素左上角顶点距画布原点的水平距离与竖直距离，作为该元素的位置。

可选地，在所述目标画布中确定包含所述各元素的元素框架，具体包括：

在所述目标画布中确定包含所有元素且面积最小的元素框架。

可选地，所述各元素的形状与所述元素框架的形状均为矩形。

可选地，在依次针对每个元素，对该元素进行扩展之前，所述方法还包括：

根据所述各元素的位置，对所述各元素按照位置从上到下、从左到右的顺序进行排序，得到所述各元素的位置顺序；

依次针对每个元素，对该元素进行扩展，具体包括：

按照所述各元素的位置顺序，依次针对每个元素，对该元素进行扩展。

可选地，依次针对每个元素，对该元素进行扩展，具体包括：

针对预设的每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动，并相应延长与该元素在该方向上的边连接的其他边，直到该元素在该方向上的边与其他元素的边和/或元素框架的边界发生接触。

可选地，预设的方向包括上、下、左、右；

针对预设的每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动，具体包括：

按照左、右、上、下的顺序，依次针对每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动。

本说明书提供的一种画布元素布局装置，所述装置包括：

获取模块，用于获取目标画布，并确定所述目标画布中各元素的大小和位置；

确定模块，用于根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；

扩展模块，用于依次针对每个元素，对该元素进行扩展，直到该元素与其它元素和/或所述元素框架发生接触；

布局模块，用于根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

本说明书提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述画布元素布局方法。

本说明书提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述画布元素布局方法。

本说明书采用的上述至少一个技术方案能够达到以下有益效果：

在本说明书提供的画布元素布局方法中，获取目标画布，并确定所述目标画布中各元素的大小和位置；根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；依次针对每个元素，对该元素进行扩展，直到该元素与其它元素和/或所述元素框架发生接触；根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

在采用本说明书提供的画布元素布局方法，对网格画布中的元素进行布局时，可在确定目标画布中各元素的大小和位置后，进一步确定出包含各元素的元素框架；随后，可在元素框架内，依次对每个元素进行扩展，直到元素与其他元素或元素框架发生接触；最终以扩展后的大小和位置排列各元素，完成对网格画布中元素的布局。相比传统的布局方法，本方法能够无需大量依赖用户的自主决定，可自适应地对画布中的元素进行布局。这种方式能够边界、快速地完成画布中元素地布局，使用户无需过多关注画布中元素的位置关系，可直接使用或者在此基础上微调，并且可和更多的布局约束要求结合，产生更多的布局效果。

附图说明

此处所说明的附图用来提供对本说明书的进一步理解，构成本说明书的一部分，本说明书的示意性实施例及其说明用于解释本说明书，并不构成对本说明书的不当限定。在附图中：

图1为本说明书中一种画布元素布局方法的流程示意图；

图2为本说明书中一种网格画布与元素的示意图；

图3为本说明书中一种包含若干元素的画布的示意图；

图4为本说明书中一种画布中元素框架的示意图；

图5为本说明书中一种完成元素布局方法的示意图；

图6为本说明书提供的一种元素布局装置的示意图；

图7为本说明书提供的对应于图1的电子设备示意图。

具体实施方式

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

以下结合附图，详细说明本说明书各实施例提供的技术方案。

图1为本说明书中一种画布元素布局方法的流程示意图，具体包括以下步骤：

S100：获取目标画布，并确定所述目标画布中各元素的大小和位置。

本说明书所提供的画布元素布局方法中的所有步骤均可由任何具有计算功能的电子设备实现，例如终端、服务器等设备。

本方法主要用于对采用网格画布进行页面设计时，对画布中的元素进行布局。基于此，可首先在此步骤中，获取需要进行元素布局的目标画布。其中，目标画布可以是任意一个网格画布。在获取目标画布的同时，还可获取到目标画布中包含的各元素，并确定出各元素的大小和位置。画布中的元素指可以在画布中编辑的目标，例如页面中的组件等。

图2为一种网格画布与元素的示意图。如图2所示，在网格画布中，画布在水平方向与竖直方向上被划分，形成若干个大小相同的网格。相应的，此时画布中的最小单位变为了网格。由此，在确定目标画布中各元素的大小和位置时，可具体的，针对所述目标画布中的每个元素，确定该元素的高度与宽度，作为该元素的大小，并确定该元素左上角端点距画布原点的水平距离与竖直距离，作为该元素的位置。

与一般的画布不同的，在网格画布中，页面中的元素可不必再一个个紧邻排布，而是可以在画布中通过网格个数来描述元素的大小和位置信息。以图2中的元素为例，在图2中，假设画布的左上角的顶点为画布原点，此时，元素的大小可表述为：宽度5个网格，高度3个网格；元素的位置可表述为：元素左上角顶点距离画布原点水平距离4个网格，竖直距离8个网格。为了使本说明书的表述更加简洁，在说明书后续内容对大小与位置的描述中，将省略“网格”这一单位，例如，可将图2中元素的大小描述为宽度为5，高度为3；位置描述为水平距离为4，竖直距离为8。更进一步地，可图2中元素的大小描述为（5，3），将位置描述为（4，8）。在无特殊说明的情况下，本说明书后续内容均按照上述方式对涉及到的元素的大小和位置进行描述。

值得一提的是，在传统画布中，可对画布中的元素按像素进行描述，确定出元素的精确形状。但在网格画布中，由于任何操作都需要在网格的基础上，以网格为最小单位进行，因此，在网格画布中对元素进行编辑时，元素可编辑的形状均为矩形。需要注意的是，元素的可编辑形状与元素最终显示在页面中的形状可能并不相同，可以理解为，元素的可编辑形状是一个包含元素本身的矩形框架。

S102：根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架。

步骤S100中确定出目标画布中的各元素的大小和位置后，可在此步骤中进一步确定出目标画布中包含各元素的元素框架。其中，元素框架需要包含目标画布中存在的所有元素。因此，可具体的，在所述目标画布中确定包含所有元素且面积最小的元素框架。

在此步骤中确定出的元素框架的功能为在对各元素进行排版布局时限制各远的活动范围与排版空间。在实际应用中，很多情况下，用户通常并不会将画布中的所有区域均填满元素。因此，考虑到上述需求，在开始对元素进行布局前，可先确定出一个元素框架，将需要一起进行布局的所有元素均包含进来，所有元素的布局均在确定出的元素框架内进行。

同样的，在网格画布中，确定出的元素框架的形状通常也为矩形。

以图3和图4为例对本步骤中的方法进行说明。图3展示了包含若干元素的网格画布，图4展示了在图3的基础上额外添加了元素框架的网格画布，图3和图4中均略去了网格。如图3所示，在画布中共存在5个不同的元素，在图中采用实线矩形表示。此时可如图4所示，确定出包含这5个元素的矩形框架，作为元素框架，在图中采用虚线表示。通常情况下，为了画布中保证空间的利用率，会使确定出的矩形元素框架的面积最小。当然，在实际应用中，也可确定出面积更大的元素框架，例如可设置元素框架的边界到元素之间的间距等，本说明书对此不做具体限制。

S104：依次针对每个元素，对该元素进行扩展，直到该元素与其它元素和/或所述元素框架发生接触。

在步骤S102中确定出目标画布中可用的布局空间，也就是元素框架后，便可在此步骤中，开始对目标画布中的各元素进行布局。在此步骤中，所希望达到的目标为将各元素较为合理的分布在元素框架中，并尽量将元素框架填满，保证最大的空间利用率。因此，可在此步骤中对各元素进行扩展。而针对每一个元素，其扩展的上限均为接触到其它元素，或接触到元素框架。不难想到，各元素之间不应发生重叠，且各元素均不应出现在元素框架之外，因此，当扩展中的元素接触到其他元素或元素框架时，便可停止扩展。

更进一步地，在对目标画布中的元素进行布局的过程中，如果各元素同时扩展，那么会导致元素布局非常混乱。因此，应依次对各元素进行扩展。而如何确定对各元素依次进行扩展时的顺序，可存在多种不同的方式，本说明书在此提供一种具体实施例以供参考。具体的，可根据所述各元素的位置，对所述各元素按照位置从上到下、从左到右的顺序进行排序，得到所述各元素的位置顺序；按照所述各元素的位置顺序，依次针对每个元素，对该元素进行扩展。

仍以图4为例，在图4中共存在5个大小、位置均不相同的元素。按照位置从上到下、从左到右的顺序对各元素进行排序，最终的排序结果可如图4所示，各元素上标记的序号表示了各元素的排序结果。在排序的过程中，元素位置的上下与左右的优先级相同，需要综合考虑。例如，假设存在两个位置不同的元素A和元素B，其中，元素A的位置为（2，6），元素B的位置为（3，4），此时，可对每个元素的水平距离和竖直距离相加，得到元素A的总距离为8，元素B的总距离为7，那么在排序的过程中，元素B就会排在元素A之前。

另一方面，在扩展的过程中，还需要考虑到元素需要向各不同的方向进行扩展。即，元素需要针对预设的每个方向，在该方向下进行扩展。集合上述需要依次对每个元素进行扩展的方法，在此不得不考虑“针对每个方向进行扩展”与“针对每个元素进行扩展”二者之间的优先级。

而实践结果证明，在优先“针对每个元素进行扩展”的方式下，也就是对一个元素在各方向上均扩展完毕后，再对下一个元素在各方向上进行扩展，直到所有元素均在所有方向扩展完毕的方式。这种方式会出现先进行扩展的元素占用面积过大，留给后进行扩展的元素剩余的可用面积较小，导致各元素的大小差距较大，布局结果不协调的问题。同时，在该方式下，还可能会出现全部扩展完毕后元素框架内存在一定的空白区域没有利用到的问题。因此，在本说明书提供的画布元素布局方法中，采用优先“针对每个方向进行扩展”的方式。

优先“针对每个方向进行扩展”，先令所有元素均在一个方向下扩展完毕后，切换到下一个方向，再令所有元素在下一个方向下进行扩展，直到所有元素在所有方向均扩展完毕的方式。具体的，可针对预设的每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动，并相应延长与该元素在该方向上的边连接的其他边，直到该元素在该方向上的边与其他元素的边和/或元素框架的边界发生接触。

其中，预设的方向可根据具体需求进行设置，本说明书在此提供一种具体实施例以供参考。具体的，预设的方向包括上、下、左、右；在针对预设的每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动时，可按照左、右、上、下的顺序，依次针对每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动。

举例来说，仍以图4为例，假设图4中第i个元素的大小为（，/>），位置为（/>，），其中，i表示元素的序号；同时，假设图4中元素框架的左侧边界距离画布原点的水平距离为/>，右侧边界距离画布原点的水平距离为/>，顶部边界距离画布原点的竖直距离为/>，底部边界距离画布原点的竖直距离为/>。此时，可按照下述步骤对图4中的各元素进行扩展：

1、依次针对每个元素，让该元素在水平方向上向左进行扩展尝试，直至该元素与其它元素和/或所述元素框架发生接触；

1.1、将元素先向左扩展一个网格，扩展后的元素水平方向位置为：-1，宽度为：+1；

1.2、对1.1中的元素进行边界判定，判断是否碰撞到左侧边界，如果发生碰撞，则将元素恢复至1.1扩展前的状态；

1.3、将1.1中的元素和其他元素再进行碰撞检测，判断元素之间是否产生重叠，如果发生重叠，则将元素恢复至1.1扩展前的状态；

1.4、若1.2和1.3中均无发生碰撞，则再次执行1下的各步骤，直至该元素与其它元素和/或所述元素框架发生接触；

2、在所有元素都经过1步骤后，依次针对每个元素，让该元素在水平方向上向右进行扩展尝试，直至该元素与其它元素和/或所述元素框架发生接触；

2.1、将元素向右扩展一步，扩展后的元素在水平方向位置为：，宽度为：/>+1；

2.2、将2.1中的元素进行边界判定，判断是否碰撞到右侧边界，如果发生碰撞，则将元素恢复至2.1扩展前的状态；

2.3、将2.1中的元素和其他元素再进行碰撞检测，判断元素之间是否产生重叠，如果发生重叠，则将元素恢复至2.1扩展前的状态；

2.4、若2.2和2.3中均无发生碰撞，则再次执行2下的各步骤，直至该元素与其它元素和/或所述元素框架发生接触；

3、在所有元素都经过2步骤后，依次针对每个元素，让该元素在竖直方向上向上进行扩展尝试，直至该元素与其它元素和/或所述元素框架发生接触；

3.1、将元素先向上扩展一步，扩展后的元素在竖直方向位置为：-1，高度为：+1；

3.2、将3.1中的元素进行边界判定，判断是否碰撞到顶部边界，如果发生碰撞，则将元素恢复至3.1扩展前的状态；

3.3、将3.1中的元素和其他元素再进行碰撞检测，判断元素之间是否产生重叠，如果发生重叠，则将元素恢复至3.1扩展前的状态；

3.4、若3.2和3.3中均无发生碰撞，则再次执行3下的各步骤，直至该元素与其它元素和/或所述元素框架发生接触；

4、在所有元素都经过3步骤后，依次针对每个元素，让该元素在竖直方向上向下进行扩展尝试，直至该元素与其它元素和/或所述元素框架发生接触；

4.1、将元素向下扩展一步，扩展后的元素在垂直方向位置为：，高度为：/>+1；

4.2、将4.1中的元素进行边界判定，判断是否碰撞到底部边界，如果发生碰撞，则将元素恢复至4.1扩展前的状态；

4.3、将4.1中的元素和其他元素再进行碰撞检测，判断元素之间是否产生重叠，如果发生重叠，则将元素恢复至4.1扩展前的状态；

4.4、若4.2 和4.3中均无发生碰撞，则继续执行4步骤，直至该元素与其它元素和/或所述元素框架发生接触。

经过上述步骤，便能够完成对目标画布中各元素在元素框架内的扩展。

S106：根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

在经过步骤S104的扩展后，各元素的大小和位置均会发生改变，根据扩展后的各元素的大小和位置，重新将各元素排列在目标画布中，便能够完成对画布中元素的布局。仍以图4为例，在图4中的各元素经过步骤S104中的方式进行扩展后，便能够得到如图5所示的元素布局。

在采用本说明书提供的画布元素布局方法，对网格画布中的元素进行布局时，可在确定目标画布中各元素的大小和位置后，进一步确定出包含各元素的元素框架；随后，可在元素框架内，依次对每个元素进行扩展，直到元素与其他元素或元素框架发生接触；最终以扩展后的大小和位置排列各元素，完成对网格画布中元素的布局。相比传统的布局方法，本方法能够无需大量依赖用户的自主决定，可自适应地对画布中的元素进行布局。这种方式能够边界、快速地完成画布中元素地布局，使用户无需过多关注画布中元素的位置关系，可直接使用或者在此基础上微调，并且可和更多的布局约束要求结合，产生更多的布局效果。

以上是本说明书提供的画布元素布局方法，基于同样的思路，本说明书还提供了相应的画布元素布局装置，如图6所示。

图6为本说明书提供的一种画布元素布局装置示意图，具体包括：

获取模块200，用于获取目标画布，并确定所述目标画布中各元素的大小和位置；

确定模块202，用于根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；

扩展模块204，用于依次针对每个元素，对该元素进行扩展，直到该元素与其它元素和/或所述元素框架发生接触；

布局模块206，用于根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

可选地，所述获取模块200，具体用于针对所述目标画布中的每个元素，确定该元素的高度与宽度，作为该元素的大小，并确定该元素左上角顶点距画布原点的水平距离与竖直距离，作为该元素的位置。

可选地，所述确定模块202，具体用于在所述目标画布中确定包含所有元素且面积最小的元素框架。

可选地，所述各元素的形状与所述元素框架的形状均为矩形。

可选地，所述装置还包括排序模块208，具体用于根据所述各元素的位置，对所述各元素按照位置从上到下、从左到右的顺序进行排序，得到所述各元素的位置顺序；

所述扩展模块204，具体用于按照所述各元素的位置顺序，依次针对每个元素，对该元素进行扩展。

可选地，所述扩展模块204，具体用于针对预设的每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动，并相应延长与该元素在该方向上的边连接的其他边，直到该元素在该方向上的边与其他元素的边和/或元素框架的边界发生接触。

可选地，预设的方向包括上、下、左、右；

所述扩展模块204，具体用于按照左、右、上、下的顺序，依次针对每个方向，在该方向下依次针对每个元素，将该元素在该方向上的边沿该方向移动。

本说明书还提供了一种计算机可读存储介质，该存储介质存储有计算机程序，计算机程序可用于执行上述图1提供的画布元素布局方法。

本说明书还提供了图7所示的电子设备的示意结构图。如图7所述，在硬件层面，该电子设备包括处理器、内部总线、网络接口、内存以及非易失性存储器，当然还可能包括其他业务所需要的硬件。处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，以实现上述图1所述的画布元素布局方法。当然，除了软件实现方式之外，本说明书并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

对于一个技术的改进可以很明显地区分是硬件上的改进（例如，对二极管、晶体管、开关等电路结构的改进）还是软件上的改进（对于方法流程的改进）。然而，随着技术的发展，当今的很多方法流程的改进已经可以视为硬件电路结构的直接改进。设计人员几乎都通过将改进的方法流程编程到硬件电路中来得到相应的硬件电路结构。因此，不能说一个方法流程的改进就不能用硬件实体模块来实现。例如，可编程逻辑器件（ProgrammableLogic Device, PLD）（例如现场可编程门阵列（Field Programmable Gate Array，FPGA））就是这样一种集成电路，其逻辑功能由用户对器件编程来确定。由设计人员自行编程来把一个数字系统“集成”在一片PLD上，而不需要请芯片制造厂商来设计和制作专用的集成电路芯片。而且，如今，取代手工地制作集成电路芯片，这种编程也多半改用“逻辑编译器（logic compiler）”软件来实现，它与程序开发撰写时所用的软件编译器相类似，而要编译之前的原始代码也得用特定的编程语言来撰写，此称之为硬件描述语言（HardwareDescription Language，HDL），而HDL也并非仅有一种，而是有许多种，如ABEL（AdvancedBoolean Expression Language）、AHDL（Altera Hardware Description Language）、Confluence、CUPL（Cornell University Programming Language）、HDCal、JHDL（JavaHardware Description Language）、Lava、Lola、MyHDL、PALASM、RHDL（Ruby HardwareDescription Language）等，目前最普遍使用的是VHDL（Very-High-Speed IntegratedCircuit Hardware Description Language）与Verilog。本领域技术人员也应该清楚，只需要将方法流程用上述几种硬件描述语言稍作逻辑编程并编程到集成电路中，就可以很容易得到实现该逻辑方法流程的硬件电路。

控制器可以按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该（微）处理器执行的计算机可读程序代码（例如软件或固件）的计算机可读介质、逻辑门、开关、专用集成电路（Application Specific Integrated Circuit，ASIC）、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20 以及Silicone Labs C8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本说明书时可以把各单元的功能在同一个或多个软件和/或硬件中实现。

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

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

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

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

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

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

本说明书可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本说明书，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

以上所述仅为本说明书的实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书可以有各种更改和变化。凡在本说明书的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (7)

1.一种画布元素布局方法，其特征在于，包括：

获取目标画布，并确定所述目标画布中各元素的大小和位置；

根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；

根据所述各元素的位置，对所述各元素按照位置从上到下、从左到右的顺序进行排序，得到所述各元素的位置顺序；

按照左、右、上、下的顺序，依次针对每个方向，在该方向下按照所述各元素的位置顺序，依次针对每个元素，将该元素在该方向上的边沿该方向移动，并相应延长与该元素在该方向上的边连接的其他边，直到该元素在该方向上的边与其他元素的边和/或元素框架的边界发生接触；

根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

2.如权利要求1所述的方法，其特征在于，确定所述目标画布中各元素的大小和位置，具体包括：

针对所述目标画布中的每个元素，确定该元素的高度与宽度，作为该元素的大小，并确定该元素左上角顶点距画布原点的水平距离与竖直距离，作为该元素的位置。

3.如权利要求1所述的方法，其特征在于，在所述目标画布中确定包含所述各元素的元素框架，具体包括：

在所述目标画布中确定包含所有元素且面积最小的元素框架。

4.如权利要求1所述的方法，其特征在于，所述各元素的形状与所述元素框架的形状均为矩形。

5.一种画布元素布局装置，其特征在于，包括：

获取模块，用于获取目标画布，并确定所述目标画布中各元素的大小和位置；

确定模块，用于根据所述各元素的大小和位置，在所述目标画布中确定包含所述各元素的元素框架；

排序模块，用于根据所述各元素的位置，对所述各元素按照位置从上到下、从左到右的顺序进行排序，得到所述各元素的位置顺序；

扩展模块，用于按照左、右、上、下的顺序，依次针对每个方向，在该方向下按照所述各元素的位置顺序，依次针对每个元素，将该元素在该方向上的边沿该方向移动，并相应延长与该元素在该方向上的边连接的其他边，直到该元素在该方向上的边与其他元素的边和/或元素框架的边界发生接触；

布局模块，用于根据扩展后的所述各元素大小和位置，重新将所述各元素排列在所述目标画布中。

6.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述权利要求1~4任一项所述的方法。

7.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现上述权利要求1~4任一项所述的方法。