CN106528736A - 一种拖拽页面组件时显示对齐线的方法及装置 - Google Patents

Abstract

本发明提供了一种拖拽页面组件时显示对齐线的方法及装置，其中，获取创建网页时待进行对齐操作的第一组件，以及与所述第一组件进行对齐的第二组件；确定所述第一组件中的第一边线，以及所述第二组件中的第二边线；将所述第二边线延长作为对齐线呈现，能够提高创建网页过程中组件对齐的效率和精度。

Description

一种拖拽页面组件时显示对齐线的方法及装置

技术领域

本发明涉及网页设计领域，具体而言，涉及一种拖拽页面组件时显示对齐线的方法及装置。

背景技术

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

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

发明内容

有鉴于此，本发明的目的在于提供一种拖拽页面组件时显示对齐线的方法及装置，以提高在网页可视化制作过程中绘制组件对齐的效率和精度。

第一方面，本发明实施例提供了一种拖拽页面组件时显示对齐线的方法，包括获取创建网页时待进行对齐操作的第一组件，以及与所述第一组件进行对齐的第二组件；确定所述第一组件中的第一边线，以及第二组件中的第二边线；将所述第二边线延长作为对齐线呈现。

结合第一方面，本发明实施例提供了第一方面的第一种可能的实施方式，其中，所述第一组件的第一边线和第二组件中的第二边线垂直对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；将所述第二边线延长作为对齐线呈现，包括：确定所述第一边线的两个端点在设定坐标系中的第一纵坐标的两个对应值，和所述第一边线对齐的第二边线的两个端点在设定坐标系中的第二纵坐标的两个对应值；将所述四个值中最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

结合第一方面，本发明实施例提供了第一方面的第二种可能的实施方式，其中，所述第一组件的第一边线和第二组件中的第二边线水平对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；确定所述第一边线的两个端点在设定坐标系中的第一横坐标的两个对应值，和所述第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的两个对应值；将所述四个值中最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

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

结合第一方面或第一方面的第一种可能的实施方式，本发明实施例提供了第一方面的第四种可能的实施方式，其中，还包括：将所述对齐线按照创建网页页面的形状、大小展示。

第二方面，本发明实施例提供了一种拖拽页面组件时显示对齐线的装置，包括：获取模块、确定模块、执行模块；其中，所述获取模块，用于获取创建网页时待进行对齐操作的第一组件，以及与所述第一组件进行对齐的第二组件；所述确定模块，用于确定所述第一组件中的第一边线，以及所述第二组件中的第二边线；所述执行模块，用于将所述第二边线延长作为对齐线呈现。

结合第二方面，本发明实施例提供了第二方面的第一种可能的实施方式，所述第一组件的第一边线和第二组件中的第二边线垂直对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；所述执行模块，具体用于确定所述第一边线的端点在设定坐标系中的第一纵坐标的最小值，和所述第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；将所述最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

结合第二方面，本发明实施例提供了第二方面的第二种可能的实施方式，所述第一组件的第一边线和第二组件中的第二边线水平对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；所述执行模块，具体用于确定所述第一边线的端点在设定坐标系中的第一横坐标的最小值，和所述第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；将所述最小值对应的端点和所述最大值对应的端点连线作延长后作为对齐线呈现。

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

结合第二方面或者第二方面的第一种可能的实施方式，本发明实施例提供了第二方面的第四种可能的实施方式，所述执行模块还包括：将所述对齐线按照创建网页页面的形状、大小展示。

本发明实施例提供了一种拖拽页面组件时显示对齐线的方法及装置，其中，获取创建网页时待进行对齐操作的第一组件，与第一组件进行对齐的第二组件；确定第一组件中的第一边线，以及待进行对齐的第二组件中的第二边线；将第二边线延长作为对齐线呈现。与现有技术的创建网页相比，提高了组件对齐的效率和精度。

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

附图说明

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

图1示出了本发明实施例所提供的拖拽页面组件时显示对齐线的方法的流程图；

图2a示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之一；

图2b示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之二；

图2c示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之三；

图2d示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之四；

图2e示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之五；

图3a示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之一；

图3b示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之二；

图3c示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之三；

图3d示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之四；

图3e示出了本发明实施例所提供的拖拽页面组件时显示对齐线的绘制方法之五；

图4示出了本发明实施例所提供的拖拽页面组件时显示对齐线的装置。

具体实施方式

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

考虑到网页可视化制作中，绘制组件对齐时需要人眼判断是否对齐，因而效率较低，准确性较差，基于此，本发明实施例提供了一种拖拽页面组件时显示对齐线的方法，与现有技术的创建网页相比，提高了组件对齐的效率和精度，下面通过实施例进行描述。

实施例1

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

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

在本发明实施例一提出的技术方案中，通过html代码片段定义组件，组件可以是创建网页所需要的任何形状，例如圆形、方形、矩形、三角形等。在本实施例一提出的技术方案中，组件的形状将以矩形为例进行详细阐述。组件的大小可以相同，也可以不相同。

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

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

当接收到绘制第二组件指令时，记录下所有组件的边线中线坐标，其中边线中线包括上边线、下边线、纵向边线，左边线、右边线、横向中线。

步骤12，确定第一组件中的第一边线，以及待进行对齐的第二组件中的第二边线。

一种较佳地实现方式，在本发明实施例一提出的技术方案中，判断第二组件的边线中线坐标是否与第一组件的边线中线坐标相等，若相等，即将第二组件中与第一组件中的坐标相等的确定某条边线中线分别记为第二边线与第一边线，并在svg层上绘制一条对齐线。

其中第一边线与第二边线可以是第一组件和第二组件的上边、下边、纵向中线，或者是左边、右边、横向中线。

将上边、下边、纵向中线统称为纵向边线中线，将左边、右边、横向中线统称为横向边线中线。

步骤13，将第二边线延长线作为对齐线呈现。

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

其中，第一组件的第一边线和第二组件中的第二边线垂直对齐；第一组件和第二组件的形状相同，第一组件的大小和第二组件的大小不相同；将第二边线延长作为对齐线呈现，包括：

确定第一边线的端点在设定坐标系中的第一纵坐标的最小值，和第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；将最小值对应的端点和最大值对应的端点连线延长后作为对齐线呈现。

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

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

其中第一组件的第一边线和第二组件的第二边线垂直对齐，可以包含下述几种情况，分别如图2a、2b、2c、2d、2e所示，其中y₁,y₂,y₃,y₄均代表具体数值。

第一种情况，如图2a所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的左边线，第一边线为第一组件的左边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D,A、B、C、D的横坐标相同，纵坐标分别为y₁,y₂,y₃,y₄，其中，y₁<y₂<y₃<y₄,取纵坐标最小值对应的端点A和纵坐标最大值对应的端点D,连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第二种情况,如图2b所示,第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的右边线，第一边线为第一组件的右边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D,A、B、C、D的横坐标相同，纵坐标分别为y₁,y₂,y₃,y₄，其中，y₁<y₂<y₃<y₄,取纵坐标最小值对应的端点A和纵坐标最大值对应的端点D,连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第三种情况，如图2c所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的右边线，第一边线为第一组件的左边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D,A、B、C、D的横坐标相同，纵坐标分别为y₁,y₂,y₃,y₄，其中，y₁<y₂<y₃<y₄,取纵坐标最小值对应的端点A和纵坐标最大值对应的端点D,连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第四种情况，如图2d所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的左边线，第一边线为第一组件的右边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D,A、B、C、D的横坐标相同，纵坐标分别为y₁,y₂,y₃,y₄，其中，y₁<y₂<y₃<y₄,取纵坐标最小值对应的端点A和纵坐标最大值对应的端点D,连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第五种情况，如图2e所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的纵向中线，第一边线为第一组件的纵向中线，第一边线的两个端点为A、B，第二边线的两个端点为C、D,A、B、C、D的横坐标相同，纵坐标分别为y₁,y₂,y₃,y₄，其中，y₁<y₂<y₃<y₄,取纵坐标最小值对应的端点A和纵坐标最大值对应的端点D,连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

在上述五种情况中，均以第二组件位于第一组件下方为例进行详细阐述，若第二组件位于第一组件上方进行对齐或者第二组件与第一组件部分或者全部覆盖，具体实施方式相同，在此不再阐述。

将第二边线延长线作为对齐线呈现还包括，第一组件的第一边线与第二组件的第二边线水平对齐，第一组件和第二组件的形状相同，大小不同。

确定第一边线的端点在设定坐标系中的第一横坐标的最小值，和第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；将最小值对应的端点和最大值对应的端点连线延长后作为对齐线呈现。

为便于说明，在本实施例中将第一组件与第二组件都表示为大小不同的矩形。

其中第一组件的第一边线和第二组件的第二边线垂直对齐，可以包含以下几种情况，分别如图3a、3b、3c、3d、3e所示，其中x₁,x₂,x₃,x₄均代表具体数值。

第一种情况，如图3a所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的上边线，第一边线为第一组件的上边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D，A、B、C、D的纵坐标相等，横坐标分别为x₁,x₂,x₃,x₄，其中，x₁<x₂<x₃<x₄,取横坐标最小值对应的端点A和横坐标最大值对应的端点D，连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第二种情况，如图3b所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的下边线，第一边线为第一组件的下边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D，A、B、C、D的纵坐标相等，横坐标分别为x₁,x₂,x₃,x₄，其中，x₁<x₂<x₃<x₄,取横坐标最小值对应的端点A和横坐标最大值对应的端点D，连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第三种情况，如图3c所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的下边线，第一边线为第一组件的上边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D，A、B、C、D的纵坐标相等，横坐标分别为x₁,x₂,x₃,x₄，其中，x₁<x₂<x₃<x₄,取横坐标最小值对应的端点A和横坐标最大值对应的端点D，连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第四种情况，如图3d所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的上边线，第一边线为第一组件的下边线，第一边线的两个端点为A、B，第二边线的两个端点为C、D，A、B、C、D的纵坐标相等，横坐标分别为x₁,x₂,x₃,x₄，其中，x₁<x₂<x₃<x₄,取横坐标最小值对应的端点A和横坐标最大值对应的端点D，连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

第五种情况，如图3e所示，第二组件的第二边线与第一组件的第一边线对齐，其中第二边线为第二组件的横向中线，第一边线为第一组件的横向中线，第一边线的两个端点为A、B，第二边线的两个端点为C、D，A、B、C、D的纵坐标相等，横坐标分别为x₁,x₂,x₃,x₄，其中，x₁<x₂<x₃<x₄,取横坐标最小值对应的端点A和横坐标最大值对应的端点D，连接A、D两点，将线段AD记为第一组件与第二组件的对齐线。

在上述五种情况中，均以第二组件位于第一组件右方为例进行详细阐述，若第二组件位于第一组件左方进行对齐或者第二组件与第一组件部分或者全部覆盖，情况类似，在此不再阐述。

在绘制对齐线过程中，每次鼠标移动绘制对齐线时，自动清除上一条对齐线然后重新计算和绘制新的对齐线。

本发明实施例一提供的技术方案中，获取创建网页时待进行对齐操作的第一组件，与第一组件进行对齐的第二组件；确定第一组件中的第一边线，以及待进行对齐的第二组件中的第二边线；将第二边线延长作为对齐线呈现。与现有技术的创建网页相比，提高了组件对齐的效率和精度。

实施例2

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

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

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

执行模块403，用于将第二边线延长作为对齐线呈现。

第一组件的第一边线和第二组件的第二边线垂直对齐；第一组件和第二组件的形状相同，第一组件的大小和第二组件的大小不相同。

执行模块403，具体用于确定第一边线的端点在设定坐标系中的第一纵坐标的最小值，和第一边线对齐的第二边线的端点在设定坐标系中的第二坐标的最大值；将最小值对应的端点和最大值对应的端点连线延长后作为对齐线呈现。

第一组件的第一边线和第二组件的第二边线水平对齐；第一组件和第二组件的形状相同，第一组件的大小和第二组件的大小不相同。

执行模块403，具体用于确定第一边线的端点在设定坐标系中的第一横坐标的最小值，和第一边线对齐的第二边线的端点在设定坐标系中第二纵坐标的最大值；将最小值对应的端点和最大值对应的端点连线延长后作为对齐线呈现。

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

执行模块403还包括：将对齐线按照创建网页页面的形状、大小展示。

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

获取模块401获取创建网页时进行待对齐操作的第一组件，在引用的实际页面上覆盖一层与页面相同大小相同坐标的svg绘图层，在绘图层上绘制第二组件，当鼠标按下时，记录第一组件与第二组件的边线中线坐标，当组件位置或大小改变时，确定模块402判断第二组件的变现中线坐标是否与第一组件的变现中线坐标相等，并判断相等的是纵向坐标还是横向坐标，如果判断结果是第二组件的左边与第一组件的左边横坐标相等，并且垂直于水平轴，第一组件的左边记为第一边线，第二组件的左边记为第二边线，执行模块403将第一边线的两个端点A、B的纵坐标分别为记为10、50，第二边线的两个端点C、D的纵坐标分别记为80、130，则取A点为起点,D点为终点，绘制连线即为对齐线；如果确定模块402判断结果是第二组的上边与第一组的上边横坐标相等，并且垂直于纵轴，第一组件的上边记为第一边线，第二组件的上边记为第二边线，执行模块403将第一边线的两个端点A、B的横坐标分别记为30、90，第二边线的两个端点C、D的横坐标分分别记为40、100，则取A点为起点，D点为终点。

基于上述分析，与现有技术相比，本发明实施例提供的技术方案中，获取创建网页时待进行对齐操作的第一组件，以及与第一组件进行对齐的第二组件；确定第一组件中的第一边线，以及第二组件中的第二边线；将第二边线延长作为对齐线呈现。与现有技术的创建网页相比，提高了组件对齐的效率和精度。

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

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

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

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

Claims (10)

1.一种拖拽页面组件时显示对齐线的方法，其特征在于，包括：

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

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

将所述第二边线延长作为对齐线呈现。

2.根据权利要求1所述的方法，其特征在于，所述第一组件的第一边线和第二组件中的第二边线垂直对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；

将所述第二边线延长作为对齐线呈现，包括：

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

将所述最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

3.根据权利要求1所述的方法，其特征在于，所述第一组件的第一边线和第二组件中的第二边线水平对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；

确定所述第一边线的端点在设定坐标系中的第一横坐标的最小值，和所述第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；

将所述最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

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

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

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

将所述对齐线按照创建网页页面的形状、大小展示。

6.一种拖拽页面组件时显示对齐线的装置，其特征在于，包括：获取模块、确定模块、执行模块；其中，

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

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

所述执行模块，用于将所述第二边线延长作为对齐线呈现。

7.根据权利要求6所述的装置，其特征在于，所述第一组件的第一边线和第二组件中的第二边线垂直对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；

所述执行模块，具体用于确定所述第一边线的端点在设定坐标系中的第一纵坐标的最小值，和所述第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；将所述最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

8.根据权利要求6所述的装置，其特征在于，所述第一组件的第一边线和第二组件中的第二边线水平对齐；所述第一组件和第二组件的形状相同，所述第一组件的大小和所述第二组件的大小不相同；

所述执行模块，具体用于确定所述第一边线的端点在设定坐标系中的第一横坐标的最小值，和所述第一边线对齐的第二边线的端点在设定坐标系中的第二纵坐标的最大值；将所述最小值对应的端点和所述最大值对应的端点连线延长后作为对齐线呈现。

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

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

10.根据权利要求6或7所述的装置，其特征在于，所述执行模块还包括：

将所述对齐线按照创建网页页面的形状、大小展示。