[发明专利]元素排布方法、装置、计算机可读存储介质及设备

说明书

本发明提供一种元素排布方法、元素排布装置、计算机可读存储介质及电子设备；涉及UI设计技术领域。该方法包括：根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系；其中，第一图层信息包括各元素的第一尺寸信息和第一位置信息，第一画布信息包括第一画布的尺寸信息和位置信息；根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息；其中，第二图层信息包括各元素的第二尺寸信息和第二位置信息，第二画布信息包括第二画布的尺寸信息和位置信息；根据第二图层信息将各元素排布于第二画布中。在一定程度上克服人工成本较高且效率较低的问题，降低人工成本，提升元素排布效率。

技术领域

本发明涉及UI设计技术领域，具体而言，涉及一种元素排布方法、元素排布装置、计算机可读存储介质及电子设备。

背景技术

应用软件通常都需要设计师设计用户界面，以便于用户通过该用户界面与设备实现交互。而一个应用软件通常需要应用于多种尺寸的设备，如，平板电脑、手机等，设计师通常需要针对各尺寸对用户界面中的元素进行手动调整，以使得应用软件能够适用于上述的多种尺寸的设备。但是，这样会存在人工成本较高且效率较低的问题。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本发明的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本发明的目的在于提供一种元素排布方法、元素排布装置、计算机可读存储介质及电子设备，在一定程度上克服人工成本较高且效率较低的问题，降低人工成本，提升元素排布效率。

本发明的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本发明的实践而习得。

根据本发明的第一方面，提供一种元素排布方法，包括：

根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系；其中，第一图层信息包括各元素的第一尺寸信息和各元素的第一位置信息，第一画布信息包括第一画布的尺寸信息和第一画布的位置信息；

根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息；其中，第二图层信息包括各元素的第二尺寸信息和各元素的第二位置信息，第二画布信息包括第二画布的尺寸信息和第二画布的位置信息；

根据第二图层信息将各元素排布于第二画布中。

在本发明的一种示例性实施例中，各元素的第一尺寸信息和各元素的第二尺寸信息均包括各元素的宽和高，第一尺寸信息中各元素的宽和高与第二尺寸信息中各元素的宽和高不同；各元素的第一位置信息和各元素的第二位置信息均包括各元素的坐标，第一位置信息中各元素的坐标与第二位置信息中各元素的坐标不同。

在本发明的一种示例性实施例中，该元素排布方法还可以包括以下步骤：

根据第一尺寸信息中各元素的宽和高计算各元素的面积，作为第一尺寸信息中的内容。

在本发明的一种示例性实施例中，相对位置关系包括贴四边元素、贴三边元素、贴两边元素、贴一边元素和悬浮元素中至少一种。

在本发明的一种示例性实施例中，根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息的方式具体可以为：

根据相对位置关系对元素进行分类，并计算分类结果中各类别对应的元素调整比例；

根据元素调整比例、第一图层信息和第二画布信息确定第二图层信息。

在本发明的一种示例性实施例中，该元素排布方法还可以包括以下步骤：

若根据元素调整比例调整的元素溢出第二画布，则对该元素对应的元素调整比例进行调整，直到检测到该元素未溢出第二画布。