CN106502701A - 一种创建网页时组件对齐的方法及装置 - Google Patents

Abstract

本发明提供了一种创建网页时组件对齐的方法及装置，获取创建网页时待进行对齐的第一组件，以及与所述第一组件进行对齐的第二组件；确定和所述第一组件中的第一边线，以及所述第二组件中第二边线；若确定出第一边线和所述第二边线之间的距离小于设定阈值时，将所述第二组件和所述第一组件对齐，能够提高创建网页过程中组件对齐的效率和精度，降低精细对齐的操作难度。

Description

一种创建网页时组件对齐的方法及装置

技术领域

本发明涉及网页设计领域，具体而言，涉及一种创建网页时组件对齐的方法及装置

背景技术

通常情况下，创建网页需要专业人员通过编程实现，这就要求网页创建人员具备较高的专业性，对于普通用户来说无法实现网页创建，局限性较强。为了增强创建网页的通用性，提出了快速创建网页的方法，达到网页可视化制作的目的，例如将一组html代码片段定义为组件，通过预先设定的网页设计器，用户可以进行选择、拖拽改变组件的位置及大小、设置组件的属性等操作改变不见外观和功能，通过不同组件组合成目标网页。

但是，在通过组件实现网页创建的过程中，当拖拽页面对齐组件时，仅能够将页面中的组件对齐到被对齐组件的外边缘，当需要将对齐组件向被对齐组件的外边缘的其他对齐组件对齐时，只有通过目测调节实现对齐，导致现有的组件精细对齐效率较低、精度较低、精细对齐的操作难度大。

发明内容

有鉴于此，本发明的目的在于提供一种创建网页时组件对齐的方法，以提高提高创建网页过程中组件对齐的效率和精度，降低精细对齐的操作难度。

第一方面，本发明实施例提供了一种创建网页时组件对齐的方法，包括：获取创建网页时待进行对齐的第一组件，以及与所述第一组件进行对齐的第二组件；确定所述第一组件中的第一边线，以及所述第二组件中第二边线；若确定出第一边线和所述第二边线之间的距离小于设定阈值时，将所述第二组件和所述第一组件对齐。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，按照下述方式确定所述第一边线和第二边线之间的距离：获取所述第一边线的任意一点，记为A点，由A点向第二边线或第二边线的延长线作垂线，所述垂线与第二边线或第二边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离；或获取所述第二边线的任意一点，记为A点，由A点向第一边线或第一边线的延长线作垂线，所述垂线与第一边线或第一边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，所述第一组件的第一边线和第二组件中的第二边线在设定坐标系中竖直方向对齐；所述第一组件和第二组件的形状相同；将所述第二组件和所述第一组件对齐，包括：确定所述第一边线的任意一点在设定坐标系中的第一横坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二横坐标值；获取所述第一横坐标的值和第二横坐标的值之间的差值的绝对值；若所述差值的绝对值小于设定范围时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

结合第一方面，本发明实施例提供了第一方面的第三种可能的实施方式，所述第一组件的第一边线和第二组件中的第二边线在设定坐标系中水平方向对齐；所述第一组件和第二组件的形状相同；将所述第二组件与第一组件对齐，包括：确定所述第一边线的任意一点在设定坐标系中的第一纵坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二纵坐标值；获取所述第一纵坐标的值和第二纵坐标的值之间的差值的绝对值；若所述差值的绝对值小于设定范围时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

结合第一方面～第一方面的第三种可能的实施方式中的任一种实施方式，本发明实施例提供了第一方面的第四种可能的实施方式，所述第一边线包含第一组件的中线，所述第二边线包含第二组件的中线；其中所述中线包含纵向中线和横向中线，所述纵向中线垂直设定坐标系中的水平轴，所述横向中线平行设定坐标系的水平轴。

第二方面，本发明实施例提供了一种创建网页时组件对齐的装置，包括：获取模块、确定模块、执行模块；其中，所述获取模块，用于获取创建网页时待进行对齐的第一组件，以及与所述第一组件进行对齐的第二组件；所述确定模块，，用于确定所述第一组件中的第一边线，所述第二组件中第二边线，以及确定第一边线和所述第二边线之间的距离；所述执行模块，用于若确定出第一边线和所述第二边线之间的距离小于设定阈值时，将所述第二组件和所述第一组件对齐。

结合第二方面，本发明实施例提供了第二方面的第一种可能的实施方式，所述确定模块，具体用于获取所述第一边线的任意一点，记为A点，由A点向第二边线或第二边线的延长线作垂线，所述垂线与第二边线或第二边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离；或获取所述第二边线的任意一点，记为A点，由A点向第一边线或第一边线的延长线作垂线，所述垂线与第一边线或第一边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离。

结合第二方面，本发明实施例提供了第二方面的第二种可能的实施方式，所述第一组件中的第一边线和第二组件中的第二边线在设定坐标系中竖直方向对齐；所述第一组件和第二组件的形状相同；所述执行模块，具体用于确定所述第一边线的任意一点在设定坐标系中的第一横坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二横坐标值；获取所述第一横坐标的值和第二横坐标的值之间的差值的绝对值；若所述差值的绝对值小于设定范围时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

结合第二方面，本发明实施例提供了第二方面的第三种可能的实施方式，所述第一组件的第一边线和第二组件中的第二边线在设定坐标系中水平方向对齐；所述第一组件和第二组件的形状相同；所述执行模块，具体用于确定所述第一边线的任意一点在设定坐标系中的第一纵坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二纵坐标值；获取所述第一纵坐标的值和第二纵坐标的值之间的差值的绝对值；若所述差值的绝对值小于设定阈值时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

结合第二方面～第二方面的第三种可能的实施方式中的任一种实施方式，所述确定模块用于确定所述第一边线包含第一组件的中线，所述第二边线包含第二组件的中线；其中所述中线包含纵向中线和横向中线，所述纵向中线垂直设定坐标系中的水平轴，所述横向中线平行设定坐标系的水平轴。

本发明实施例提供了一种创建网页时组件对齐的方法及装置，获取创建网页时待进行对齐操作的第一组件，以及与第一组件进行对齐的第二组件；确定第一组件中的第一边线，以及第二组件中的第二边线；若确定出第一边线和所述第二边线之间的距离小于设定阈值时，将所述第二组件和所述第一组件对齐。与现有技术的创建网页相比，提高了组件对齐的效率和精度，降低了组件精细对齐的操作难度。

为使本发明的上述目的、特征和优点能更明显易懂，下文特举较佳实施例，并配合所附附图，作详细说明如下。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1示出了本发明实施例所提供的创建网页时组件对齐的方法流程图；

图2a示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之一；

图2b示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之二；

图2c示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之三；

图2d示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之四；

图2e示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之五；

图2f示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之六；

图3a示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之一；

图3b示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之二；

图3c示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之三；

图3d示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之四；

图3e示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之五；

图3f示出了本发明实施例所提供的创建网页时组件对齐的绘制方法之六；

图4示出了本发明实施例所提供的创建网页时组件对齐的装置。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明的实施例，本领域技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。

考虑到网页可视化制作中，绘制组件对齐时需要手动拖拽进行对齐，并通过人眼判断是否对齐，因而效率较低，准确性较差，精细对齐的操作难度较大，基于此，本发明实施例提供了一种创建网页时组件对齐的方法，能够提高创建网页过程中组件对齐的效率和精度，降低精细对齐的操作难度。下面通过实施例进行描述。

实施例1

本发明实施例一提出了一种创建网页时组件对齐的方法，如图1所示，其具体流程如下所述：

步骤11，获取创建网页时待进行对齐的第一组件，以及与第一组件进行对齐的第二组件。

在本发明实施例一提出的技术方案中，通过html代码片段定义组件，组件可以是创建网页所需要的任何形状，其维度可以是一维、二维、三维图形，例如点，线，圆形、方形、矩形、三角形，长方体、正方体等。在本发明实施例一提出的技术方案中，组件所在网页的坐标的维度可以是一维、二维、三维，具体坐标值可以按照像素进行划分，也可以通过自定义的方式实现。

在本实施例一提出的技术方案中，组件的形状将以二维图形矩形为例进行详细阐述。组件的大小可以相同，也可以不相同。

为便于阐述，本发明实施例一提出的技术方案中，将组件做出第一组件和第二组件的区分。其中第一组件可以是实际页面上原有的组件，例如已经设置好的组件，该第一组件可以视为后续组件对齐时的参照物。第二组件可以是需要与第一组件对齐的组件。

一种较佳地实现方式，在本发明实施例一提出的技术方案中，具体的实施例一中首先在引用的实际页面上覆盖一层与页面相同大小、坐标也相同的绘图页面。其中绘图页面包括任意可以用来绘图的软件，在本实施例一中采用svg绘图层，将绘图层设置为只显示不参与用户交互模式，所有对齐线都绘制在这个绘图层上。

当接收到绘制第二组件指令时，记录下所有组件的边线中线坐标，其中边线中线包括上边线、下边线、纵向中线，左边线、右边线以及横向中线中的一种或多种。在本发明实施例一提出的技术方案中，当接收到绘制第二组件指令时，记录下所有组件的边线中线坐标，其中边线中线包括上边线、下边线、纵向中线，左边线、右边线以及横向中线。

步骤12，确定第一组件中的第一边线，以及第二组件中的第二边线。

一种较佳地实现方式，在本发明实施例提出的技术方案中，设定一阈值记为L,判断第二组件的边线中线坐标是否与第一组件的边线中线坐标距离的绝对值是否小于或者等于设定的阈值L，若小于或者等于L，即将第二组件中与第一组件中的坐标距离的绝对值小于设定阈值的确定某条边线中线坐标分别记为第二边线与第一边线。

步骤13，若确定第一边线和第二边线之间的距离小于或者设定阈值L时，将第二组件和第一组件对齐。

一种较佳地实现方式，在本发明实施例提出的技术方案中，按照下述方式确定第一边线与第二边线之间的距离：

第一种方式：获取第一边线上的任意一点，记为A点，由A点向第二边线或第二边线的延长线作垂线，交于点B，将A、B两点之间的距离记为第一边线与第二边线的距离。

第二种方式：获取第二边线上的任意一点，记为A点，由A点向第一边线或第一边线的延长线作垂线，交于点B，将A、B两点之间的距离记为第一边线与第二边线的距离。

第三种方式：获取第一边线上的任意一点，记为A点，取第二边线上的任意一点，记为B点，将A点与B点的横坐标差值或者纵坐标差值记为第一边线与第二边线的距离。

第一组件和第二组件对齐，可以包含第一组件和第二组件在垂直方向上对齐、第一组件和第二组件在水平方向上对齐。具体地，在垂直方向对齐可以包含矩形中的左边对齐、右边对齐、纵向中线对齐，水平方向上可以包含矩形的上边对齐、下边对齐、横向中线对齐。

其中第一组件中的第一边线和第二组件中的第二边线在设定坐标系中竖直方向对齐，第一组件和第二组件的形状相同，将第二边线和第一边线对齐，包括：确定第一边线的任意一点在设定坐标系中的第一横坐标的值，和第一边线对齐的第二边线的任意一点在设定坐标系中的第二横坐标值；获取第一横坐标的值和第二横坐标之间的差值的绝对值；若该绝对值小于设定阈值时，确定绝对值最小的坐标值为移动偏移值，将第二组件和第一组件对齐。

第一边线包含第一组件的中线，第二边线包含第二组件的中线；其中中线包含纵向中线和横向中线，纵向中线垂直设定坐标系中的水平轴，横向中线平行设定坐标系的水平轴。

一种较佳地实现方式，在本发明实施例一提出的技术方案中，判断出第一组件的第一边线和第二组件的第二边线垂直对齐；第一组件和第二组件形状相同。

其中第一组件的第一边线和第二组件的第二边线在设定坐标系中竖直方向对齐，可以包含以下几种情况，分别如图2a、2b、2c、2d、2e，2f，其中x₁,x₂均代表具体数值。

第一种情况，如图2a所示，第一边线为第一组件的左边，第二边线为第二组件的左边，第一边线上任意一点A的横坐标值为x₁,第二边线上任意一点B的横坐标为x₂,设定阈值L，将|x1-x2|与L比较，当|x1-x2|小于或等于L时，使得第二边线与第一边线对齐。

第二种情况，如图2b所示，第一边线为第一组件的右边，第二边线为第二组件的右边，第一边线上任意一点A的横坐标值为x₁,第二边线上任意一点B的横坐标为x₂,设定阈值L，将|x1-x2|与L比较，当|x1-x2|小于或等于L时，使得第二边线与第一边线对齐。

第三种情况，如图2c所示，第一边线为第一组件的右边，第二边线为第二组件的左边，第一边线上任意一点A的横坐标值为x₁,第二边线上任意一点B的横坐标为x₂,设定阈值L，将|x1-x2|与L比较，当|x1-x2|小于或等于L时，使得第二边线与第一边线对齐。

第四种情况，如图2d所示，第一边线为第一组件的左边，第二边线为第二组件的右边，第一边线上任意一点A的横坐标值为x₁,第二边线上任意一点B的横坐标为x₂,设定阈值L，将|x1-x2|与L比较，当|x1-x2|小于或等于L时，使得第二边线与第一边线对齐。

第五种情况，如图2e所示，第一边线为第一组件的纵向中线，第二边线为第二组件的纵向中线，第一边线上任意一点A的横坐标值为x₁,第二边线上任意一点B的横坐标为x₂,设定阈值L，将|x1-x2|与L比较，当x1-x2|小于或等于L时，使得第二边线与第一边线对齐。

特别的，如图2f所示，当第一组件至少有两个时，为便于阐述，将其中一个第一组件记为第一组件a,将另一个第一组件记为第一组件b，对应的边线为第一边线a与第一边线b，第一边线a上任意一点B的横坐标值为x₁,第一边线b上任意一点C的横坐标值为x₁’,第二边线上任意一点A的横坐标为x₂,且|x1-x2|与|x1'-x2|均小于或者等于L，比较|x1-x2|与|x1'-x2|的大小，若|x1-x2|<|x1'-x2|,则|x1-x2|为移动偏移值，使得第二边线与第一边线a对齐。

将第二组件与第一组件对齐，还包括，第一组件中的第一边线与第二组件中的第二边线在设定坐标系中水平方向对齐；第一组件和第二组件的形状相同，将第二组件与第一组件对齐，包括：

确定第一边线的任意一点在设定坐标系中的第一纵坐标值，和第一边线对齐的第二边线的任意一点在设定坐标系中的第二纵坐标值；获取第一纵坐标值和第二纵坐标值之间差值的绝对值；若该绝对值小于或者设定阈值L时，确定绝对值最小的坐标值为移动偏移值，将第二边线与第一边线对齐。

其中第一组件的第一边线和第二组件的第二边线在设定坐标系在水平方向对齐，可以包含以下几种情况，分别如图3a、3b、3c、3d、3e，3f,其中y₁,y₂均代表具体数值。

第一种情况，如图3a所示，第一边线为第一组件的上边，第二边线为第二组件的上边，第一边线上任意一点A的纵坐标值为y₁，第二边线上任意一点B的纵坐标为y₂,设定阈值L，将|y1-y2|于L比较，当|y1-y2|小于或等于L时，使得第二边线与第一边线对齐。

第二种情况，如图3b所示，第一边线为第一组件的下边，第二边线为第二组件的下边，第一边线上任意一点A的纵坐标值为y₁，第二边线上任意一点B的纵坐标为y₂,设定阈值L，将|y1-y2|于L比较，当|y1-y2|小于或等于L时，使得第二边线与第一边线对齐。

第三种情况，如图3c所示，第一边线为第一组件的上边，第二边线为第二组件的下边，第一边线上任意一点A的纵坐标值为y₁，第二边线上任意一点B的纵坐标为y₂,设定阈值L，将|y1-y2|于L比较，当|y1-y2|小于或等于L时，使得第二边线与第一边线对齐。

第四种情况，如图3d所示，第一边线为第一组件的下边，第二边线为第二组件的上边，第一边线上任意一点A的纵坐标值为y₁，第二边线上任意一点B的纵坐标为y₂,设定阈值L，将|y1-y2|于L比较，当|y1-y2|小于或等于L时，使得第二边线与第一边线对齐。

第五种情况，如图3e所示，第一边线为第一组件的横向中线，第二边线为第二组件的横向中线，第一边线上任意一点A的纵坐标值为y₁，第二边线上任意一点B的纵坐标为y₂,设定阈值L，将|y1-y2|于L比较，当|y1-y2|小于或等于L时，使得第二边线与第一边线对齐。

特别的，如图3f所示，当第一组件至少有两个时，为便于阐述，将其中一个组件记为第一组件a,将另一个组件记为第一组件b,对应的边线为第一边线a与第一边线b，第一边线a上任意一点B的纵坐标为y₁,第一边线b上任意一点C的横坐标为y₁’，第二边线上任意一点A的纵坐标为y₂，且|y1-y2|与|y1'-y2|均小于或者等于L，比较|y1-y2|与|y1'-y2|的大小，若|y1-y2|<|y1'-y2|,则|y1-y2|为移动偏移值，使得第二边线与第一边线a对齐。

本发明实施例一提供了一种创建网页时组件对齐的方法，获取创建网页时待进行对齐操作的第一组件，以及与第一组件进行对齐的第二组件；确定第一组件中的第一边线，以及第二组件中的第二边线；若确定出第一边线和第二边线之间的距离小于设定阈值时，将第二组件和第一组件对齐。与现有技术的创建网页相比，提高了组件对齐的效率和精度，降低了组件精细对齐的操作难度。

实施例2

本发明实施例二提出一种创建网页时组件对齐的装置400，如图4所示，该装置包括：获取模块401、确定模块402、执行模块403；其中，

获取模块401，用于获取创建网页时待进行对齐的第一组件，以及与第一组件进行对齐的第二组件；

确定模块402，用于确定第一组件中的第一边线，第二组件中第二边线，以及确定第一边线和第二边线之间的距离。

执行模块403，用于若确定出第一边线和第二边线之间的距离小于设定阈值时，将第二组件和第一组件对齐。

确定模块402，具体用于确定第一边线与第二边线之间的距离，确定方法如下所述：

第一种方式：获取第一边线的任意一点，记为A点，由A点向第二边线或第二边线的延长线作垂线交于一点，记为B点，将A、B两点之间的距离记为第一边线与第二边线的距离。

第二种方式：获取所述第二边线的任意一点，记为A点，由A点向第一边线或第一边线的延长线作垂线交于一点，记为B点，将A、B两点之间的距离记为第一边线与第二边线的距离。

第三种方式：获取第一边线上的任意一点，记为A点，获取第二边线上的任意一点，记为B点，将A点与B点的横坐标差值或者纵坐标差值记为第一边线与第二边线的距离。

第一组件中的第一边线和第二组件中的第二边线在设定坐标系中竖直方向对齐；第一组件和第二组件的形状相同；

执行模块403，具体用于确定所述第一边线的任意一点在设定坐标系中的第一横坐标的值，和第一边线对齐的第二边线的任意一点在设定坐标系中的第二横坐标值；获取第一横坐标的值和第二横坐标的值之间的差值的绝对值；若差值的绝对值小于设定范围时，确定绝对值最小的坐标值为移动偏移值，将第二组件和第一组件对齐。

第一组件的第一边线和第二组件中的第二边线在设定坐标系中水平方向对齐；第一组件和第二组件的形状相同；

执行模块403，具体用于确定第一边线的任意一点在设定坐标系中的第一纵坐标的值，和第一边线对齐的第二边线的任意一点在设定坐标系中的第二纵坐标值；获取第一纵坐标的值和第二纵坐标的值之间的差值的绝对值；若差值的绝对值小于设定阈值时，确定绝对值最小的坐标值为移动偏移值，将第二组件和第一组件对齐。

确定模块402用于确定第一边线包含第一组件的中线，第二边线包含第二组件的中线；其中中线包含纵向中线和横向中线，纵向中线垂直设定坐标系中的水平轴，横向中线平行设定坐标系的水平轴。

下面以一实例进行详细阐述：

获取模块401获取创建网页时待进行对齐的第一组件，以及与第一组件进行对齐的第二组件，其中第一组件有三个，分别记为第一组件a,第一组件b，第一组件c,第二组件和所有第一组件均为矩形；设定第二组件与第一组件边线中线坐标距离的绝对值为6mm,分别取在设定坐标系中竖直方向上的第一组件a的右边线、第一组件b的右边线、第一组件c的右边线以及第二组件的右边线，分别记为第一边线a、第一边线b、第一边线c以及第二边线；各取第一边线a、第一边线b、第一边线c以及第二边线上任意一点分别记为A、B、C、D，其中A、B、C、D的横坐标分别为11mm、13mm、10mm、15mm；第二组件与第一组件的边线坐标距离的绝对值为3mm、2mm、5mm,其中3mm、2mm、5mm均小于6mm，而且2mm最小，则取2mm为吸附坐标偏移值，使得第二组件与第一边线b对齐。

基于上述分析与现有技术相比，本发明实施例提供的技术方案中，获取创建网页时待进行对齐操作的第一组件，以及与第一组件进行对齐的第二组件；确定第一组件中的第一边线，以及第二组件中的第二边线；若确定出第一边线和第二边线之间的距离小于设定阈值时，将第二组件和第一组件对齐。与现有技术的创建网页相比，提高了组件对齐的效率和精度，降低了组件精细对齐的操作难度。

本发明实施例所提供的创建网页时组件对齐的方法及装置，包括存储了程序代码的计算机可读存储介质，所述程序代码包括的指令可用于执行前面方法实施例中所述的方法，具体实现可参见方法实施例，在此不再赘述。

本发明实施例所提供的装置，其实现原理及产生的技术效果和前述方法实施例相同，为简要描述，装置实施例部分未提及之处，可参考前述方法实施例中相应内容。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，前述描述的***、装置和单元的具体工作过程，均可以参考上述方法实施例中的对应过程，在此不再赘述。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释，此外，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

最后应说明的是：以上所述实施例，仅为本发明的具体实施方式，用以说明本发明的技术方案，而非对其限制，本发明的保护范围并不局限于此，尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，其依然可以对前述实施例所记载的技术方案进行修改或可轻易想到变化，或者对其中部分技术特征进行等同替换；而这些修改、变化或者替换，并不使相应技术方案的本质脱离本发明实施例技术方案的精神和范围。都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (10)

1.一种创建网页时组件对齐的方法，其特征在于，包括：

获取创建网页时待进行对齐的第一组件，以及与所述第一组件进行对齐的第二组件；

确定所述第一组件中的第一边线，以及所述第二组件中第二边线；

若确定出第一边线和所述第二边线之间的距离小于设定阈值时，将所述第二组件和所述第一组件对齐。

2.根据权利要求1所述的方法，其特征在于，按照下述方式确定所述第一边线和第二边线之间的距离：

获取所述第一边线的任意一点，记为A点，由A点向第二边线或第二边线的延长线作垂线，所述垂线与第二边线或第二边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离；或

获取所述第二边线的任意一点，记为A点，由A点向第一边线或第一边线的延长线作垂线，所述垂线与第一边线或第一边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离。

3.根据权利要求1所述的方法，其特征在于，所述第一组件中的第一边线和第二组件中的第二边线在设定坐标系中竖直方向对齐；所述第一组件和第二组件的形状相同；

将所述第二组件和所述第一组件对齐，包括：

确定所述第一边线的任意一点在设定坐标系中的第一横坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二横坐标值；

获取所述第一横坐标的值和第二横坐标的值之间的差值的绝对值；

若所述差值的绝对值小于设定范围时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

4.根据权利要求1所述的方法，其特征在于，所述第一组件的第一边线和第二组件中的第二边线在设定坐标系中水平方向对齐；所述第一组件和第二组件的形状相同；

将所述第二组件与第一组件对齐，包括：

确定所述第一边线的任意一点在设定坐标系中的第一纵坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二纵坐标值；

获取所述第一纵坐标的值和第二纵坐标的值之间的差值的绝对值；

若所述差值的绝对值小于设定阈值时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

5.根据权利要求1～4任一所述的方法，其特征在于，所述第一边线包含第一组件的中线，所述第二边线包含第二组件的中线；

其中所述中线包含纵向中线和横向中线，所述纵向中线垂直设定坐标系中的水平轴，所述横向中线平行设定坐标系的水平轴。

6.一种创建网页时组件对齐的装置，其特征在于，包括：获取模块、确定模块、执行模块；其中，

所述获取模块，用于获取创建网页时待进行对齐的第一组件，以及与所述第一组件进行对齐的第二组件；

所述确定模块，用于确定所述第一组件中的第一边线，所述第二组件中第二边线，以及确定第一边线和所述第二边线之间的距离；

所述执行模块，用于若确定出第一边线和所述第二边线之间的距离小于设定阈值时，将所述第二组件和所述第一组件对齐。

7.根据权利要求6所述的装置，其特征在于，所述确定模块，具体用于获取所述第一边线的任意一点，记为A点，由A点向第二边线或第二边线的延长线作垂线，所述垂线与第二边线或第二边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离；或

获取所述第二边线的任意一点，记为A点，由A点向第一边线或第一边线的延长线作垂线，所述垂线与第一边线或第一边线的延长线交于一点，记为B点，将所述A、B两点之间的距离记为所述第一边线与第二边线的距离。

8.根据权利要求6所述的装置，其特征在于，所述第一组件中的第一边线和第二组件中的第二边线在设定坐标系中竖直方向对齐；所述第一组件和第二组件的形状相同；

所述执行模块，具体用于确定所述第一边线的任意一点在设定坐标系中的第一横坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二横坐标值；获取所述第一横坐标的值和第二横坐标的值之间的差值的绝对值；若所述差值的绝对值小于设定范围时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

9.根据权利要求6所述的装置，其特征在于，所述第一组件的第一边线和第二组件中的第二边线在设定坐标系中水平方向对齐；所述第一组件和第二组件的形状相同；

所述执行模块，具体用于确定所述第一边线的任意一点在设定坐标系中的第一纵坐标的值，和所述第一边线对齐的第二边线的任意一点在设定坐标系中的第二纵坐标值；获取所述第一纵坐标的值和第二纵坐标的值之间的差值的绝对值；若所述差值的绝对值小于设定阈值时，确定绝对值最小的坐标值为移动偏移值，将所述第二组件和第一组件对齐。

10.根据权利要求6～9任一所述的装置，其特征在于，所述确定模块用于确定所述第一边线包含第一组件的中线，所述第二边线包含第二组件的中线；

其中所述中线包含纵向中线和横向中线，所述纵向中线垂直设定坐标系中的水平轴，所述横向中线平行设定坐标系的水平轴。