CN116737301A - 图层元素的对齐方法及装置 - Google Patents

Abstract

本申请提供图层元素的对齐方法及装置，其中所述图层元素的对齐方法包括：获取至少一个图层以及各图层的图层元素；确定各图层元素对应的基准线，并基于各基准线生成基准线集合；获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；根据各元素调整信息生成至少一个初始元素布局；根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

Description

图层元素的对齐方法及装置

技术领域

本申请涉及计算机技术领域，特别涉及图层元素的对齐方法。本申请同时涉及图层元素的对齐装置，一种计算设备，以及一种计算机可读存储介质。

背景技术

在设计稿制作过程中，对图层的对齐布局是一项重要的任务，其影响设计稿的整体美观度以及工作效率。然而，目前的手动调整图层的图层对齐布局方案，缺乏自适应性和智能化，需要手动调整每个图层的位置和间距，耗费大量时间和精力。

因此，如何提升对图像对齐布局的效率，提高设计稿的制作效率和质量，成为本领域技术人员亟待解决的技术问题。

发明内容

有鉴于此，本申请实施例提供了图层元素的对齐方法。本申请同时涉及图层元素的对齐装置，一种计算设备，以及一种计算机可读存储介质，以解决现有技术中存在的上述问题。

根据本申请实施例的第一方面，提供了一种图层元素的对齐方法，包括：

获取至少一个图层以及各图层的图层元素；

确定各图层元素对应的基准线，并基于各基准线生成基准线集合；

获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；

根据各元素调整信息生成至少一个初始元素布局；

根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

根据本申请实施例的第二方面，提供了一种图层元素的对齐装置，包括：

获取模块，被配置为获取至少一个图层以及各图层的图层元素；

确定模块，被配置为确定各图层元素对应的基准线，并基于各基准线生成基准线集合；

第一生成模块，被配置为获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；

第二生成模块，被配置为根据各元素调整信息生成至少一个初始元素布局；

调整模块，被配置为根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

根据本申请实施例的第三方面，提供了一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，所述处理器执行所述计算机指令时实现所述图层元素的对齐方法的步骤。

根据本申请实施例的第四方面，提供了一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现所述图层元素的对齐方法的步骤。

本申请提供的图层元素的对齐方法，获取至少一个图层以及各图层的图层元素；确定各图层元素对应的基准线，并基于各基准线生成基准线集合；获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；根据各元素调整信息生成至少一个初始元素布局；根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

本申请一实施例实现了获取图层元素的基准线，从而可以基于基准线确定当前图层元素的对齐情况；在基准线集合中确定基准线，基于基准线和对应的图层元素生成元素调整信息，进而基于元素调整信息生成初始元素布局，从而可以根据不同初始元素布局对应的基准线数量，选择最终用于对图层元素进行对齐的目标元素布局；基于目标元素布局对图层元素进行调整，从而实现了对同一图层或不同图层上的图层元素进行自动化的对齐处理，提升了对图层元素进行对齐处理的效率。

附图说明

图1是本申请一实施例提供的一种图层元素的对齐方法的场景示意图；

图2是本申请一实施例提供的一种图层元素的对齐方法的流程图；

图3是本申请一实施例提供的一种基准线的示意图；

图4是本申请一实施例提供的一种判断是否存在交集的示意图；

图5是本申请一实施例提供的一种应用于文本元素的图层元素的对齐方法的处理流程图；

图6是本申请一实施例提供的一种图层元素的对齐装置的结构示意图；

图7是本申请一实施例提供的一种计算设备的结构框图。

具体实施方式

在下面的描述中阐述了很多具体细节以便于充分理解本申请。但是本申请能够以很多不同于在此描述的其它方式来实施，本领域技术人员可以在不违背本申请内涵的情况下做类似推广，因此本申请不受下面公开的具体实施的限制。

在本申请一个或多个实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请一个或多个实施例。在本申请一个或多个实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本申请一个或多个实施例中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请一个或多个实施例中可能采用术语第一、第二等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请一个或多个实施例范围的情况下，第一也可以被称为第二，类似地，第二也可以被称为第一。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

首先，对本申请一个或多个实施例涉及的名词术语进行解释。

设计稿：是指设计师在设计过程中所绘制的包含多个图层的图层元素的草图。

在设计稿制作过程中，图层的对齐布局是一项重要的任务，它影响到设计稿的整体美观度和工作效率。然而，现有的图层对齐布局方案缺乏自适应性和智能化，需要手动调整每个图层的位置和间距，耗费大量时间和精力。具体的，常用的图层对齐布局方法包括手动调整、网格对齐和对齐线等。手动调整需要用户对每个图层进行逐一调整，耗费时间和精力；网格对齐能够提高对齐效率，但无法适应各种图层的不同间距和大小；对齐线可以帮助用户快速对齐图层，但需要用户手动添加对齐线，不够智能化。上述方式均存在缺点，无法完全满足用户的需求。现有技术中的图层对齐布局方法缺乏自适应性和智能化，需要用户手动进行调整，浪费时间和精力。

因此，需要一种自动对齐图层元素的方式，解决目前对齐繁琐的缺点，提高设计稿的制作效率和质量。

在本申请中，提供了图层元素的对齐方法，本申请同时涉及图层元素的对齐装置，一种计算设备，以及一种计算机可读存储介质，在下面的实施例中逐一进行详细说明。

图1示出了根据本申请一实施例提供的一种图层元素的对齐方法的场景示意图，具体包括以下步骤：

图1中展示了包含多个图层元素的设计稿，其中，各图层元素处于设计稿的不同图层上；用户可以基于需求在设计稿中选中需要进行对齐操作的图层元素；图1中包含4个被选中，需要进行对齐操作的图层元素；确定各图层元素的元素包围框，基于元素包围框；基于元素包围框确定各图层元素的基准线，生成基准线集合，具体的，以图1中的“标题”图层元素为例，根据“标题”图层元素的包围框确定top、y-center、bottom、left、x-center、right，共6条不同类型的基准线，同理，可确定其他被选中图层元素的6种类型的基准线，并基于同一类型的基准线生成基准线集合，即可以生成T、YC、B、L、XC、R，共6个基准线集合；通过各图层元素对应的基准线，可以计算设计稿的当前对齐分数，具体的，对齐分数score＝len(L)+len(XC)+len(R)+len(T)+len(YC)+len(B)，其中，len()表示该基准线集合中在基准线的数量；如图1中所示的“标题”图层元素和“任务2”图层元素，其left类型的基准线为同一基准线，则仅统计一次即可。

在获得6个基准线集合后，确定各基准线集合中基准线之间的距离；进一步地，确定各个基准线集合中，基准线距离小于预设阈值的第一基准线和第二基准线；例如，在基准线集合L中，确定“内容”图层元素的基准线1与“任务1”图层元素的基准线2之间的距离，相较于集合中其他基准线之间的距离最小，则确定基准线1和基准线2为第一基准线和第二基准线；根据第一基准线对应的“内容”图层元素和第二基准线对应的“任务1”图层元素，确定元素调整信息为：将“任务1”图层元素向左移动10px；同理，基于其他基准线集合中的第一基准线和第二基准线，确定各基准线集合对应的元素调整信息；基于各元素调整信息，确定图层元素的各初始元素布局；确定各初始元素布局对应的基准线数量，进而通过筛选基准线小于预设数量阈值的初始元素布局作为目标元素布局；基于目标元素布局对图层元素进行位置调整，从而得到如图1所示，对齐处理后的图层元素。

本申请实施例的图层元素的对齐方法，通过获取图层元素的基准线，从而可以基于基准线确定当前图层元素的对齐情况；在基准线集合中确定基准线，基于基准线和对应的图层元素生成元素调整信息，进而基于元素调整信息生成初始元素布局，从而可以根据不同初始元素布局对应的基准线数量，选择最终用于对图层元素进行对齐的目标元素布局；基于目标元素布局对图层元素进行调整，从而实现了对同一图层或不同图层上的图层元素进行自动化的对齐处理，提升了对图层元素进行对齐处理的效率。

图2示出了根据本申请一实施例提供的一种图层元素的对齐方法的流程图，具体包括以下步骤：

步骤202：获取至少一个图层以及各图层的图层元素。

其中，图层是指包含文字、图形等元素的层级；图层元素是指在图层上包含文字、图形等元素。

在实际应用中，可以在不同的图层上绘制不同的图层元素，以便于对图层元素进行调整；但在绘制处于不同图层的图层元素后，对各个图层上的图层元素进行对齐较为繁琐，需要设计人员基于需求手动对图层元素的位置进行调整。

具体的，在对图层元素对齐之前，要确定需要进行对齐的图层元素，即获取至少一个图层以及各个图层上的图层元素。

实际应用中，获取至少一个图层以及各图层的图层元素的方法可以包括：

响应于图层元素对齐请求，确定至少一个图层；

基于所述图层元素对齐请求中的至少一个元素标识，在所述至少一个图层上确定各元素标识对应的图层元素。

其中，图层元素对齐请求是指对需要对齐处理的图层元素进行对齐的请求；元素标识是指可以唯一标识图层元素的字段。

具体的，接收图层元素对齐请求，其中，图层元素对齐请求可以基于用户在页面中选中图层元素生成，可以基于设计稿处理任务生成等，本申请不做具体限定；确定需要进行对齐处理的设计稿，并解析图层元素对齐请求，获得至少一个元素标识；根据元素标识在设计稿的图层中，确定与元素标识对应的图层元素。

在本申请一具体实施方式中，接收基于用户在设计稿中选中图层元素，而生成的图层元素对齐请求；解析图层元素对齐请求，获得元素标识“a1”、“a2”；基于元素标识在设计稿的图层中确定与元素标识“a1”对应的元素图层1以及与“a2”对应的元素标识2。

通过获取至少一个图层以及各图层上的图层元素，以便后续对确定的图层元素做进一步的处理。

步骤204：确定各图层元素对应的基准线，并基于各基准线生成基准线集合。

其中，基准线是指用于对图层元素进行对齐的直线；例如，确定图层元素为矩形A，矩形A左边的边所在直线可以作为矩形A的左基准线，确定图层元素“标题”的包围框右边的边所在直线作为图层元素“标题”的右基准线；基准线集合是指由图层元素的基准线组成的集合。

需要注意的是，不同的图层元素可以存在相同的基准线，例如，图层元素1的上边线和图层元素2的上边线处于同一直线上，即图层元素1与图层元素2对应的上基准线相同；此外，为了便于后续的对齐处理，可以将基准线按照不同的基准线类型生成对应的基准线集合。

具体的，确定各图层元素对应的基准线，并基于各基准线生成基准线集合的方法可以包括：

确定各图层元素对应的元素包围框；

根据各元素包围框对应的边线和中线确定各图层元素对应的基准线；

基于各元素包围框的边线生成边线基准线集合，并基于各元素包围框的中线生成中线基准线集合。

其中，元素包围框是指是指待布局元素对应的显示范围界定框；边线是指元素包围框上、下、左、右四条边线；中线是指元素包围框的x轴方向的直线以及y轴方向的直线；边线基准线集合是指由元素包围框的边线基准线组成的集合；中线基准线集合是指由元素包围框的中线基准线组成的集合。

具体的，确定各图层元素的元素包围框；确定各图层元素的边线，并基于图层元素的边线中点，确定中线；例如，如图3所示，元素包围框的边线包括a、b、c和d，b与d中点的连线为包围框x轴的中线，a与c中点的连线为包围框y轴的中线；确定包围框的边线和中线后，将边线所在的直线作为边线基准线，将中线所在的直线作为中线基准线；基于各元素包围框的边线基准线生成边线基准线集合，并基于元素包围框的中线基准线生成中线基准线集合。

在本申请一具体实施方式中，如图3所示，根据图层元素“标题”的边缘确定图层元素的元素包围框；基于元素包围框的四条边线a、b、c和d以及两条中线确定图层元素的基准线，即将边线所在直线作为边线基准线，将中线坐在直线作为中线基准线；根据各边线基准线组成边线基准线集合，根据各中线基准线组成中线基准线集合。

需要注意的是，上述生成边线基准线集合和中线基准线集合的过程，为一种可实现的方式，还可以将不同图层元素的同类型基准线放在一个集合中，例如，确定图层元素1和图层元素2的上基准线，即基于图层元素上边线确定的基准线，则可以基于图层元素1和图层元素2的上基准线生成上基准线集合，同理，可以得到下基准线集合、左基准线集合等等。

通过确定图层元素的基准线，并基于基准线生成一个或多个基准线集合，从而便于后续基于基准线集合对图层元素进行对齐处理。

步骤206：获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息。

其中，第一基准线和第二基准线是指用于对图层元素进行自动对齐调整的基准线；第一图层元素是指图层元素对应的基准线包含第一基准线的图层元素；第二基准线是指图层元素对应的基准线包含第二基准线的图层元素；元素调整信息是指对图层元素进行位置调整的信息。

在实际应用中，各基准线包含基准线类型；获取所述基准线集合中的第一基准线和第二基准线的方法可以包括：

基于各基准线的基准线类型在所述基准线集合中确定至少一个待处理基准线；

根据各待处理基准线之间的距离，在所述至少一个待处理基准线中确定第一基准线和第二基准线。

其中，基准线类型是指根据基准线位置确定的类型，例如，基准线类型包含上基准线类型、下基准线类型、左基准线类型、右基准线类型、x轴中线基准线类型和y轴中线基准线类型；待处理基准线是指在基准线集合中确定的目标基准线类型的基准线；距离是指基准线与基准线之间的距离，第一基准线和第二基准线为不同的基准线类型，故第一基准线和第二基准线之间不交叉，可以计算两条基准线之间的距离。

具体的，在确定各图层元素对应的基准线后，可以基于基准线实现对图层元素的自动对齐；在基准线集合中获取相同类型的两条基准线，计算两条基准线之间的距离，进一步确定基准线集合中相同了信息类型的基准线之间的距离，进而基于各个距离确定目标距离，将目标距离对应的两条基准线，作为第一基准线和第二基准线。

需要注意的是，基准线集合可以是包含各种类型基准线的集合，也可以由各类型基准线对应的子集组成的集合；例如，基准线集合中包含上基准线子集，下基准线子集、x轴中线子集；则在基准线集合为各类型基准线子集组成的集合的情况下，计算各基准线子集中基准线之间的距离即可，而无需先确定基准线之间的距离。

在本申请一具体实施方式中，在基准线集合中确定上基准线类型的待处理基准线，生成上基准线子集；确定上基准线子集中各基准线之间的距离，任意确定距离为m的待处理基准线作为上基准线子集中的第一基准线和第二基准线。

进一步地，为了保证后续自动化对齐处理的准确度，可以基于预设距离阈值在距离中筛选目标距离，进而基于目标距离确定基准线；具体的，根据各待处理基准线之间的基准线距离，在所述至少一个待处理基准线中确定第一基准线和第二基准线的方法可以包括：

确定基准线距离小于预设距离阈值的基准线为第一基准线和第二基准线。

其中，预设距离阈值是指预先设置的用于确定目标距离的阈值；实际应用中，可以选择小于预设距离阈值的目标距离对应的基准线为第一基准线和第二基准线，从而便于后续减少对图层元素对齐距离的情况下，实现自动化的对齐。

具体的，可以基于预设距离阈值确定距离较小的基准线，也可以将该类型的基准线对应的距离由大到小进行排序，选取位于队尾的距离作为目标距离，其对应的基准线作为第一基准线和第二基准线。

在本申请一具体实施方式中，确定下基准线集合中基准线之间的距离为3、5、7、10；将距离由小到大进行排序，确定位于队首的距离3对应的基准线为第一基准线和第二基准线。

通过确定第一基准线和第二基准线，以便后续基于第一基准线和第二基准线实现对图层元素的对齐。

在确定第一基准线和第二基准线后，即可基于第一基准线和第二基准线进一步确定如何实现对图层元素的对齐。

实际应用中，根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息的方法可以包括：

确定所述第一图像元素对应的第一位置信息和所述第二图像元素对应的第二位置信息；

基于所述第一基准线与所述第二基准线之间的距离，确定所述第一图像元素和第二图像元素在对齐处理后是否存在交集；

在所述第一图像元素与所述第二图像元素不存在交集的情况下，将所述第一基准线与所述第二基准线之间的距离作为元素调整信息。

其中，第一图层元素是指对应的基准线中包含第一基准线的元素，第一位置信息是指第一图层元素在设计稿中的位置信息；第二图层元素是指对应的基准线中包含第二基准线的元素，第二位置信息是指第二图层元素在设计稿中的位置信息；元素调整信息是指对图层元素进行调整信息，例如，将图层元素1向右移动10px。

具体的，可以将第一图像元素向第二图像元素方向移动第一基准线与第二基准线之间的距离，从而使第一图像元素与第二图像元素共用一条基准线，减少基准线的数量；在移动后，可能会存在图层元素之间的重叠，故需要根据第一位置信息、第二位置信息以及距离，判断图层元素在移动后是否会存在重叠；若不会重叠，在将第一基准线与第二基准线之间的距离作为元素调整信息。

在本申请一具体实施方式中，如图4中的a部分所示，确定第一基准线为基准线1，第二基准线为2；计算基准线1与基准线2之间的距离为5；第一图层元素的第一位置信息为第一图层元素右下角坐标，第二图层元素的第二图层元素为第二图层的左上角坐标；基于距离5、右下角坐标和左上角坐标，确定将第一图层元素向第二图层元素移动后，两个元素之间不会存在交集，则将距离5作为第一图层元素和第二图层元素之间的元素调整信息。

通过判断图层元素之间在移动后是否会存在交集，从而避免在自动化UI对齐中出现图层元素之间的遮挡，导致对齐处理后，图层元素无法完全展示的情况出现。

上述描述了图层元素不存在交集的情况，而在图层元素存在交集的情况下，还可以基于如下方式确定元素调整信息，具体为，所述方法还包括：

在所述第一图像元素与所述第二图像元素存在交集的情况下，在所述基准线集合中确定第三基准线；

基于所述第一图像元素和所述第三基准线对应的第三图像元素生成元素调整信息。

其中，第三基准线是指在基准线集合中确定的与第一基准线和第二基准线为同一类型的基准线。

具体的，在确定移动后，第一图层元素与第二图层元素会存交集的情况下，可以基于距离在基准线集合中筛选第三图层元素，从而进一步确定第一图层元素与第三图层元素之间是否存在交集，若无交集，则可以将第一图层元素与第三图层元素之间的距离作为元素调整信息；若仍有交集，则可以进一步确定第四图层元素等等，直至得到元素调整信息。

在本申请一具体实施方式中，如图4中的b部分所示，确定第一图层元素与第二图层元素在移动后，会存在交集，则在距离列表中选取第二最小距离的第三图层元素，并进一步确定第一图层元素与第三图层元素之间在移动后，是否会存在交集；确定第一图层元素与第三图层元素不会存在交集的情况下，则将第一基准线与第二基准线之间的距离作为元素调整信息。

通过确定图层元素对应的元素调整信息，以便基于元素调整信息确定对图层元素的布局。

步骤208：根据各元素调整信息生成至少一个初始元素布局。

其中，初始元素布局是指基于元素调整信息确定的对图层元素的预布局信息。

具体的，在基准线集合中可以多次确定同类型的第一基准线和第二基准线，从而得到多个元素调整信息，基于同类型的多个元素调整信息生成一个初始元素布局；同理，还可以确定不同类型的元素调整信息，生成不同类型对应的各初始元素布局。

在本申请一具体实施方式中，通过在上基准线子集中确定第一基准线和第二基准线，获得元素调整信息；根据元素调整信息，生成初始元素布局1为：将图像元素m向上移动10px；通过在下基准线子集中确定第一基准线和第二基准线，获得元素调整信息，并根据元素调整信息，生成初始元素布局2为，将图像元素n向下移动5px。

通过元素调整信息确定对图层元素的初始元素布局，以便确定当前对齐处理可实现对齐效果，从而后续基于初始元素布局实现对图层元素的对齐，避免直接对图层元素进行对齐，导致繁琐的对齐处理过程。

步骤210：根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

其中，基准线的数量是指初始元素布局的情况下，图层元素对应的基准线的总数量；目标元素布局是指用于对图层元素进行位置调整的布局。

在实际应用中，可以随机选取初始元素布局作为目标元素，对图层元素进行调整；但保证对齐后的设计稿的对齐效果，尽可能减少基准线的数量，则可以基于下述方式确定目标元素布局，具体的，根据各初始元素布局中基准线的数量，确定目标元素布局的方法可以包括：

确定数量小于预设数量阈值的待处理初始元素布局；

在所述待处理初始元素布局的数量为1的情况下，将所述待处理初始元素布局作为目标元素布局；

在所述待处理初始元素布局的数量大于1的情况下，确定各待处理初始元素布局对应的元素调整信息，选取元素调整信息小于预设调整阈值的待处理初始元素布局作为目标元素布局。

其中，待处理初始元素布局是指初始元素布局对应的基准线数量小于预设数量阈值的初始元素布局；预设数量阈值是指预先设置的基准线的数量阈值，小于该预设数量阈值的初始元素布局可作为待处理初始元素布局。

具体的，确定预设数量阈值；选择初始元素布局对应的基准线的数量小于预设数量阈值的初始元素布局，作为待处理初始元素布局；进一步，统计待处理初始元素布局的数量，在数量为1的情况下，则将待处理初始元素布局作为目标元素布局即可；在数量为超过1的情况下，则确定各待处理初始元素布局对应的元素调整信息，基于元素调整信息选择调整距离较小的待处理初始元素布局作为目标元素布局。

在本申请一具体实施方式中，确定6个初始元素布局，各初始元素布局对应的基准线数量分别为15、10、14、13、12、11；基于基准线数量对初始元素布局对有小到大进行排序，确定位于队首的基准线数量10对应的初始元素布局，为目标元素布局，则基于目标元素布局对应的元素调整信息对图层元素进行位置调整，实现对图层元素的自动对齐。

在实现对图层元素的一次对齐后，可继续循环执行步骤206-步骤210，直至待对齐的图层元素对应的基准线数量小于等于预期阈值，从而结束对图层元素的对齐操作。

本申请的图层元素的对齐方法，利用了贪心算法实现对图层元素的局部对齐，此外，还可以采用动态规划、遗传算法等来实现对图层元素的对齐，但为了保证处理效率，本申请以贪心算法的方式进行图层元素的对齐，保证了实现方式的简单和高效。

本申请的图层元素的对齐方法，获取至少一个图层以及各图层的图层元素；确定各图层元素对应的基准线，并基于各基准线生成基准线集合；获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；根据各元素调整信息生成至少一个初始元素布局；根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

通过获取图层元素的基准线，从而可以基于基准线确定当前图层元素的对齐情况；在基准线集合中确定基准线，基于基准线和对应的图层元素生成元素调整信息，进而基于元素调整信息生成初始元素布局，从而可以根据不同初始元素布局对应的基准线数量，选择最终用于对图层元素进行对齐的目标元素布局；基于目标元素布局对图层元素进行调整，从而实现了对同一图层或不同图层上的图层元素进行自动化的对齐处理，提升了对图层元素进行对齐处理的效率。

下述结合附图5，以本申请提供的图层元素的对齐方法在文本元素的应用为例，对所述图层元素的对齐方法进行进一步说明。其中，图5示出了本申请一实施例提供的一种应用于文本元素的图层元素的对齐方法的处理流程图，具体包括以下步骤：

步骤502：响应于图层元素对齐请求，确定待对齐标题元素。

具体的，解析接收到的图层元素对齐请求，获得元素标识；基于元素标识在设计稿中确定元素标识对应的待对齐标题元素。

步骤504：确定待对齐标题元素对应的基准线，并基于各基准线生成基准线类型对应的基准线集合。

具体的，确定待对齐标题元素的包围框，并基于包围框确定待对齐标题元素对应的不同类型的基准线。

步骤506：在各基准线类型对应的基准线集合中，分别获取各基准线集合中的第一基准线和第二基准线。

具体的，在各基准线集合中，选择基准线之间距离较小的基准线，作为该基准线集合对应的第一基准线和第二基准线。

步骤508：根据各第一基准线对应的第一图层元素和第二基准线对应的第二图层元素，生成各基准线类型下的元素调整信息。

具体的，确定第一图像元素对应的第一位置信息和第二图像元素对应的第二位置信息；基于第一位置信息、第二位置信息和第一基准线与第二基准线之间的距离判断第一图层元素与第二图层元素在移动后是否存在交集，若否，则确定第一基准线与第二基准线之间的距离为元素调整信息。

步骤510：基于各元素调整信息生成各元素调整信息对应的初始元素布局。

具体的，可以在基准线集合中多次确定不同的第一基准线和第二基准线，生成不同的元素调整信息，进而可以基于不同的元素调整信息生成初始元素布局。

步骤512：根据各初始元素布局中基准线的数量，确定目标元素布局。

具体的，确定基准线数量小于预设数量阈值的初始元素布局为目标元素布局。

步骤514：基于目标元素布局调整各待对齐标题元素。

步骤516：继续执行步骤510-步骤514，直至待对齐元素对应的基准线的数量达到预期。

本申请的图层元素的对齐方法，获取至少一个图层以及各图层的图层元素；确定各图层元素对应的基准线，并基于各基准线生成基准线集合；获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；根据各元素调整信息生成至少一个初始元素布局；根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

通过获取图层元素的基准线，从而可以基于基准线确定当前图层元素的对齐情况；在基准线集合中确定基准线，基于基准线和对应的图层元素生成元素调整信息，进而基于元素调整信息生成初始元素布局，从而可以根据不同初始元素布局对应的基准线数量，选择最终用于对图层元素进行对齐的目标元素布局；基于目标元素布局对图层元素进行调整，从而实现了对同一图层或不同图层上的图层元素进行自动化的对齐处理，提升了对图层元素进行对齐处理的效率。

与上述方法实施例相对应，本申请还提供了图层元素的对齐装置实施例，图6示出了本申请一实施例提供的一种图层元素的对齐装置的结构示意图。如图6所示，该装置包括：

获取模块602，被配置为获取至少一个图层以及各图层的图层元素；

确定模块604，被配置为确定各图层元素对应的基准线，并基于各基准线生成基准线集合；

第一生成模块606，被配置为获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；

第二生成模块608，被配置为根据各元素调整信息生成至少一个初始元素布局；

调整模块610，被配置为根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

可选地，所述获取模块602，进一步被配置为：

响应于图层元素对齐请求，确定至少一个图层；

基于所述图层元素对齐请求中的至少一个元素标识，在所述至少一个图层上确定各元素标识对应的图层元素。

可选地，所述确定模块604，进一步被配置为：

确定各图层元素对应的元素包围框；

根据各元素包围框对应的边线和中线确定各图层元素对应的基准线；

基于各元素包围框的边线生成边线基准线集合，并基于各元素包围框的中线生成中线基准线集合。

可选地，各基准线包含基准线类型；所述第一生成模块406，进一步被配置为：

基于各基准线的基准线类型在所述基准线集合中确定至少一个待处理基准线；

根据各待处理基准线之间的距离，在所述至少一个待处理基准线中确定第一基准线和第二基准线。

可选地，所述第一生成模块606，进一步被配置为：

确定基准线距离小于预设距离阈值的基准线为第一基准线和第二基准线。

可选地，所述第一生成模块606，进一步被配置为：

确定所述第一图像元素对应的第一位置信息和所述第二图像元素对应的第二位置信息；

基于所述第一基准线与所述第二基准线之间的距离，确定所述第一图像元素和第二图像元素在对齐处理后是否存在交集；

在所述第一图像元素与所述第二图像元素不存在交集的情况下，将所述第一基准线与所述第二基准线之间的距离作为元素调整信息。

可选地，所述第一生成模块606，进一步被配置为：

在所述第一图像元素与所述第二图像元素存在交集的情况下，在所述基准线集合中确定第三基准线；

基于所述第一图像元素和所述第三基准线对应的第三图像元素生成元素调整信息。

可选地，所述第二生成模块408，进一步被配置为：

确定数量小于预设数量阈值的待处理初始元素布局；

在所述待处理初始元素布局的数量为1的情况下，将所述待处理初始元素布局作为目标元素布局；

在所述待处理初始元素布局的数量大于1的情况下，确定各待处理初始元素布局对应的元素调整信息，选取元素调整信息小于预设调整阈值的待处理初始元素布局作为目标元素布局。

本申请的图层元素的对齐装置，获取模块，获取至少一个图层以及各图层的图层元素；确定模块，确定各图层元素对应的基准线，并基于各基准线生成基准线集合；第一生成模块，获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；第二生成模块，根据各元素调整信息生成至少一个初始元素布局；调整模块，根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

本申请的图层元素的对齐装置，获取图层元素的基准线，从而可以基于基准线确定当前图层元素的对齐情况；在基准线集合中确定基准线，基于基准线和对应的图层元素生成元素调整信息，进而基于元素调整信息生成初始元素布局，从而可以根据不同初始元素布局对应的基准线数量，选择最终用于对图层元素进行对齐的目标元素布局；基于目标元素布局对图层元素进行调整吗，从而实现了对同一图层或不同图层上的图层元素进行自动化的对齐处理，提升了对图层元素进行对齐处理的效率。

上述为本实施例的一种图层元素的对齐装置的示意性方案。需要说明的是，该图层元素的对齐装置的技术方案与上述的图层元素的对齐方法的技术方案属于同一构思，图层元素的对齐装置的技术方案未详细描述的细节内容，均可以参见上述图层元素的对齐方法的技术方案的描述。

图7示出了根据本申请一实施例提供的一种计算设备700的结构框图。该计算设备700的部件包括但不限于存储器710和处理器720。处理器720与存储器710通过总线730相连接，数据库750用于保存数据。

计算设备700还包括接入设备740，接入设备740使得计算设备700能够经由一个或多个网络760通信。这些网络的示例包括公用交换电话网(PSTN)、局域网(LAN)、广域网(WAN)、个域网(PAN)或诸如因特网的通信网络的组合。接入设备740可以包括有线或无线的任何类型的网络接口(例如，网络接口卡(NIC))中的一个或多个，诸如IEEE802.11无线局域网(WLAN)无线接口、全球微波互联接入(Wi-MAX)接口、以太网接口、通用串行总线(USB)接口、蜂窝网络接口、蓝牙接口、近场通信(NFC)接口，等等。

在本申请的一个实施例中，计算设备700的上述部件以及图7中未示出的其他部件也可以彼此相连接，例如通过总线。应当理解，图7所示的计算设备结构框图仅仅是出于示例的目的，而不是对本申请范围的限制。本领域技术人员可以根据需要，增添或替换其他部件。

计算设备700可以是任何类型的静止或移动计算设备，包括移动计算机或移动计算设备(例如，平板计算机、个人数字助理、膝上型计算机、笔记本计算机、上网本等)、移动电话(例如，智能手机)、可佩戴的计算设备(例如，智能手表、智能眼镜等)或其他类型的移动设备，或者诸如台式计算机或PC的静止计算设备。计算设备700还可以是移动式或静止式的服务器。

其中，处理器720执行所述计算机指令时实现所述的图层元素的对齐方法的步骤。

上述为本实施例的一种计算设备的示意性方案。需要说明的是，该计算设备的技术方案与上述的图层元素的对齐方法的技术方案属于同一构思，计算设备的技术方案未详细描述的细节内容，均可以参见上述图层元素的对齐方法的技术方案的描述。

本申请一实施例还提供一种计算机可读存储介质，其存储有计算机指令，该计算机指令被处理器执行时实现如前所述图层元素的对齐方法的步骤。

上述为本实施例的一种计算机可读存储介质的示意性方案。需要说明的是，该存储介质的技术方案与上述的图层元素的对齐方法的技术方案属于同一构思，存储介质的技术方案未详细描述的细节内容，均可以参见上述图层元素的对齐方法的技术方案的描述。

上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

所述计算机指令包括计算机程序代码，所述计算机程序代码可以为源代码形式、对象代码形式、可执行文件或某些中间形式等。所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器(ROM，Read-OnlyMemory)、随机存取存储器(RAM，RandomAccessMemory)、电载波信号、电信信号以及软件分发介质等。需要说明的是，所述计算机可读介质包含的内容可以根据司法管辖区内立法和专利实践的要求进行适当的增减，例如在某些司法管辖区，根据立法和专利实践，计算机可读介质不包括电载波信号和电信信号。

需要说明的是，对于前述的各方法实施例，为了简便描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某些步骤可以采用其它顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定都是本申请所必须的。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。

以上公开的本申请优选实施例只是用于帮助阐述本申请。可选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本申请的内容，可作很多的修改和变化。本申请选取并具体描述这些实施例，是为了更好地解释本申请的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本申请。本申请仅受权利要求书及其全部范围和等效物的限制。

Claims (11)

1.一种图层元素的对齐方法，其特征在于，包括：

获取至少一个图层以及各图层的图层元素；

确定各图层元素对应的基准线，并基于各基准线生成基准线集合；

获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；

根据各元素调整信息生成至少一个初始元素布局；

根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

2.如权利要求1所述的方法，其特征在于，获取至少一个图层以及各图层的图层元素，包括：

响应于图层元素对齐请求，确定至少一个图层；

基于所述图层元素对齐请求中的至少一个元素标识，在所述至少一个图层上确定各元素标识对应的图层元素。

3.如权利要求1所述的方法，其特征在于，确定各图层元素对应的基准线，并基于各基准线生成基准线集合，包括：

确定各图层元素对应的元素包围框；

根据各元素包围框对应的边线和中线确定各图层元素对应的基准线；

基于各元素包围框的边线生成边线基准线集合，并基于各元素包围框的中线生成中线基准线集合。

4.如权利要求1所述的方法，其特征在于，各基准线包含基准线类型；

获取所述基准线集合中的第一基准线和第二基准线，包括：

基于各基准线的基准线类型在所述基准线集合中确定至少一个待处理基准线；

根据各待处理基准线之间的距离，在所述至少一个待处理基准线中确定第一基准线和第二基准线。

5.如权利要求4所述的方法，其特征在于，根据各待处理基准线之间的基准线距离，在所述至少一个待处理基准线中确定第一基准线和第二基准线，包括：

确定基准线距离小于预设距离阈值的基准线为第一基准线和第二基准线。

6.如权利要求1所述的方法，其特征在于，根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息，包括：

确定所述第一图像元素对应的第一位置信息和所述第二图像元素对应的第二位置信息；

基于所述第一基准线与所述第二基准线之间的距离，确定所述第一图像元素和第二图像元素在对齐处理后是否存在交集；

在所述第一图像元素与所述第二图像元素不存在交集的情况下，将所述第一基准线与所述第二基准线之间的距离作为元素调整信息。

7.如权利要求6所述的方法，其特征在于，所述方法还包括：

在所述第一图像元素与所述第二图像元素存在交集的情况下，在所述基准线集合中确定第三基准线；

基于所述第一图像元素和所述第三基准线对应的第三图像元素生成元素调整信息。

8.如权利要求1所述的方法，其特征在于，根据各初始元素布局中基准线的数量，确定目标元素布局，包括：

确定数量小于预设数量阈值的待处理初始元素布局；

在所述待处理初始元素布局的数量为1的情况下，将所述待处理初始元素布局作为目标元素布局；

在所述待处理初始元素布局的数量大于1的情况下，确定各待处理初始元素布局对应的元素调整信息，选取元素调整信息小于预设调整阈值的待处理初始元素布局作为目标元素布局。

9.一种图层元素的对齐装置，其特征在于，包括：

获取模块，被配置为获取至少一个图层以及各图层的图层元素；

确定模块，被配置为确定各图层元素对应的基准线，并基于各基准线生成基准线集合；

第一生成模块，被配置为获取所述基准线集合中的第一基准线和第二基准线，并根据所述第一基准线对应的第一图层元素和所述第二基准线对应的第二图层元素生成至少一种元素调整信息；

第二生成模块，被配置为根据各元素调整信息生成至少一个初始元素布局；

调整模块，被配置为根据各初始元素布局中基准线的数量，确定目标元素布局，并基于所述目标元素布局调整各图层元素。

10.一种计算设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机指令，其特征在于，所述处理器执行所述计算机指令时实现权利要求1-8任意一项所述方法的步骤。

11.一种计算机可读存储介质，其存储有计算机指令，其特征在于，该计算机指令被处理器执行时实现权利要求1-8任意一项所述方法的步骤。