CN110780872B - 元素排布方法、装置、计算机可读存储介质及设备 - Google Patents

Abstract

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

Description

元素排布方法、装置、计算机可读存储介质及设备

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在本发明的一种示例性实施例中，第一图层信息还包括各元素间的层级关系，根据第二图层信息将各元素排布于第二画布中的方式具体可以为：

对各元素进行调整，以使得各元素与第二图层信息相对应；

将调整后的各元素按照层级关系叠加至第二画布中。

根据本发明的第二方面，提供一种元素排布装置，包括相对位置关系确定单元、图层信息确定单元以及元素排布单元，其中：

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

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

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

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

在本发明的一种示例性实施例中，该元素排布装置还可以包括面积计算单元，其中：

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

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

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

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

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

在本发明的一种示例性实施例中，该元素排布装置还可以包括比例调整单元，其中：

比例调整单元，用于当根据元素调整比例调整的元素溢出第二画布时，对该元素对应的元素调整比例进行调整，直到检测到该元素未溢出第二画布。

在本发明的一种示例性实施例中，第一图层信息还包括各元素间的层级关系，元素排布单元根据第二图层信息将各元素排布于第二画布中的方式具体可以为：

元素排布单元对各元素进行调整，以使得各元素与第二图层信息相对应；

元素排布单元将调整后的各元素按照层级关系叠加至第二画布中。

根据本发明的第三方面，提供一种电子设备，包括：处理器；以及存储器，用于存储所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行上述任意一项所述的方法。

根据本发明的第四方面，提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述任意一项所述的方法。

本发明示例性实施例可以具有以下部分或全部有益效果：

在本发明的一示例实施方式所提供的元素排布方法中，可以根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系；其中，第一图层信息包括各元素的第一尺寸信息(如，元素的宽和高)和各元素的第一位置信息(如，元素的坐标)，第一画布信息包括第一画布的尺寸信息和第一画布的位置信息；根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息；其中，第二图层信息包括各元素的第二尺寸信息和各元素的第二位置信息，第二画布信息包括第二画布的尺寸信息和第二画布的位置信息；根据第二图层信息将各元素排布于第二画布中。依据上述方案描述，本发明一方面能够在一定程度上克服人工成本较高且效率较低的问题，降低人工成本，提升元素排布效率，进而提升制图效率；另一方面，能够根据原画布中的元素位置和尺寸自动确定出元素在新画布中的位置和尺寸，以使得软件能够实现界面自适应，提升元素排布的自动化程度。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了可以应用本发明实施例的一种元素排布方法及元素排布装置的示例性系统架构的示意图；

图2示出了适于用来实现本发明实施例的电子设备的计算机系统的结构示意图；

图3示意性示出了根据本发明的一个实施例的元素排布方法的流程图；

图4示意性示出了根据本发明的另一个实施例的元素排布方法的流程图；

图5示意性示出了根据本发明的一个实施例的画布与元素的示意图；

图6示意性示出了根据本发明的一个实施例的元素与画布的相对位置关系的示意图；

图7示意性示出了根据本发明的一个实施例确定第一画布中元素在第二画布中位置的示意图；

图8示意性示出了根据本发明的一个实施例中的元素排布装置的结构框图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本发明将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。在下面的描述中，提供许多具体细节从而给出对本发明的实施方式的充分理解。然而，本领域技术人员将意识到，可以实践本发明的技术方案而省略所述特定细节中的一个或更多，或者可以采用其它的方法、组元、装置、步骤等。在其它情况下，不详细示出或描述公知技术方案以避免喧宾夺主而使得本发明的各方面变得模糊。

此外，附图仅为本发明的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

图1示出了可以应用本发明实施例的一种元素排布方法及元素排布装置的示例性应用环境的系统架构的示意图。

如图1所示，系统架构100可以包括终端设备101、102、103中的一个或多个，网络104和服务器105。网络104用以在终端设备101、102、103和服务器105之间提供通信链路的介质。网络104可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。终端设备101、102、103可以是具有显示屏的各种电子设备，包括但不限于台式计算机、便携式计算机、智能手机和平板电脑等等。应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。比如服务器105可以是多个服务器组成的服务器集群等。

本发明实施例所提供的元素排布方法一般由服务器105执行，相应地，元素排布装置一般设置于服务器105中。但本领域技术人员容易理解的是，本发明实施例所提供的元素排布方法也可以由终端设备101、102、103执行，相应的，元素排布装置也可以设置于终端设备101、102、103中，本示例性实施例中对此不做特殊限定。举例而言，在一种示例性实施例中，服务器105可以根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系，并根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息，以及根据第二图层信息将各元素排布于第二画布中。

图2示出了适于用来实现本发明实施例的电子设备的计算机系统的结构示意图。

需要说明的是，图2示出的电子设备的计算机系统200仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图2所示，计算机系统200包括中央处理单元(CPU)201，其可以根据存储在只读存储器(ROM)202中的程序或者从存储部分208加载到随机访问存储器(RAM)203中的程序而执行各种适当的动作和处理。在RAM 203中，还存储有系统操作所需的各种程序和数据。CPU201、ROM 202以及RAM 203通过总线204彼此相连。输入/输出(I/O)接口205也连接至总线204。

以下部件连接至I/O接口205：包括键盘、鼠标等的输入部分206；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分207；包括硬盘等的存储部分208；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分209。通信部分209经由诸如因特网的网络执行通信处理。驱动器210也根据需要连接至I/O接口205。可拆卸介质211，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器210上，以便于从其上读出的计算机程序根据需要被安装入存储部分208。

特别地，根据本发明的实施例，下文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分209从网络上被下载和安装，和/或从可拆卸介质211被安装。在该计算机程序被中央处理单元(CPU)201执行时，执行本申请的方法和装置中限定的各种功能。

以下对本发明实施例的技术方案进行详细阐述：

目前，在制作不同尺寸的设计图时需要设计师手动重新设计、放置元素；或者，在制作用户界面时需要通过工程师对各个元素设置一系列规则以适配不同的尺寸。但是，通过设计师重新放置元素或工程师对各个元素设置规则会造成人工成本较高且制图效率较低的问题，并且，针对适用于不同尺寸画布的设计图进行多次设计会造成重复性劳动的问题。

基于上述一个或多个问题，本示例实施方式提供了一种元素排布方法。该元素排布方法可以应用于上述服务器105，也可以应用于上述终端设备101、102、103中的一个或多个，本示例性实施例中对此不做特殊限定。参考图3所示，该元素排布方法可以包括以下步骤S310至步骤S330：

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

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

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

下面，对于本示例实施方式的上述步骤进行更加详细的说明。

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

本示例实施方式中，第一画布中可以叠加多个图层，每个图层中可以包括一个或多个元素，本发明的实施例不作限定。

本示例实施方式中，画布指的是设计图或用户界面的可视区域。

本示例实施方式中，元素可以指文字、图形、图片以及表格等，元素可以分布于各个图层中。此外，需要说明的是，设计图或用户界面是由多个元素按照前后顺序一层一层的叠放在一起组合构成的，每一层即为一图层。另外，需要说明的是，本发明实施例中的元素可以指图片。

本示例实施方式中，用户界面也可以称为UI(user interface)界面，意为人与系统之间的界面，指用户和某些系统进行交互的方法的集合。另一方面，UI界面是指由代码构成的结构化界面，包括但不限于由超文本标记语言结合层叠样式表实现的界面，与设计图源文件相同，UI界面也包含各个元素及其位置、尺寸大小等信息。其中，需要说明的是，超文本标记语言(Hyper Text Markup Language，HTML)是标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言，用于进行网页制作。此外，超文本是指页面内可以包含图片、链接、音乐以及程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括头部分和主体部分，其中，头部分提供的是网页信息，主体部分提供的是网页内容。层叠样式表(Cascading Style Sheets，CSS)是一种用于表现HTML或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。此外，CSS还能够对网页中元素位置的排版进行像素级精确控制，具有对网页对象和模型样式编辑的能力。

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

本示例实施方式中，该元素排布方法还可以包括以下步骤：

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

可见，实施该可选的实施方式，能够通过确定出面积增加第一尺寸信息所包含的内容，以使得根据包含第一尺寸信息的第一图层信息确定出第二图层信息的效率提升。

本示例实施方式中，该元素排布方法还可以包括以下步骤：

读取并解析图源文件以获得第一图层信息和所述第一画布信息；或者，

读取用户界面对应的代码以获得第一图层信息和第一画布信息。

本示例实施方式中，图源文件可以为设计图源文件也可以为用户界面图源文件。其中，设计图源文件是设计人员通过Photoshop(PS)或Sketch等设计软件设计的源文件，源文件中包含各图层的元素及其位置、尺寸大小等信息。其中，需要说明的是，PS是一种图像处理软件，主要处理以像素构成的数据图像；Sketch是一种矢量绘图软件，矢量绘图是进行网页、图标以及界面设计较为便捷的方式，除了矢量编辑功能之外，Sketch还具有基本的位图工具，如，模糊、色彩校正。

本示例实施方式中，根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系的方式具体可以为：将元素的各个角坐标分别与对应的第一画布的角坐标进行比对，以确定元素与第一画布的相对位置关系。例如，目标元素的左上角顶点坐标为(0，0)，第一画布的左上角顶点坐标也为(0，0)，而目标元素的右上角顶点坐标与第一画布的右上角顶点坐标不同，且目标元素的右下角顶点坐标与第一画布的右下角顶点坐标不同，且目标元素的左下角顶点坐标与第一画布的左下角顶点坐标不同，那么，可以得知，目标元素与第一画布的相对位置关系为贴两边。

本示例实施方式中，该元素排布方法还可以包括以下步骤：

以第一画布的左上角顶点/左下角顶点/右上角顶点/右下角顶点为原点创建坐标系，本发明的实施例不作限定。

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

本示例实施方式中，第二画布中可以叠加多个图层，每个图层中可以包括一个或多个元素，本发明的实施例不作限定。

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

根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息的方式具体可以为：

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

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

进一步地，该元素排布方法还可以包括以下步骤：

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

本示例实施方式中，每个类别中的元素对应的相对位置关系相同。

可见，实施该可选的实施方式，能够在元素溢出时，通过调整比例的方式，对溢出元素的调整比例进行进一步调整，以便确定出新的设计图或新的用户界面，提升制图的自动化程度。

在步骤S330中，根据第二图层信息将各元素排布于第二画布中。

本示例实施方式中，第二画布信息可以与第一画布信息相同，也可以与第一画布信息不同，本发明的实施例不作限定。

本示例实施方式中，该元素排布方法还可以包括以下步骤：

根据经过元素排布后的第二画布生成应用于应用程序的用户界面。

本示例实施方式中，第一图层信息还包括各元素间的层级关系，根据第二图层信息将各元素排布于第二画布中的方式具体可以为：

对各元素进行调整，以使得各元素与第二图层信息相对应；

将调整后的各元素按照层级关系叠加至第二画布中。

本示例实施方式中，对各元素进行调整，以使得各元素与第二图层信息相对应，可以理解为，将第一尺寸信息和第一位置信息的元素调整为第二尺寸信息和第二位置信息。此外，层级关系用于表征叠加图层的先后顺序。

可见，实施该可选的实施方式，能够根据原画布中的元素位置和尺寸自动确定出元素在新画布中的位置和尺寸，以使得软件能够实现界面自适应，提升元素排布的自动化程度。

可见，实施图3所示的元素排布方法，能够在一定程度上克服人工成本较高且效率较低的问题，降低人工成本，提升元素排布效率，进而提升制图效率；以及，能够根据原画布中的元素位置和尺寸自动确定出元素在新画布中的位置和尺寸，以使得软件能够实现界面自适应，提升元素排布的自动化程度。

请参阅图4，图4示意性示出了根据本发明的另一个实施例的元素排布方法的流程图。如图4所示，另一个实施例的元素排布方法可以包括以下步骤S410～步骤S470：

步骤S410：输入设计图或用户界面。

步骤S420：从设计图源文件或用户界面对应的代码中读取第一图层信息和第一画布信息。

步骤S430：根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系。

步骤S440：输入第二画布信息。

步骤S450：根据第一图层信息、相对位置关系和第二画布信息确定第二图层信息。

步骤S460：根据第二图层信息将各元素排布于第二画布中，得到设计图或用户界面。

步骤S470：输出设计图或用户界面。

下面，对于本示例实施方式的上述步骤进行更加详细的说明。

具体地，可以先输入需要调整的设计图或用户界面，以使得终端或服务器从设计图源文件或用户界面对应的代码中读取第一图层信息和第一画布信息；其中，关于第一图层信息和第一画布信息的相关释义参见前述实施例，此处不再赘述。进而，可以根据第一图层信息和第一画布信息确定各元素与第一画布的相对位置关系。此时，可以通过输入的第二画布信息、第一图层信息以及相对位置信息确定第二图层信息，以根据第二图层信息将各元素排布与第二画布中，以根据排布后的第二画布得到设计图或用户界面并输出。其中，需要说明的是，从设计图源文件或用户界面对应的代码中读取图层信息，与上述可选实施方式中的“读取并解析图源文件以获得第一图层信息和所述第一画布信息；或者，读取用户界面对应的代码以获得第一图层信息和第一画布信息”等同。

请参阅图5，图5示意性示出了根据本发明的一个实施例的画布与元素的示意图，如图5所示，可以将画布500的左上角顶点确定为坐标原点(0，0)，进而可以确定出画布500的右上角顶点坐标(0，200)、左下角顶点坐标(100，0)以及右下角顶点坐标(100，200)；其中，横轴为x轴，纵轴为y轴。

具体地，画布500中包括悬浮元素501、贴两边元素502和贴四边元素503。悬浮元素501、贴两边元素502和贴四边元素503分别存在与一图层上，故，画布500中存在3个图层，各图层中分别包括了悬浮元素501、贴两边元素502和贴四边元素503，此外，3个图层之间存在层级关系，该层级关系可以为：悬浮元素501所在层级为第一层，贴两边元素502所在层级为第二层，贴四边元素503所在层级为第三层；或者，悬浮元素501所在层级为第三层，贴两边元素502所在层级为第一层，贴四边元素503所在层级为第二层；或者，悬浮元素501所在层级为第二层，贴两边元素502所在层级为第三层，贴四边元素503所在层级为第一层，本发明的实施例不作限定。

其中，如图5所示，悬浮元素501的任一边未与画布500的任一边贴合，故，该元素被称为悬浮元素。贴两边元素502的右下角与画布500的右下角重合，贴两边元素502中存在两个边与画布500的两个边贴合，但是其他任一顶角未与画布500其他任一顶角重合，故，贴两边元素502中存在两条边与画布，该元素被称为贴两边元素。贴四边元素503的四个顶角分别与画布500的四个顶角重合，且贴四边元素503的四个边分别与画布500的四个边重合，故，该元素被称为贴四边元素。此外，在图5中示意性示出了悬浮元素501的左上角坐标(20，15)以及贴两边元素502的右上角坐标(30，200)。需要说明的是，在实际的确定元素与画布之间相对位置关系的方式是根据元素的角坐标和画布的角坐标确定得到的。另外，画布500可以为第一画布也可以为第二画布，本发明的实施例不作限定。

请参阅图6，图6示意性示出了根据本发明的一个实施例的元素与画布的相对位置关系的示意图。如图6所示，画布600中包括6个图层，每个图层中展示了对应的元素，即，6个元素。在画布600中，6个元素分别代表了6种不同的元素与画布之间的相对位置关系，具体为：贴三边元素601、贴两边元素602、贴一边元素603、悬浮元素604、贴两边元素605以及贴四边元素606。

其中，需要说明的是，贴两边元素602和贴两边元素605不同，具体表现为，贴两边元素602是左右两个边(即，相对的两个边)分别与画布600的左右两个边相贴合，而贴两边元素605是右侧的边和下侧的边(即，相邻的两个边)分别与画布600的右侧的边和下侧的边相贴合。另外，贴三边元素601由于上侧的边以及左右两侧的边分别与画布600的上侧的边以及左右两侧的边贴合，而下侧的边与画布600下侧的边不存在重合部分，故，该元素被称为贴三边元素；贴一边元素603由于左侧的边与画布600左侧的边相贴合，而其他三个边与画布600的其他三个边均被不存在重合部分，故，该元素被称为贴一边元素；悬浮元素604与图5中的悬浮元素501等同，贴四边元素606与图5中的贴四边元素503等同。另外，画布600可以为第一画布也可以为第二画布，本发明的实施例不作限定。

此外，综合图5和图6所示的画布、元素以及相对位置关系，可以得出，贴一边元素可以理解为该元素的任意一个边与画布的任意一个边贴合；贴两边元素可以理解为该元素的任意两个边与画布的任意两个边贴合；贴三边元素可以理解为该元素的任意两个边与画布的任意三个边贴合；贴四边元素可以理解为该元素的各边分别与画布的各边贴合；悬浮元素可以理解为该元素的不存在与画布贴合的边。

请参阅图7，图7示意性示出了根据本发明的一个实施例确定第一画布中元素在第二画布中位置的示意图。如图7所示，确定第一画布中元素在第二画布中位置的算法存在4种。图7中的画布700可以理解为第一画布，画布710可以理解为第二画布。

具体地，在算法1中，计算画布700中的元素701在画布710中的位置的方式具体可以为：确定元素701的左侧的边距离画布700的左侧的边的距离A，以及元素701的右侧的边距离画布700的右侧的边的距离B，并计算A/B。若元素701的左侧的边距离画布710的左侧的边的距离A’与元素701的右侧的边距离画布710的右侧的边的距离B’的比值与A/B相等，即A’/B’＝A/B，则表示元素701在画布710中的位置确定完成；其中，A+B+元素宽＝画布宽。此外，可选的，若A为元素701的上侧的边距离画布700的上侧的边的距离，B为元素701的下侧的边距离画布700的下侧的边的距离，A’为元素710的上侧的边距离画布710的上侧的边的距离，B’为元素710的下侧的边距离画布710的下侧的边的距离，也可以通过A’/B’＝A/B确定出元素701在画布710中的位置，本发明的实施例不作限定。

具体地，在算法2中，计算画布700中的元素701在画布710中的位置的方式具体可以为：确定元素701的右侧的边距离画布700的右侧的边的距离B、画布700的宽C以及画布710的宽C’，若元素701的右侧的边距离画布700的右侧的边的距离B与元素701的右侧的边距离画布710的右侧的边的距离B’的比值与C/C’相等，即B/B’＝C/C’，则表示元素701在画布710中的位置确定完成。此外，可选的，若B为元素701的上侧(或下侧)的边距离画布700的上侧(或下侧)的边的距离，B’为元素701的上侧(或下侧)的边距离画布710的上侧(或下侧)的边的距离，C为画布700的高，C’为画布710的高，也可以通过A’/B’＝A/B确定出元素701在画布710中的位置，本发明的实施例不作限定。

具体地，在算法3中，计算画布700中的元素701在画布710中的位置的方式具体可以为：若画布700中元素701为贴两边元素(即，下侧的边和右侧的边)，那么，使得元素701在画布710的相同位置即可，即，元素701在画布710中也为贴两边元素(即，下侧的边和右侧的边)。

具体地，在算法4中，计算画布700中的元素701在画布710中的位置的方式具体可以为：若元素701溢出画布700，则确定元素701溢出画布700的边长D，并确定画布700的宽C以及画布710的宽C’，若元素701溢出画布700的边长D和画布700的宽C的比值(即，D/C)与元素701溢出画布710的边长D’的比值和画布710的宽C’的比值(即，D’/C’)相等，则表示元素701在画布710中的位置确定完成。其中，需要说明的是，若元素在第一画布中溢出，则元素在第二画布中也可溢出；若元素在第一画布中未溢出，而确定出的元素在第二画布中的位置使得元素在第二画布中溢出，则需要对元素调整比例进行进一步调整，直到检测到元素未溢出第二画布为止。另外，元素溢出画布的方式可以包括从画布的上侧、下侧、左侧和右侧中至少一侧的边溢出。

可见，结合图4～图7实施本发明的实施例，能够降低制图成本，通过本发明的实施例，设计师仅需制作一个尺寸的设计图便可以得到其他尺寸的设计图，此外，开发人员只需要写一套UI界面代码，本发明的实施例便可以自动适配其他尺寸，降低了人工成本，提升了制图效率；以及，本发明的实施例还能够支持界面自适应，由于不同的终端屏幕尺寸比例不同、不同的使用场景所需图的尺寸也不同，本发明的实施例根据原设计图或UI界面可以自动计算出各元素的自适应位置，从而在不同尺寸的界面上自动放置元素以适配，提升了元素排布的自动化程度。

进一步的，本示例实施方式中，还提供了一种元素排布装置。该元素排布装置可以应用于服务器或终端设备。参考图8所示，该元素排布装置800可以包括相对位置关系确定单元801、图层信息确定单元802以及元素排布单元803，其中：

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

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

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

其中，各元素的第一尺寸信息和各元素的第二尺寸信息均包括各元素的宽和高，第一尺寸信息中各元素的宽和高与第二尺寸信息中各元素的宽和高不同；各元素的第一位置信息和各元素的第二位置信息均包括各元素的坐标，第一位置信息中各元素的坐标与第二位置信息中各元素的坐标不同。

其中，相对位置关系包括贴四边元素、贴三边元素、贴两边元素、贴一边元素和悬浮元素中至少一种。

可见，实施图8所示的元素排布装置，能够在一定程度上克服人工成本较高且效率较低的问题，降低人工成本，提升元素排布效率，进而提升制图效率；以及，能够根据原画布中的元素位置和尺寸自动确定出元素在新画布中的位置和尺寸，以使得软件能够实现界面自适应，提升元素排布的自动化程度。

在本发明的一种示例性实施例中，该元素排布装置还可以包括面积计算单元(未图示)，其中：

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

可见，实施该示例性实施例，能够通过确定出面积增加第一尺寸信息所包含的内容，以使得根据包含第一尺寸信息的第一图层信息确定出第二图层信息的效率提升。

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

图层信息确定单元802根据相对位置关系对元素进行分类，并计算分类结果中各类别对应的元素调整比例；

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

可见，实施该可选的实施例，能够将相同相对位置关系的元素分为一类，以提升确定出各类别对应的元素调整比例的效率，进而提升制图效率。

在本发明的一种示例性实施例中，该元素排布装置还可以包括比例调整单元(未图示)，其中：

比例调整单元，用于当根据元素调整比例调整的元素溢出第二画布时，对该元素对应的元素调整比例进行调整，直到检测到该元素未溢出第二画布。

可见，实施该可选的实施例，能够在元素溢出时，通过调整比例的方式，对溢出元素的调整比例进行进一步调整，以便确定出新的设计图或新的用户界面，提升制图的自动化程度。

在本发明的一种示例性实施例中，第一图层信息还包括各元素间的层级关系，元素排布单元803根据第二图层信息将各元素排布于第二画布中的方式具体可以为：

元素排布单元803对各元素进行调整，以使得各元素与第二图层信息相对应；

元素排布单元803将调整后的各元素按照层级关系叠加至第二画布中。

可见，实施该可选的实施例，能够根据原画布中的元素位置和尺寸自动确定出元素在新画布中的位置和尺寸，以使得软件能够实现界面自适应，提升元素排布的自动化程度。

应当注意，尽管在上文详细描述中提及了用于动作执行的设备的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本发明的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

由于本发明的示例实施例的元素排布装置的各个功能模块与上述元素排布方法的示例实施例的步骤对应，因此对于本发明装置实施例中未披露的细节，请参照本发明上述的元素排布方法的实施例。

作为另一方面，本申请还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该电子设备执行时，使得该电子设备实现上述实施例中所述的方法。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现，所描述的单元也可以设置在处理器中。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本申请旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

Claims (10)

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

获取第一图层信息和第一画布信息，所述第一画布信息用于表征用户界面的可视化区域；

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

根据所述相对位置关系对各元素进行分类，得到各元素的元素调整比例；其中，不同类别的元素对应的元素调整比例不同，元素的类别包括贴边元素或悬浮元素，所述贴边元素与所述第一画布的至少一个边重合，所述悬浮元素未与所述第一画布的任一边重合；

获取第二画布信息，所述第二画布信息所表征的用户界面的可视化区域与所述第一画布信息所表征的用户界面的可视化区域不同，所述可视化区域不同包括终端屏幕的尺寸比例不同或不同使用场景所需图的尺寸不同；

根据所述第一图层信息、所述元素调整比例和所述第二画布信息确定第二图层信息；其中，所述第二图层信息包括所述各元素的第二尺寸信息和所述各元素的第二位置信息，所述第二画布信息包括第二画布的尺寸信息和所述第二画布的位置信息；

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

2.根据权利要求1所述的方法，其特征在于，所述各元素的第一尺寸信息和所述各元素的第二尺寸信息均包括所述各元素的宽和高，所述第一尺寸信息中所述各元素的宽和高与所述第二尺寸信息中所述各元素的宽和高不同；所述各元素的第一位置信息和所述各元素的第二位置信息均包括所述各元素的坐标，所述第一位置信息中所述各元素的坐标与所述第二位置信息中所述各元素的坐标不同。

3.根据权利要求2所述的方法，其特征在于，还包括：

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

4.根据权利要求1至3中任一项所述的方法，其特征在于，所述贴边元素包括贴四边元素、贴三边元素、贴两边元素、贴一边元素中至少一种。

5.根据权利要求1至3中任一项所述的方法，其特征在于，还包括：

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

6.根据权利要求1至3中任一项所述的方法，其特征在于，所述第一图层信息还包括所述各元素间的层级关系，根据所述第二图层信息将所述各元素排布于所述第二画布中，包括：

对所述各元素进行调整，以使得所述各元素与所述第二图层信息相对应；

将调整后的所述各元素按照所述层级关系叠加至所述第二画布中。

7.一种元素排布装置，其特征在于，包括：

相对位置关系确定单元，用于获取第一图层信息和第一画布信息，所述第一画布信息用于表征用户界面的可视化区域；

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

图层信息确定单元，用于根据所述相对位置关系对各元素进行分类，得到各元素的元素调整比例；其中，不同类别的元素对应的元素调整比例不同，元素的类别包括贴边元素或悬浮元素；

获取第二画布信息，所述第二画布信息所表征的用户界面的可视化区域与所述第一画布信息所表征的用户界面的可视化区域不同，所述可视化区域不同包括终端屏幕的尺寸比例不同或不同使用场景所需图的尺寸不同；

根据所述第一图层信息、所述元素调整比例和所述第二画布信息确定第二图层信息；其中，所述第二图层信息包括所述各元素的第二尺寸信息和所述各元素的第二位置信息，所述第二画布信息包括第二画布的尺寸信息和所述第二画布的位置信息；

元素排布单元，用于根据所述第二图层信息将所述各元素排布于所述第二画布中。

8.根据权利要求7所述的装置，其特征在于，所述各元素的第一尺寸信息和所述各元素的第二尺寸信息均包括所述各元素的宽和高，所述第一尺寸信息中所述各元素的宽和高与所述第二尺寸信息中所述各元素的宽和高不同；所述各元素的第一位置信息和所述各元素的第二位置信息均包括所述各元素的坐标，所述第一位置信息中所述各元素的坐标与所述第二位置信息中所述各元素的坐标不同。

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

10.一种电子设备，其特征在于，包括：

处理器；以及

存储器，用于存储所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1-6任一项所述的方法。