CN112230908B - 一种对齐组件的方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请公开了一种对齐组件的方法、装置、设备及存储介质，属于计算机技术领域。所述方法包括：基于多个待对齐组件的数量和类型，从布局模板库中确定包括所述数量个且与所述类型匹配的模板组件的目标布局模板；确定第一区域的宽度和高度、以及多个待对齐组件在第一区域内的位置坐标；将第一区域和多个待对齐组件作为第一整体，基于第一区域的宽度和高度，以及多个待对齐组件在第一区域内的位置坐标，将第一整体的宽高比调整为目标布局模板的宽高比，得到第二整体；根据第二整体和目标布局模板，控制多个待对齐组件对齐。如此，可以根据目标布局模板和第二整体控制待对齐组件自动对齐，避免了用户繁琐的手动操作，提高了对齐精准度。

Description

一种对齐组件的方法、装置、电子设备及存储介质

技术领域

本申请涉及计算机技术领域，特别涉及一种对齐组件的方法、装置、电子设备及存储介质。

背景技术

在进行网页开发或软件开发时，通常需要对网页或软件中的页面进行布局，确定页面中多个组件之间的位置关系，进而将多个组件按照一定的布局进行对齐。其中，组件可以为文本框组件、图片组件、按钮组件等。

相关技术中，通常可以使用布局工具进行页面布局，用户可以拖拽一系列需要的组件至布局工具的页面工作区，对于每一个组件，用户需要提前确定好其在页面工作区的位置，在拖拽的时候手动将其拖到合适的位置上，将所有需要的组件都拖到页面工作区之后，有时还需要修改组件的尺寸，以便可以将这些组件按照一定的方式对齐，形成用户想要的一种页面布局。

但在上述方式中，需要用户手动操作使得组件对齐，操作比较繁琐，另外，由于需要用户通过视觉判断多个组件是否已经对齐，导致对齐精准度较低。

发明内容

本申请实施例提供了一种对齐组件的方法、装置、电子设备及存储介质，可以解决现有技术中对齐组件时需要用户手动操作，过程比较繁琐且对齐精准度较低的问题。所述技术方案如下：

一方面，提供了一种对齐组件的方法，所述方法包括：

基于多个待对齐组件的数量和类型，从布局模板库中确定包括所述数量个且与所述类型匹配的模板组件的目标布局模板；

确定第一区域的宽度和高度、以及所述多个待对齐组件在所述第一区域内的位置坐标，所述第一区域是指能够将所述多个待对齐组件完全包围且面积最小的区域；

将所述第一区域和所述多个待对齐组件作为第一整体，基于所述第一区域的宽度和高度，以及所述多个待对齐组件在所述第一区域内的位置坐标，将所述第一整体的宽高比调整为所述目标布局模板的宽高比，得到第二整体；

根据所述第二整体和所述目标布局模板，控制所述多个待对齐组件对齐。

另一方面，提供了一种对齐组件的装置，所述装置包括：

第一确定模块，用于基于多个待对齐组件的数量和类型，从布局模板库中确定包括所述数量个且与所述类型匹配的模板组件的目标布局模板；

第二确定模块，用于确定第一区域的宽度和高度、以及所述多个待对齐组件在所述第一区域内的位置坐标，所述第一区域是指能够将所述多个待对齐组件完全包围且面积最小的区域；

调整模块，用于将所述第一区域和所述多个待对齐组件作为第一整体，基于所述第一区域的宽度和高度，以及所述多个待对齐组件在所述第一区域内的位置坐标，将所述第一整体的宽高比调整为所述目标布局模板的宽高比，得到第二整体；

控制模块，用于根据所述第二整体和所述目标布局模板，控制所述多个待对齐组件对齐。

另一方面，提供了一种电子设备，所述电子设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由所述处理器加载并执行以实现上述一方面所述的任一项方法的步骤。

另一方面，提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由处理器加载并执行以实现上述一方面所述的任一项方法的步骤。

另一方面，提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述一方面所述的任一项方法的步骤。

本申请实施例提供的技术方案带来的有益效果是：

在对多个待对齐组件进行对齐时，可以基于该多个待对齐组件的数量和类型，从布局模板库中确定目标布局模板，该目标布局模板中包括的模板组件的数量与待对齐组件的数量相同且模板组件的类型与待对齐组件的类型匹配。确定能够将多个待对齐组件完全包围且面积最小的区域为第一区域，确定该第一区域的宽度和高度以及该多个待对齐组件在该第一区域内的位置坐标，将该第一区域和该多个待对齐组件作为第一整体，对第一整体进行缩放，即对第一区域的宽度和高度进行调整，并且对多个待对齐组件在第一区域内的位置坐标进行等比例调整，将第一整体的宽高比调整为目标布局模板的宽高比，得到第二整体，根据第二整体和目标布局模板控制该多个待对齐组件对齐。如此，可以根据待对齐组件匹配目标布局模板，匹配成功后，可以根据目标布局模板和第二整体控制待对齐组件自动对齐，避免了用户繁琐的手动操作，提高了对齐精准度。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是根据一示例性实施例示出的一种对齐组件的方法流程图；

图2是根据一示例性实施例示出的一种页面工作区的示意图；

图3是根据一示例性实施例示出的一种第一区域的示意图；

图4是根据另一示例性实施例示出的一种第一区域的示意图；

图5是根据一示例性实施例示出的一种第二区域的示意图；

图6是根据另一示例性实施例示出的一种第二区域的示意图；

图7是根据一示例性实施例示出的一种第三整体的示意图；

图8是根据一示例性实施例示出的一种尺寸调整后的第三整体的示意图；

图9是根据另一示例性实施例示出的一种第二区域的示意图；

图10是根据另一示例性实施例示出的一种尺寸调整后的目标布局模板的示意图；

图11是根据一示例性实施例示出的一种对齐后的多个待对齐组件的布局示意图；

图12是根据一示例性实施例示出的一种对齐组件的装置的结构示意图；

图13是根据一示例性实施例示出的一种电子设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

首先，对本申请实施例涉及的实施环境予以说明。

本申请实施例涉及的对齐组件的方法可以由电子设备执行。该电子设备可以安装有布局工具，譬如，该布局工具可以为快速原型设计工具。利用该布局工具可以进行页面布局和设计，用户可以将需要的组件拖拽至页面工作区，选择需要进行对齐的组件，然后点击对齐按钮，电子设备可以自动为用户匹配布局模板，并自动根据布局模板中模板组件的布局对待对齐组件进行对齐。作为一种示例，该电子设备可以为平板电脑、笔记本电脑、台式计算机、便携式计算机、手机等等，本申请实施例对此不做限定。

图1是根据一示例性实施例示出的一种对齐组件的方法流程图，以该方法应用于上述实施环境中为例进行说明，该方法可以包括如下几个步骤：

步骤101：基于多个待对齐组件的数量和类型，从布局模板库中确定包括待对齐组件数量个且与待对齐组件类型匹配的模板组件的目标布局模板。

在一些实施例中，布局工具中可以包括组件库和布局模板库，该组件库中包括多个组件，该布局模板库中包括多个布局模板。每个布局模板有对应的布局模板文件，该布局模板文件中可以包括该布局模板的宽度和高度、该布局模板中模板组件的数量和类型以及每个模板组件的模板位置坐标等。

示例性地，布局模板文件可以通过如下代码的格式进行表示：

/>

其中，“image1”表示图片组件1，“type”表示组件的类型，“lable1”表示标签组件1，“top”表示模板组件在布局模板中的上边距，“left”表示模板组件在布局模板中的左边距，“width”表示模板组件或布局模板的宽度，“height”表示模板组件或布局模板的高度，“size”表示布局模板的尺寸。

作为一种示例，在使用过程中，参见图2，在布局工具的页面工作区，可以包括对齐按钮，用户可以将需要的组件拖拽至页面工作区，然后选中想要对齐的多个组件作为待对齐组件，再点击页面工作区的对齐按钮，电子设备检测到该点击操作后，启动对该多个待对齐组件的对齐功能；或者，可以设定时间阈值，当最后一次拖拽操作距离当前时间点的时间大于时间阈值时，可以自动启动对齐功能。启动对多个待对齐组件的对齐功能后，可以确定该多个待对齐组件的数量和类型，并根据该多个待对齐组件的数量和类型，从布局模板库中选择与该多个待对齐组件的数量相同且类型相匹配的模板组件所在的目标布局模板。

作为一种示例，可以获取多个布局模板中每个布局模板的模板组件的数量和类型，确定模板组件数量和类型与待对齐组件的数量和类型均相同的布局模板为目标布局模板。

示例性地，假设确定多个待对齐组件的数量为3个，类型为图片组件和文本框组件，其中图片组件有2个，文本框组件有1个，可以从布局模板库中获取每个布局模板的模板组件的数量和类型，确定包括2个图片模板组件和1个文本框模板组件的布局模板为目标布局模板。

作为一种示例，可以在确定了一个符合条件的目标布局模板后停止寻找，基于该一个目标布局模板进行后续操作；或者，可以确定多个符合条件的布局模板，从中任选一个作为目标布局模板进行后续操作。

步骤102：确定第一区域的宽度和高度、以及多个待对齐组件在该第一区域内的位置坐标，该第一区域是指能够将该多个待对齐组件完全包围且面积最小的区域。

在一些实施例中，可以基于被选中的多个待对齐组件之间的位置关系及每个待对齐组件的宽度和高度，确定第一区域的宽度和高度，并且确定每个待对齐组件在该第一区域内的位置坐标。

作为一种示例，可以确定多个待对齐组件中位于最左边的左边线和位于最右边的右边线，将左边线和右边线之间的距离确定为第一区域的宽度。

示例性地，参见图3，图3中最左边的左边线为第一待对齐组件的左边线，最右边的右边线为第一待对齐组件的右边线，假设该第一待对齐组件的宽度为80，可以确定该第一区域的宽度为80；参见图4，图4中最左边的左边线为第一待对齐组件的左边线，最右边的右边线为第二待对齐组件的右边线，假设第一待对齐组件的宽度为40，第二待对齐组件的宽度为30，且第一待对齐组件和第二待对齐组件之间的左右间距为10，可以确定第一区域的宽度为40+30+10＝80。

作为一种示例，可以确定多个待对齐组件中位于最上边的上边线和位于最下边的下边线，将上边线和下边线之间的距离确定为第一区域的高度。

示例性地，参见图4，图4中最上边的上边线为第一待对齐组件的上边线，最下边的下边线为第一待对齐组件的下边线，假设该第一待对齐组件的高度为80，可以确定该第一区域的高度为80；参见图3，图3中最上边的上边线为第一待对齐组件的上边线，最下边的下边线为第二待对齐组件的下边线，假设第一待对齐组件的高度为40，第二待对齐组件的高度为30，且第一待对齐组件和第二待对齐组件之间的上下间距为10，可以确定第一区域的高度为40+30+10＝80。

作为一种示例，在确定了第一区域之后，可以根据多个待对齐组件在第一区域中的位置，确定该多个待对齐组件在该第一区域内的位置坐标。其中，位置坐标可以为待对齐组件的多个顶点的坐标，也可以用待对齐组件距离第一区域的上边距、左边距、宽度和高度来指示，或者，也可以为其他的能表示待对齐组件的位置的表示方式，本申请实施例对此不做限定。

示例性地，参见图3，图3中包括两个待对齐组件，这两个待对齐组件的布局为上下结构，将第一区域左上角的位置坐标确定为(0,0)，可以确定第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(80,0)(0,40)和(80,40)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,50)、(80,50)、(0,80)和(80,80)。参见图4，图4中包括两个待对齐组件，这两个待对齐组件的布局为左右结构，为另外一种布局方式。将第一区域左上角的位置坐标确定为(0,0)，可以确定第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(40,0)、(0,80)和(40,80)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(50,0)、(80,0)、(50,80)和(80,80)。

步骤103：将第一区域和多个待对齐组件作为第一整体，基于第一区域的宽度和高度，以及多个待对齐组件在第一区域内的位置坐标，将第一整体的宽高比调整为目标布局模板的宽高比，得到第二整体。

获取目标布局模板的宽度和高度，确定目标布局模板的宽高比，将第一整体的宽高比调整为目标布局模板的宽高比，也即是，在调整的过程中，不仅调整第一区域的宽度和高度，多个待对齐组件的宽度和高度以及多个待对齐组件之间的间距也进行等比例调整。

作为一种示例，可以在目标布局模板的布局模板文件中设置调整方式，保持宽度或高度其中一个不变，对另一个进行调整，也可以默认只调整宽度或者只调整高度。在实际实现中，可以通过以下两种实现方式对第一整体的宽高比进行调整。

第一种实现方式：保持第一区域的宽度和多个待对齐组件在第一区域内的位置坐标中的横坐标不变，根据目标布局模板的宽高比，调整第一区域的高度和多个待对齐组件在第一区域内的位置坐标中的纵坐标。

也就是说，对于第一区域及多个待对齐组件，其宽度方向上的任何数据不进行改变，只调整其高度方向上的数据，以使得第一区域的宽高比等于目标布局模板的宽高比。

示例性地，参见图3，图3中第一区域的宽度和高度均为80，第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(80,0)(0,40)和(80,40)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,50)、(80,50)、(0,80)和(80,80)，假设目标布局模板的宽高比为2:1，参见图5，图5为对第一整体进行调整后得到的第二整体，可以确定第二整体中第二区域的宽度为80、高度为40，进而第二区域中第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(80,0)(0,20)和(80,20)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,25)、(80,25)、(0,40)和(80,40)。

第二种实现方式；保持第一区域的高度和多个待对齐组件在第一区域内的位置坐标中的纵坐标不变，根据目标布局模板的宽高比，调整第一区域的宽度和多个待对齐组件在第一区域内的位置坐标中的横坐标。

也就是说，对于第一区域及多个待对齐组件，其高度方向上的任何数据不进行改变，只调整其宽度方向上的数据，以使得第一区域的宽高比等于目标布局模板的宽高比。

示例性地，参见图4，图4中第一区域的宽度和高度均为80，第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(40,0)、(0,80)和(40,80)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(50,0)、(80,0)、(50,80)和(80,80)，假设目标布局模板的宽高比为2:1，参见图6，图6为对第一整体进行调整后得到的第二整体，可以确定第二整体中第二区域的宽度为160、高度为80，进而第二区域中第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(80,0)、(0,80)和(80,80)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别为(100,0)、(160,0)、(100,80)和(160,80)。

步骤104：根据第二整体和目标布局模板，控制多个待对齐组件对齐。

作为一种示例，可以将目标布局模板及所包括的多个模板组件作为第三整体，直接基于第二整体中第二区域的宽度和高度，对第三整体的宽度和高度进行调整，即不仅对目标布局模板的宽度和高度进行调整，使得目标布局模板的宽度和高度分别与第二区域的宽度和高度相同，而且对目标布局模板中的模板组件的位置坐标进行等比例调整，然后直接将第二整体中多个待对齐组件的位置坐标调整为与调整后的目标布局模板中对应的模板组件的位置坐标相同，控制多个待对齐组件对齐。

在一些实施例中，根据第二整体和目标布局模板，控制多个待对齐组件对齐可以包括如下几个实现步骤：

(1)可以将目标布局模板及所包括的多个模板组件作为第三整体，根据第二整体中包括的第二区域的宽度和高度，对第三整体进行尺寸调整，第二区域为对第一区域进行宽高比调整后的区域。

也就是说，将第三整体中目标布局模板的宽度和高度调整为与第二整体中第二区域的宽度和高度分别相同，且第三整体中多个模板组件的模板位置坐标也进行等比例调整。

作为一种示例，可以根据第二区域的宽度和第三整体中目标布局模板的宽度，确定第二整体和第三整体的尺寸比；或者，可以根据第二区域的高度和第三整体中目标布局模板的高度，确定第二整体和第三整体的尺寸比，基于该尺寸比，对第三整体中目标布局模板的宽度和高度进行调整，使得调整后的第三整体中目标布局模板的宽度和高度分别与第二整体中第二区域的宽度和高度相同，也即是，在调整的过程中，不仅调整第三整体中目标布局模板的宽度和高度，对第三整体中多个待对齐组件的宽度和高度及多个待对齐组件之间的间距也进行等比例调整。

示例性地，参见图7，图7为第三整体的示意图，假设第三整体中目标布局模板的宽度和高度分别为40和20，第一模板组件的模板位置坐标包括四个顶点的位置坐标，分别为(10,0)、(30,0)、(10,10)和(30,10)，第二模板组件的模板位置坐标包括四个顶点的位置坐标，分别为(0,10)、(40,10)、(0,20)和(40,20)，假设第二区域的宽度为80、高度为40，可以确定第二区域的宽度和目标布局模板的宽度比为2:1，即第二整体和第三整体的尺寸比为2:1，基于这个尺寸比，对第三整体进行尺寸调整，参见图8，图8为尺寸调整后的第三整体，可以得到尺寸调整后的目标布局模板的宽度和高度分别为80和40，第一模板组件的模板位置坐标包括四个顶点的位置坐标，尺寸调整后位置坐标分别调整为(20,0)、(60,0)、(20,20)和(60,20)，第二模板组件的模板位置坐标包括四个顶点的位置坐标，尺寸调整后位置坐标分别调整为(0,20)、(80,20)、(0,40)和(80,40)。

(2)确定第二整体与尺寸调整后的第三整体之间的坐标方差。

第二整体和尺寸调整后的第三整体尺寸相同，可以通过计算二者之间的坐标方差，确定多个待对齐组件在第二整体中的布局和多个模板组件在尺寸调整后的第三整体中的布局是否接近。

在一些实施例中，可以根据第二整体中的多个待对齐组件在第二区域内的位置坐标，分别确定多个待对齐组件的中心点在第二区域内的位置坐标；根据尺寸调整后的第三整体中的多个模板组件的模板位置坐标，分别确定多个模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标；分别确定每个待对齐组件的中心点在第二区域内的位置坐标与对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离；根据所确定的多个距离和多个待对齐组件的数量，确定第二整体与尺寸调整后的第三整体之间的坐标方差。

作为一种示例，对于第二整体中多个待对齐组件的任一待对齐组件，可以计算该任一待对齐组件的中心点在第二区域的位置坐标。示例性地，参见图5，第一待对齐组件在第二区域内的位置坐标包括四个顶点的位置坐标，分别为(0,0)、(80,0)(0,20)和(80,20)，可以确定第一待对齐组件的中心点在第二区域内的位置坐标为(40,10)。

作为一种示例，对于尺寸调整后的第三整体中多个模板组件的任一模板组件，可以计算该任一模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标。示例性地，参见图8，第一模板组件在尺寸调整后的第三整体中的模板位置坐标包括四个顶点的位置坐标，分别为(20,0)、(60,0)、(20,20)和(60,20)，可以确定第一模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(40,10)。

作为一种示例，分别确定每个待对齐组件的中心点在第二区域内的位置坐标与对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离，可以包括如下两种实现方式：

第一种实现方式：当多个待对齐组件包括一种类型时，基于每个待对齐组件在第二区域内的位置坐标，确定每个待对齐组件在第二区域内的排版顺序，确定目标布局模板中多个模板组件的排版顺序，将排版顺序相同的模板组件和待对齐组件确定为相互对应，分别确定每个待对齐组件的中心点在第二区域内的位置坐标与对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离。

作为一种示例，当多个待对齐组件包括一种类型时，将这多个待对齐组件按照位置坐标进行排序，当纵坐标差值的绝对值小于或等于差值阈值时，判断横坐标的大小，当横坐标不相同时，可以按照横坐标的大小来排序，横坐标较小的在前，当横坐标相同时，可以按照纵坐标的大小进行排序，纵坐标较小的在前；否则，当纵坐标差值的绝对值大于差值阈值时，按照纵坐标的大小进行排序，纵坐标较小的在前。其中，差值阈值可以由用户根据实际需要进行设置，或者，也可以由设备默认设置，本申请实施例对此不做限定。

示例性地，可以按照多个待对齐组件中每个待对齐组件的左上角顶点的坐标对该多个待对齐组件进行排序。参见图5，第一待对齐组件左上角顶点的坐标为(0,0)，第二待对齐组件左上角顶点坐标为(0,25)，可以确定排版顺序为第一待对齐组件、第二待对齐组件。

作为一种示例，目标布局模板中包括每个模板组件的模板位置坐标，可以根据模板位置坐标对多个模板组件进行排序，与上述对多个待对齐组件进行排序的方法相同。示例性地，参见图8，假设差值阈值为30，第一模板组件左上角顶点的坐标为(20,0)，第二模板组件左上角顶点坐标为(0,20)，纵坐标的差值的绝对值为20，小于差值阈值，可以根据横坐标进行排序，可以确定排版顺序为第一模板组件、第二模板组件。

作为一种示例，按照排版顺序，分别对每个待对齐组件的中心点在第二区域内的位置坐标和对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离进行计算。

示例性地，参见图5和图8，图5中排版顺序为第一待对齐组件、第二待对齐组件，图8中排版顺序为第一模板组件、第二模板组件，第一待对齐组件的中心点在第二区域内的位置坐标为(40,10)，第一模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(40,10)，可以确定第一个距离为0，第二待对齐组件的中心点在第二区域内的位置坐标为(40,32.5)，第二模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(40,30)，可以确定第二个距离为2.5。

第二种实现方式：当多个待对齐组件包括多种类型时，对多个待对齐组件进行分组，每组中的至少一个待对齐组件的类型相同；基于每组中每个待对齐组件在第二区域内的位置坐标，确定每组中每个待对齐组件在第二区域内的排版顺序；确定尺寸调整后的目标布局模板中与每组待对齐组件的类型相同的模板组件在尺寸调整后的目标布局模板的排版顺序；将排版顺序相同且属于同一种类型的模板组件和待对齐组件确定为相互对应，分别确定每个待对齐组件的中心点在第二区域内的位置坐标与对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离。

作为一种示例，当多个待对齐组件包括多种类型时，按照类型对多个待对齐组件进行分组，并在每一组内对同种类型的待对齐组件进行排序。可以根据同种类型的待对齐组件的位置坐标对同种类型的待对齐组件进行排序。

示例性地，参见图9，假设第二区域包括4个待对齐组件，其中包括2个图片组件，2个文本框组件，将2个图片组件分为一组，2个文本框组件分为一组。对于2个图片组件，假设差值阈值为30，第一待对齐图片组件的左上角顶点的坐标为(0,0)，第二待对齐图片组件的左上角顶点坐标为(30,20)，可以确定图片组件组中的排版顺序为第一待对齐图片组件、第二待对齐图片组件；对于2个文本框组件，假设第一待对齐文本框组件的左上角顶点坐标为(10,0)，第二待对齐文本框组件的左上角顶点坐标为(0,20)，可以确定文本框组件组中的排版顺序为第一待对齐文本框组件、第二待对齐文本框组件。

作为一种示例，目标布局模板中包括每个模板组件的类型及模板位置坐标，可以根据模板位置坐标对同种类型的模板组件进行排序，与上述对同种类型的待对齐组件进行排序的方法相同。示例性地，参见图10，假设目标布局模板中包括4个模板组件，其中包括2个图片组件，2个文本框组件。对于2个图片组件，假设第一模板图片组件的左上角顶点的坐标为(0,0)，第二模板图片组件的左上角顶点坐标为(20,20)，可以确定图片组件组中的排版顺序为第一模板图片组件、第二模板图片组件；对于2个文本框组件，假设第一模板文本框组件的左上角顶点坐标为(20,0)，第二模板文本框组件的左上角顶点坐标为(0,20)，可以确定文本框组件组中的排版顺序为第一模板文本框组件、第二模板文本框组件。

作为一种示例，将属于同种类型且排版顺序相同的组件确定为相互对应之后，可以根据公式(1)计算第二整体和尺寸调整后的第三整体之间的坐标方差。

∑(dis tan ce²(c_m',c_t'))/n (1)

其中，在公式(1)中，c_m'表示尺寸调整后的第三整体中任一模板组件的中心点在第三整体中的模板位置坐标，c_t'表示第二区域中任一待对齐组件的中心点在第二区域内的位置坐标，n表示第二区域中待对齐组件的数量。

也就是说，可以分别对每个待对齐组件的中心点在第二区域内的位置坐标和对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离进行计算，确定多个距离，将所确定的多个距离分别求平方后再相加取平均值，将该平均值确定为第二整体和尺寸调整后的第三整体之间的坐标方差。

示例性地，参见图9和图10，假设第一待对齐图片组件的中心点在第二区域内的位置坐标为(5,10)，第一模板图片组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(10,10)，可以确定第一个距离为5，第二待对齐图片组件的中心点在第二区域内的位置坐标为(35,30)，第二模板图片组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(30,30)，可以确定第二个距离为5，第一待对齐文本框组件的中心点在第二区域内的位置坐标为(25,10)，第一模板文本框组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(30,10)，可以确定第三个距离为5，第二待对齐文本框组件的中心点在第二区域内的位置坐标为(15,30)，第二模板文本框组件的中心点在尺寸调整后的第三整体中的模板位置坐标为(10,30)，可以确定第四个距离为5，确定了四个距离后，可以确定第二整体和尺寸调整后的第三整体之间的坐标方差为(5²+5²+5²+5²)÷4＝25。

(3)当第二整体与尺寸调整后的第三整体之间的坐标方差小于参考阈值时，按照尺寸调整后的第三整体中多个模板组件的布局，控制多个待对齐组件对齐。

其中，参考阈值可以由设备默认设置，也可以由用户根据实际需求进行设置，也可以根据大数据得到，本申请实施例对此不做限定。

作为一种示例，当第二整体与尺寸调整后的第三整体之间的坐标方差小于参考阈值时，可以确定第二整体中多个待对齐组件的布局与尺寸调整后的第三整体中多个模板组件的布局比较接近，可以根据尺寸调整后的第三整体中多个模板组件的布局，调整第二整体中多个待对齐组件的布局，即将第二整体中多个待对齐组件的位置坐标调整为与尺寸调整后第三整体中对应的模板组件的模板位置坐标相同，以便控制多个待对齐组件对齐。

示例性地，参见图5和图8，图8中第一模板组件的模板位置坐标包括四个顶点的位置坐标，分别为(20,0)、(60,0)、(20,20)和(60,20)，第二模板组件的模板位置坐标包括四个顶点的位置坐标，分别为(0,20)、(40,20)、(0,40)和(80,40)，将图5中第一待对齐组件和第二待对齐组件的位置坐标分别调整为与图8中第一模板组件和第二模板组件的模板位置坐标相同，即第一待对齐组件的位置坐标包括四个顶点的位置坐标，分别调整为(20,0)、(60,0)、(20,20)和(60,20)，第二待对齐组件的位置坐标包括四个顶点的位置坐标，分别调整为(0,20)、(40,20)、(0,40)和(80,40)。

示例性地，参见图11，图11为对图2中选中的待对齐组件进行对齐后的布局示意图。

进一步地，当第二整体与尺寸调整后的第三整体之间的坐标方差大于或等于参考阈值时，可以确定第二整体中多个待对齐组件的布局与尺寸调整后的第三整体中多个模板组件的布局相差很大，不能基于尺寸调整后的第三整体中多个模板组件的布局，对第二整体中多个待对齐组件的布局进行调整，可以在布局模板库中确定下一个包括待对齐组件数量个且与待对齐组件类型匹配的模板组件的目标布局模板，按照上述实现方式执行对齐操作。

需要说明的是，本申请实施例中仅是以坐标系的原点位于左上角为例进行说明，在实际实现中，坐标系的原点可以位于任何位置，本申请实施例对此不做限定。

在本申请实施例中，在对多个待对齐组件进行对齐时，可以基于该多个待对齐组件的数量和类型，从布局模板库中确定目标布局模板，该目标布局模板中包括的模板组件的数量与待对齐组件的数量相同且模板组件的类型与待对齐组件的类型匹配，确定能够将多个待对齐组件完全包围且面积最小的区域为第一区域，确定该第一区域的宽度和高度以及该多个待对齐组件在该第一区域内的位置坐标，将该第一区域和该多个待对齐组件作为第一整体，对第一整体进行缩放，即对第一区域的宽度和高度进行调整，并且对多个待对齐组件在第一区域内的位置坐标进行等比例调整，将第一整体的宽高比调整为目标布局模板的宽高比，得到第二整体，根据第二整体和目标布局模板控制该多个待对齐组件对齐。如此，可以根据待对齐组件匹配目标布局模板，匹配成功后，可以根据目标布局模板和第二整体控制待对齐组件自动对齐，避免了用户繁琐的手动操作，提高了对齐精准度。

图12是根据一示例性实施例示出的一种对齐组件的装置的结构示意图，该装置可以由软件、硬件或者两者的结合实现。参见图12，该装置可以包括：第一确定模块1201、第二确定模块1202、调整模块1203和控制模块1204。

第一确定模块1201，用于基于多个待对齐组件的数量和类型，从布局模板库中确定包括数量个且与类型匹配的模板组件的目标布局模板；

第二确定模块1202，用于确定第一区域的宽度和高度、以及多个待对齐组件在第一区域内的位置坐标，该第一区域是指能够将多个待对齐组件完全包围且面积最小的区域；

调整模块1203，用于将第一区域和多个待对齐组件作为第一整体，基于第一区域的宽度和高度，以及多个待对齐组件在第一区域内的位置坐标，将第一整体的宽高比调整为目标布局模板的宽高比，得到第二整体；

控制模块1204，用于根据第二整体和目标布局模板，控制多个待对齐组件对齐。

在本申请一种可能的实现方式中，该控制模块1204用于：

将目标布局模板及所包括的多个模板组件作为第三整体，根据第二整体中包括的第二区域的宽度和高度，对第三整体进行尺寸调整，该第二区域为对第一区域进行宽高比调整后的区域；

确定第二整体与尺寸调整后的第三整体之间的坐标方差；

当第二整体与尺寸调整后的第三整体之间的坐标方差小于参考阈值时，按照尺寸调整后的第三整体中多个模板组件的布局，控制多个待对齐组件对齐。

在本申请一种可能的实现方式中，该控制模块1204用于：

根据第二整体中的多个待对齐组件在第二区域内的位置坐标，分别确定多个待对齐组件的中心点在第二区域内的位置坐标；

根据尺寸调整后的第三整体中的多个模板组件的模板位置坐标，分别确定多个模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标；

分别确定每个待对齐组件的中心点在第二区域内的位置坐标与对应的模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标之间的距离；

根据所确定的多个距离和多个待对齐组件的数量，确定第二整体与尺寸调整后的第三整体之间的坐标方差。

在本申请一种可能的实现方式中，该控制模块1204还用于：

当多个待对齐组件包括多种类型时，对多个待对齐组件进行分组，每组中的至少一个待对齐组件的类型相同；

基于每组中每个待对齐组件在第二区域内的位置坐标，确定每组中每个待对齐组件在第二区域内的排版顺序；

确定尺寸调整后的目标布局模板中与每组待对齐组件的类型相同的模板组件在尺寸调整后的目标布局模板的排版顺序；

将排版顺序相同且属于同一种类型的模板组件和待对齐组件确定为相互对应。

在本申请一种可能的实现方式中，该调整模块1203用于：

保持第一区域的宽度和多个待对齐组件在第一区域内的位置坐标中的横坐标不变，根据目标布局模板的宽高比，调整第一区域的高度和多个待对齐组件在第一区域内的位置坐标中的纵坐标；或者，

保持第一区域的高度和多个待对齐组件在第一区域内的位置坐标中的纵坐标不变，根据目标布局模板的宽高比，调整第一区域的宽度和多个待对齐组件在第一区域内的位置坐标中的横坐标。

在本申请实施例中，在对多个待对齐组件进行对齐时，可以基于该多个待对齐组件的数量和类型，从布局模板库中确定目标布局模板，该目标布局模板中包括的模板组件的数量与待对齐组件的数量相同且模板组件的类型与待对齐组件的类型匹配，确定能够将多个待对齐组件完全包围且面积最小的区域为第一区域，确定该第一区域的宽度和高度以及该多个待对齐组件在该第一区域内的位置坐标，将该第一区域和该多个待对齐组件作为第一整体，对第一整体进行缩放，即对第一区域的宽度和高度进行调整，并且对多个待对齐组件在第一区域内的位置坐标进行等比例调整，将第一整体的宽高比调整为目标布局模板的宽高比，得到第二整体，根据第二整体和目标布局模板控制该多个待对齐组件对齐。如此，可以根据待对齐组件匹配目标布局模板，匹配成功后，可以根据目标布局模板和第二整体控制待对齐组件自动对齐，避免了用户繁琐的手动操作，提高了对齐精准度。

需要说明的是：上述实施例提供的对齐组件的装置在对齐组件时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的对齐组件的装置与对齐组件的方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图13示出了本申请一个示例性实施例提供的电子设备1300的结构框图。该电子设备1300可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group AudioLayer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts GroupAudio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。电子设备1300还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，电子设备1300包括有：处理器1301和存储器1302。

处理器1301可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1301可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1301也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1301可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1301还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1302可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1302还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1302中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1301所执行以实现本申请中方法实施例提供的对齐组件的方法。

在一些实施例中，电子设备1300还可选包括有：外围设备接口1303和至少一个外围设备。处理器1301、存储器1302和外围设备接口1303之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1303相连。具体地，外围设备包括：射频电路1304、触摸显示屏1305、摄像头1306、音频电路1307、定位组件1308和电源1309中的至少一种。

外围设备接口1303可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器1301和存储器1302。在一些实施例中，处理器1301、存储器1302和外围设备接口1303被集成在同一芯片或电路板上；在一些其他实施例中，处理器1301、存储器1302和外围设备接口1303中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路1304用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1304通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1304将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1304包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1304可以通过至少一种无线通信协议来与其它电子设备进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1304还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏1305用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1305是触摸显示屏时，显示屏1305还具有采集在显示屏1305的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1301进行处理。此时，显示屏1305还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏1305可以为一个，设置电子设备1300的前面板；在另一些实施例中，显示屏1305可以为至少两个，分别设置在电子设备1300的不同表面或呈折叠设计；在再一些实施例中，显示屏1305可以是柔性显示屏，设置在电子设备1300的弯曲表面上或折叠面上。甚至，显示屏1305还可以设置成非矩形的不规则图形，也即异形屏。显示屏1305可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件1306用于采集图像或视频。可选地，摄像头组件1306包括前置摄像头和后置摄像头。通常，前置摄像头设置在电子设备的前面板，后置摄像头设置在电子设备的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件1306还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路1307可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1301进行处理，或者输入至射频电路1304以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在电子设备1300的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1301或射频电路1304的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1307还可以包括耳机插孔。

定位组件1308用于定位电子设备1300的当前地理位置，以实现导航或LBS(Location Based Service，基于位置的服务)。定位组件1308可以是基于美国的GPS(Global Positioning System，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源1309用于为电子设备1300中的各个组件进行供电。电源1309可以是交流电、直流电、一次性电池或可充电电池。当电源1309包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，电子设备1300还包括有一个或多个传感器1310。该一个或多个传感器1310包括但不限于：加速度传感器1311、陀螺仪传感器1312、压力传感器1313、指纹传感器1314、光学传感器1315以及接近传感器1316。

加速度传感器1311可以检测以电子设备1300建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器1311可以用于检测重力加速度在三个坐标轴上的分量。处理器1301可以根据加速度传感器1311采集的重力加速度信号，控制触摸显示屏1305以横向视图或纵向视图进行用户界面的显示。加速度传感器1311还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器1312可以检测电子设备1300的机体方向及转动角度，陀螺仪传感器1312可以与加速度传感器1311协同采集用户对电子设备1300的3D动作。处理器1301根据陀螺仪传感器1312采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器1313可以设置在电子设备1300的侧边框和/或触摸显示屏1305的下层。当压力传感器1313设置在电子设备1300的侧边框时，可以检测用户对电子设备1300的握持信号，由处理器1301根据压力传感器1313采集的握持信号进行左右手识别或快捷操作。当压力传感器1313设置在触摸显示屏1305的下层时，由处理器1301根据用户对触摸显示屏1305的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器1314用于采集用户的指纹，由处理器1301根据指纹传感器1314采集到的指纹识别用户的身份，或者，由指纹传感器1314根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器1301授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1314可以被设置电子设备1300的正面、背面或侧面。当电子设备1300上设置有物理按键或厂商Logo时，指纹传感器1314可以与物理按键或厂商Logo集成在一起。

光学传感器1315用于采集环境光强度。在一个实施例中，处理器1301可以根据光学传感器1315采集的环境光强度，控制触摸显示屏1305的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏1305的显示亮度；当环境光强度较低时，调低触摸显示屏1305的显示亮度。在另一个实施例中，处理器1301还可以根据光学传感器1315采集的环境光强度，动态调整摄像头组件1306的拍摄参数。

接近传感器1316，也称距离传感器，通常设置在电子设备1300的前面板。接近传感器1316用于采集用户与电子设备1300的正面之间的距离。在一个实施例中，当接近传感器1316检测到用户与电子设备1300的正面之间的距离逐渐变小时，由处理器1301控制触摸显示屏1305从亮屏状态切换为息屏状态；当接近传感器1316检测到用户与电子设备1300的正面之间的距离逐渐变大时，由处理器1301控制触摸显示屏1305从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图13中示出的结构并不构成对电子设备1300的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

在一些实施例中，还提供了一种计算机可读存储介质，该存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述实施例中对齐组件的方法。例如，所述计算机可读存储介质可以是ROM、RAM、CD-ROM、磁带、软盘和光数据存储设备等。

值得注意的是，本申请提到的计算机可读存储介质可以为非易失性存储介质，换句话说，可以是非瞬时性存储介质。

应当理解的是，实现上述实施例的全部或部分步骤可以通过软件、硬件、固件或者其任意结合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机指令。所述计算机指令可以存储在上述计算机可读存储介质中。

也即是，在一些实施例中，还提供了一种包含指令的计算机程序产品，当其在计算机上运行时，使得计算机执行上述所述的对齐组件的方法。

以上所述仅为本申请的较佳实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种对齐组件的方法，其特征在于，所述方法包括：

基于多个待对齐组件的数量和类型，从布局模板库中确定包括所述数量个且与所述类型匹配的模板组件的目标布局模板；

确定第一区域的宽度和高度、以及所述多个待对齐组件在所述第一区域内的位置坐标，所述第一区域是指能够将所述多个待对齐组件完全包围且面积最小的区域；

将所述第一区域和所述多个待对齐组件作为第一整体，基于所述第一区域的宽度和高度，以及所述多个待对齐组件在所述第一区域内的位置坐标，将所述第一整体的宽高比调整为所述目标布局模板的宽高比，得到第二整体；

根据所述第二整体和所述目标布局模板，控制所述多个待对齐组件对齐。

2.如权利要求1所述的方法，其特征在于，所述根据所述第二整体和所述目标布局模板，控制所述多个待对齐组件对齐，包括：

将所述目标布局模板及所包括的多个模板组件作为第三整体，根据所述第二整体中包括的第二区域的宽度和高度，对所述第三整体进行尺寸调整，所述第二区域为对所述第一区域进行宽高比调整后的区域；

确定所述第二整体与尺寸调整后的第三整体之间的坐标方差；

当所述第二整体与尺寸调整后的第三整体之间的坐标方差小于参考阈值时，按照尺寸调整后的第三整体中多个模板组件的布局，控制所述多个待对齐组件对齐。

3.如权利要求2所述的方法，其特征在于，所述确定所述第二整体与尺寸调整后的第三整体之间的坐标方差，包括：

根据所述第二整体中的多个待对齐组件在第二区域内的位置坐标，分别确定所述多个待对齐组件的中心点在所述第二区域内的位置坐标；

根据尺寸调整后的第三整体中的多个模板组件的模板位置坐标，分别确定所述多个模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标；

分别确定每个所述待对齐组件的中心点在所述第二区域内的位置坐标与对应的模板组件的中心点在所述尺寸调整后的第三整体中的模板位置坐标之间的距离；

根据所确定的多个距离和所述多个待对齐组件的数量，确定所述第二整体与所述尺寸调整后的第三整体之间的坐标方差。

4.如权利要求3所述的方法，其特征在于，所述分别确定所述每个待对齐组件的中心点在所述第二区域内的位置坐标与对应的模板组件的中心点在所述尺寸调整后的第三整体中的模板位置坐标之间的距离之前，还包括：

当所述多个待对齐组件包括多种类型时，对所述多个待对齐组件进行分组，每组中的至少一个待对齐组件的类型相同；

基于每组中每个待对齐组件在所述第二区域内的位置坐标，确定每组中每个待对齐组件在所述第二区域内的排版顺序；

确定尺寸调整后的目标布局模板中与每组待对齐组件的类型相同的模板组件在尺寸调整后的目标布局模板的排版顺序；

将排版顺序相同且属于同一种类型的模板组件和待对齐组件确定为相互对应。

5.如权利要求1所述的方法，其特征在于，所述基于所述第一区域的宽度和高度，以及所述多个待对齐组件在所述第一区域内的位置坐标，将所述第一整体的宽高比调整为所述目标布局模板的宽高比，包括：

保持所述第一区域的宽度和所述多个待对齐组件在所述第一区域内的位置坐标中的横坐标不变，根据所述目标布局模板的宽高比，调整所述第一区域的高度和所述多个待对齐组件在所述第一区域内的位置坐标中的纵坐标；或者，

保持所述第一区域的高度和所述多个待对齐组件在所述第一区域内的位置坐标中的纵坐标不变，根据所述目标布局模板的宽高比，调整所述第一区域的宽度和所述多个待对齐组件在所述第一区域内的位置坐标中的横坐标。

6.一种对齐组件的装置，其特征在于，所述装置包括：

第一确定模块，用于基于多个待对齐组件的数量和类型，从布局模板库中确定包括所述数量个且与所述类型匹配的模板组件的目标布局模板；

第二确定模块，用于确定第一区域的宽度和高度、以及所述多个待对齐组件在所述第一区域内的位置坐标，所述第一区域是指能够将所述多个待对齐组件完全包围且面积最小的区域；

调整模块，用于将所述第一区域和所述多个待对齐组件作为第一整体，基于所述第一区域的宽度和高度，以及所述多个待对齐组件在所述第一区域内的位置坐标，将所述第一整体的宽高比调整为所述目标布局模板的宽高比，得到第二整体；

控制模块，用于根据所述第二整体和所述目标布局模板，控制所述多个待对齐组件对齐。

7.如权利要求6所述的装置，其特征在于，所述控制模块用于：

将所述目标布局模板及所包括的多个模板组件作为第三整体，根据所述第二整体中包括的第二区域的宽度和高度，对所述第三整体进行尺寸调整，所述第二区域为对所述第一区域进行宽高比调整后的区域；

确定所述第二整体与尺寸调整后的第三整体之间的坐标方差；

当所述第二整体与尺寸调整后的第三整体之间的坐标方差小于参考阈值时，按照尺寸调整后的第三整体中多个模板组件的布局，控制所述多个待对齐组件对齐。

8.如权利要求7所述的装置，其特征在于，所述控制模块用于：

根据所述第二整体中的多个待对齐组件在第二区域内的位置坐标，分别确定所述多个待对齐组件的中心点在所述第二区域内的位置坐标；

根据尺寸调整后的第三整体中的多个模板组件的模板位置坐标，分别确定所述多个模板组件的中心点在尺寸调整后的第三整体中的模板位置坐标；

分别确定每个所述待对齐组件的中心点在所述第二区域内的位置坐标与对应的模板组件的中心点在所述尺寸调整后的第三整体中的模板位置坐标之间的距离；

根据所确定的多个距离和所述多个待对齐组件的数量，确定所述第二整体与所述尺寸调整后的第三整体之间的坐标方差。

9.一种电子设备，其特征在于，所述电子设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由所述处理器加载并执行以实现权利要求1-5所述的任一项方法的步骤。

10.一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述指令、所述程序、所述代码集或所述指令集由处理器加载并执行以实现权利要求1-5所述的任一项方法的步骤。

Images