CN111666515A - 页面元素变换方法及装置 - Google Patents

Abstract

本发明提供的页面元素变换方法及装置，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1；再利用非线性变换函数，按照预设的非线性关系，获取各个元素切片分别对应的3d变换矩阵；最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，便能够得到第一页面元素经非线性变换后的第二页面元素，从而实现了页面元素的非线性变换，为页面元素的特效展示提供了极大便利。

Description

页面元素变换方法及装置

技术领域

本发明涉及信息处理技术领域，更具体的说，涉及页面元素变换方法及装置。

背景技术

随着计算机网络技术的迅猛发展，在浏览器页面上所呈现的内容也日益丰富，为了HTML网页页面的展现力，现在可以在网页页面中嵌入各种样式的多媒体信息。

现有的网页技术，只支持页面元素整体的线性变换，而并不支持页面元素的非线性变换。例如，在现有技术中，若想要将在网页页面中将常规字体的文字展示为艺术字，则必须先使用一些其他软件来制作相应的艺术字图片，再利用IMG标签在页面中呈现制作好的艺术字图片，而并不能在网页页面中直接将常规字体的文字非线性变换为艺术字。而且，对于需要进行非线性变化的其他图片，现有技术也同样无法支持。

因此，目前迫切需要一种切实有效的页面元素变换方案，以实现页面元素的非线性变换。

发明内容

有鉴于此，本发明提供了一种页面元素变换方法及装置，以解决目前的网页技术无法实现页面元素的非线性变换的技术问题。

为实现上述目的，本发明提供如下技术方案：

一种页面元素变换方法，所述方法包括：

获取网页页面中的第一页面元素；

沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1；

利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵；

按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

优选的，所述预设方向包括：水平方向与竖直方向中的至少一种。

优选的，所述预设步长为1个像素px。

优选的，所述利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵包括：

利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号；

按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值；

根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵。

优选的，在所述利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵之前，所述方法还包括：

获取与所述第一页面元素相关联的层叠样式表CSS代码；

通过解析所述CSS代码，获取所述非线性变换函数；所述非线性变换函数包含所述预设的非线性关系。

优选的，所述通过解析所述CSS代码，获取所述非线性变换函数包括：

通过解析所述CSS代码，获取所述非线性变换函数的函数名称；

根据所述非线性变换函数的函数名称，调用预置的所述非线性变换函数。

一种页面元素变换装置，所述装置包括：

页面元素获取单元，用于获取网页页面中的第一页面元素；

页面元素切片单元，用于沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1；

变换矩阵获取单元，用于利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵；

页面元素变换单元，用于按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

优选的，所述变换矩阵获取单元包括：

切片序号获取单元，用于利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号；

变换数值获取单元，用于按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值；

变换矩阵构造单元，用于根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵。

优选的，所述装置还包括：

CSS代码获取单元，用于获取与所述第一页面元素相关联的层叠样式表CSS代码；

变换函数获取单元，用于通过解析所述CSS代码，获取所述非线性变换函数；所述非线性变换函数包含所述预设的非线性关系。

优选的，所述变换函数获取单元包括：

函数名称获取单元，用于通过解析所述CSS代码，获取所述非线性变换函数的函数名称；

变换函数调用单元，用于根据所述非线性变换函数的函数名称，调用预置的所述非线性变换函数。

从上述的技术方案可以看出，本发明提供的页面元素变换方法及装置，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片；再利用非线性变换函数，按照预设的非线性关系，获取各个元素切片分别对应的3d变换矩阵，最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，便能够得到第一页面元素经非线性变换后的第二页面元素，从而有效实现了页面元素的非线性变换，为页面元素的特效展示提供了极大便利。

附图说明

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

图1为本发明实施例提供的页面元素变换方法的一种流程图；

图2为本发明实施例提供的页面元素的横向切片的示例图；

图3为本发明实施例提供的页面元素变换方法的另一种流程图；

图4为本发明实施例提供的元素切片与3d变换矩阵之间非线性关系的示例图；

图5为本发明实施例提供的第二页面元素的一种效果图；

图6为本发明实施例提供的第二页面元素的另一种效果图；

图7为本发明实施例提供的页面元素变换方法的又一种流程图；

图8为本发明实施例提供的页面元素变换装置的一种结构示意图；

图9为本发明实施例提供的页面元素变换装置的另一种结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

HTML页面中的所有元素，在排版后，所显示的内容都是矩形区域。在屏幕上的位置与尺寸可以由(x，y，w，h)来描述，其中，x为横坐标，y为纵坐标，w为宽度，h为高度。本发明提供的页面元素变换方法及装置，其实是对页面中的一个页面元素从整体上进行非线性变换，相当于是针对网页页面中w×h的范围内的页面元素，按行、或按列、或按像素点进行非线性变换，使非线性变换后的页面元素具有特殊展示效果，如艺术字，扭曲的图像等。其中，当变换的页面元素是一行文字时，变换的结果就可以是艺术字；当变换的页面元素内是一张图片时，变换的结果就可以是具有扭曲效果的图像。

请参阅图1，图1为本发明实施例提供的页面元素变换方法的一种流程图。

如图1所示，本实施例的页面元素变换方法包括：

S110：获取网页页面中的第一页面元素。

其中，第一页面元素具体是指，网页页面中待变换的页面元素，所述待变换具体是指待进行非线性变换。

第一页面元素可以是文字，也可以是图片，还可以是其他类型的页面元素。

S120：沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1。

一示例中，以第一页面元素为文字，且需要将文字变换为艺术字为例。

艺术字的本质就是原始文字的非线性变换。为了实现艺术字效果，需要先对第一页面元素进行切片处理，将第一页面元素切割为若干个小切片。其中，具体可以是沿着文字的水平方向，按照预设步长，对文字进行切片处理，将文字切割成依次排列的N个小切片，其切片效果可如图2中所示。

其中，预设步长的大小，影响着元素切片的尺寸，而元素切片的尺寸，影响着非线性变换的处理速度及展示效果。元素切片越小，其展示效果越平滑，但会导致元素片数较多，使处理速度越慢；元素切片越大，其展示效果越粗糙，但元素片数较少，使处理速度越快。

其中，预设步长最小可取1个像素px。当然，所述预设步长也可以为2px、3px、4px等其它值，而并不局限于1px。

S130：利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵。

将常规字体文字变换成艺术字，关键在于对N个元素切片中的每一个元素切片分别进行变换，具体可采用3d变换矩阵matrix3d来实现。

利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵，能够使所述各个元素切片分别对应的3d变换矩阵，与所述N个元素切片中各个元素切片之间，满足所述预设的非线性关系。

3d变换矩阵matrix3d中有多个元素，若相邻的元素切片所对应的matrix3d的差异过大，则将会导致两个相邻的元素切片在屏幕上呈现的效果发生错乱。因此，采用3d变换矩阵matrix3d来进行变换时，不能太过随意，需要保证相邻的元素切片对应的3d变换矩阵之间，具有一定的空间连续性。相应的，步骤S130还可包括：控制所述N个元素切片中任意两个相邻的元素切片所对应的3d变换矩阵之间的差异值不大于预设差异阈值。

在利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵的过程中，对相邻的元素切片所对应的3d变换矩阵之间的差异值进行控制，使其不大于预设差异阈值，能够使变换后的相邻元素切片之间具有空间连续性，避免最终的展示效果变得突兀、错乱。

S140：按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

由于所述各个元素切片分别对应的3d变换矩阵，与所述N个元素切片中各个元素切片之间是满足预设的非线性关系的，所以，按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换后，所得到的第二页面元素，实际上就是对第一页面元素进行非线性变换后得到的结果。

在步骤S140之后，所述方法还可包括：在所述网页页面上展示所述第二页面元素。

本发明可以在网页页面上方便地显示各种效果的艺术字，也可以在网页页面上显示各种效果的扭曲图片。如果第一页面元素是文字，则变换的结果为艺术字；如果第一页面元素是图片，则变化的结果为扭曲效果的图片。其中，图片与文字的处理过程基本相同，在此不做具体区分。

本实施例提供的页面元素变换方法，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片；再利用非线性变换函数，按照预设的非线性关系，获取各个元素切片分别对应的3d变换矩阵，最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，便能够得到第一页面元素经非线性变换后的第二页面元素，从而有效实现了页面元素的非线性变换，为页面元素的特效展示提供了极大便利。

请参阅图3，图3为本发明实施例提供的页面元素变换方法的另一种流程图。

如图3所示，本实施例的页面元素变换方法包括：

S210：获取网页页面中的第一页面元素。

S220：沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1。

其中，所述预设方向可包括：水平方向与竖直方向中的至少一种。

对第一页面元素进行切片时，可以沿着第一页面元素的水平方向进行切片，例如，沿着第一页面元素从左到右的方向进行切片；也可以沿着第一页面元素的竖直方向进行切片，例如，沿着第一页面元素从上到下的方向进行切片。

进一步地，除了可以沿着第一页面元素的水平方向或竖直方向进行切片之外，还可以同时沿着第一页面元素的水平方向与竖直方向进行切片，此时切片得到的结果是若干个切片方块，即，所述N个元素切片具体可以是N个切片方块。

当同时按照水平方向与竖直方向进行切片，且预设步长为1px时，一个元素切片就是一个像素点，此时就需要针对页面元素中的每一个像素点进行变换。

S230：利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号。

当沿着第一页面元素的水平方向进行切片时，各个元素切片的排列序号可以是各个元素切片的横向坐标x，并可作为非线性变换函数F(i)的输入参数，即i＝x。其中，i为F(i)的输入参数。

当沿着第一页面元素的水平方向进行切片时，各个元素切片的排列序号可以是各个元素切片的纵向坐标y，并可作为非线性变换函数F(i)的输入参数，即i＝y。

当同时沿着第一页面元素的水平方向与竖直方向进行切片时，各个元素切片的排列序号可以是各个元素切片的横纵坐标(x,y)，并作为非线性变换函数F(i)的输入参数，即i＝(x,y)。

S240：按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值。

一示例中，以沿着第一页面元素的水平方向进行切片为例，元素切片的排列序号x∈[0,w-1]，w为第一页面元素的宽度。

将x代入到非线性变换函数F(i)，i＝x，则F(x)会计算出x的非线性变换值v。非线性变换值v为，利用F(x)按照预设的非线性关系，将x进行非线性变换后得到的值。

S250：根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵。

利用F(x)，根据各个元素切片的排列序号x分别对应的非线性变换值v，构造各个元素切片分别对应的3d变换矩阵，作为F(x)的返回值。其中，v为3d变换矩阵中的一元素值。由此构造出来的3d变换矩阵matrix3d，与所述各个元素切片之间也具有同样的非线性关系。

一示例中，预设的非线性关系为符合正弦曲线的变换关系，非线性变换函数的实现代码可如下所示：

其中，horizontalSin(i)为沿水平方向的非线性变换函数；i为horizontalSin(i)的输入参数，用于传递元素切片的排列序号；v为非线性变换值；Math.sin(Math.PI*2*i)为正弦函数，PI为π。

利用函数horizontalSin(i)，基于各个元素切片的排列序号，采用正弦函数Math.sin(Math.PI*2*i)计算各个元素切片对应的非线性变换值v，并构造相应的3d变换矩阵matrix3d。3d变换矩阵matrix3d与各个元素切片之间的非线性关系可如图4所示。图4中，x为元素切片的排列序号，也即元素切片的横坐标；纵坐标为matrix3d。

实际上，本发明是将非线性变换抽象定义为一个函数，实现元素切片的排列序号到3d变换矩阵的映射

通过构造好的matrix3d，使各个元素切片的y坐标按照正弦曲线发生变化，进而使元素切片呈现出如图5所示的正弦曲线的效果。

另一示例中，预设的非线性关系为符合正弦曲线+高度缩放的变换关系，非线性变换函数的实现代码可如下所示：

其中，horizontalScaledSin(i)为沿水平方向的结合高度缩放效果的非线性变换函数；i为horizontalScaledSin(i)的输入参数，用于传递元素切片的排列序号；v与v2均为非线性变换值；Math.sin(Math.PI*2*i)为正弦函数，PI为π，表达式v＝(2+Math.sin(Math.PI*2*i))*60.0表征预设的非线性关系。

利用函数horizontalScaledSin(i)，基于各个元素切片的排列序号，采用正弦函数Math.sin(Math.PI*2*i)计算各个元素切片对应的非线性变换值v与v2，并构造相应的3d变换矩阵Matrix4。

通过构造好的3d变换矩阵Matrix4，使各个元素切片的y坐标按照正弦曲线发生变化，并使各个元素切片的高度h变成变化，进而使元素切片呈现出如图6所示的同时具备正弦扭曲与高度缩放的效果。

S260：按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

其中，需要注意的是，图5与图6仅为第二页面元素的两种效果图，第二页面元素还可以是具有其他效果的页面元素。

在其他示例中，预设的非线性关系也并不仅仅局限于正弦函数关系与缩放关系，其还可以是指数函数关系、对数函数关系、抛物线函数关系等，在此不做具体限定。

本实施例提供的页面元素变换方法，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片；再利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号，按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值，然后根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵，最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素，从而实现了页面元素的非线性变换，同时可支持多种不同的非线性变换方式，为页面元素的非线性变化提供了便利，方便用户定义各种艺术字、扭曲图像等特殊效果的页面元素。

请参阅图7，图7为本发明实施例提供的页面元素变换方法的又一种流程图。

如图7所示，本实施例的页面元素变换方法包括：

S310：获取网页页面中的第一页面元素。

S320：沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1。

S330：获取与所述第一页面元素相关联的层叠样式表CSS代码。

在本实施例中，可参照CSS(Cascading Style Sheets，参考层叠样式表)的transform，增加定义transform-function属性。通过浏览器内核，增加对该属性的实现，其实现的核心逻辑，即为页面元素切片后的逐片变换过程。

例如，新增后的CSS写法可如下所示：

其中，i为输入参数，用于传递元素切片的排列序号；v均为非线性变换值；Math.sin(Math.PI*2*i)为正弦函数，PI为π，表达式v＝(2+Math.sin(Math.PI*2*i))*60.0表征预设的非线性关系。

S340：通过解析所述CSS代码，获取所述非线性变换函数；所述非线性变换函数包含所述预设的非线性关系。

上例中，transform-function所定义的函数体{…}，即为所要获取的非线性变换函数，其中包含预设的非线性关系“v＝(2+Math.sin(Math.PI*2*i))*60.0”。

上例中的CSS写法，通常面向专业用户，使用户可以通过控制matrix3d中的每一个矩阵元素，来精准控制非线性变换的具体特效。

对于普通用户，可以参照transform属性的定义，预置一些已经实现好的特效，并赋予特定的名称，从而方便普通用户使用。相应的，步骤S440可以包括：

A1、通过解析所述CSS代码，获取所述非线性变换函数的函数名称；

A2、根据所述非线性变换函数的函数名称，调用预置的所述非线性变换函数。

相应的，CSS的写法可如下：

#demo{

tranform-function:horizontalSin；

}；

或者，

#demo{

tranform-function:horizontalScaledSin；

}；

其中，horizontalSin与horizontalScaledSin即为预置的非线性变换函数，通过解析所述CSS代码，可获取到函数名称horizontalSin或horizontalScaledSin，进而调用相应的非线性变换函数horizontalSin或horizontalScaledSin。

其中，预置的非线性变换函数均可通过Javascript来实现。本发明结合浏览器CSS和JS，可定义简便的CSS写法，以供应用开发人员快速定义页面元素的非线性变换效果。

S350：利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵。

S360：按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

本实施例提供的页面元素变换方法，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片；然后获取与所述第一页面元素相关联的层叠样式表CSS代码，通过解析所述CSS代码，获取所述非线性变换函数，所述非线性变换函数包含所述预设的非线性关系，其中，还可以通过解析出预置的非线性变换函数的函数名称，来调用预置的非线性变换函数；然后，利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵，最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素，从而实现了页面元素的非线性变换。

而且，本实施例不仅方便了在页面中定义非线性变换的页面元素，而且通过预置若干个常用的非线性变换函数，进一步为用户定义非线性变换的页面元素(各种特效的艺术字)提供了方便，而且兼容原有的CSS语法，为应用开发人员定义艺术字等非线性变换的页面元素提供了极大的便利。

本发明实施例还提供了页面元素变换装置，所述页面元素变换装置用于实施本发明实施例提供的页面元素变换方法，下文描述的页面元素变换装置的技术内容，可与上文描述的页面元素变换方法的技术内容与相互对应参照。

请参阅图8，图8为本发明实施例提供的页面元素变换装置的一种结构示意图。

如图8所示，所述装置包括：页面元素获取单元10、页面元素切片单元20、变换矩阵获取单元30与页面元素变换单元40。

页面元素获取单元10，用于获取网页页面中的第一页面元素；

页面元素切片单元20，用于沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1。

其中，所述预设方向包括：水平方向与竖直方向中的至少一种；所述预设步长为1个像素px。

变换矩阵获取单元30，用于利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵；

页面元素变换单元40，用于按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

本实施例提供的页面元素变换装置，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片；再利用非线性变换函数，按照预设的非线性关系，获取各个元素切片分别对应的3d变换矩阵，最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，便能够得到第一页面元素经非线性变换后的第二页面元素，从而有效实现了页面元素的非线性变换。

请参阅图9，图9为本发明实施例提供的页面元素变换装置的另一种结构示意图。

如图9所示，所述装置包括前述实施例中的页面元素获取单元10、页面元素切片单元20、变换矩阵获取单元30与页面元素变换单元40，除此之外，还可包括：CSS代码获取单元50与变换函数获取单元60.

CSS代码获取单元50，用于获取与所述第一页面元素相关联的层叠样式表CSS代码；

变换函数获取单元60，用于通过解析所述CSS代码，获取所述非线性变换函数；所述非线性变换函数包含所述预设的非线性关系。

一示例中，所述变换函数获取单元60可具体包括：函数名称获取单元与变换函数调用单元。

函数名称获取单元，用于通过解析所述CSS代码，获取所述非线性变换函数的函数名称；

变换函数调用单元，用于根据所述非线性变换函数的函数名称，调用预置的所述非线性变换函数。

另一示例中，所述变换矩阵获取单元30可包括：切片序号获取单元、变换数值获取单元与变换矩阵构造单元。

切片序号获取单元，用于利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号；

变换数值获取单元，用于按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值；

变换矩阵构造单元，用于根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵。

本实施例提供的页面元素变换装置，首先获取网页页面中的第一页面元素，然后沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片；然后获取与所述第一页面元素相关联的层叠样式表CSS代码，通过解析所述CSS代码，获取所述非线性变换函数，所述非线性变换函数包含所述预设的非线性关系，其中，还可以通过解析出预置的非线性变换函数的函数名称，来调用预置的非线性变换函数；然后，利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵，最后按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素，从而实现了页面元素的非线性变换。

最后，还需要说明的是，在本文中，诸如第一和第一等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式来实现。基于这样的理解，本申请的技术方案对背景技术做出贡献的全部或者部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。

本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处。综上所述，本说明书内容不应理解为对本申请的限制。

Claims (10)

1.一种页面元素变换方法，其特征在于，所述方法包括：

获取网页页面中的第一页面元素；

沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1；

利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵；

按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

2.如权利要求1所述的方法，其特征在于，所述预设方向包括：水平方向与竖直方向中的至少一种。

3.如权利要求1所述的方法，其特征在于，所述预设步长为1个像素px。

4.如权利要求1所述的方法，其特征在于，所述利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵包括：

利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号；

按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值；

根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵。

5.如权利要求1所述的方法，其特征在于，在所述利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵之前，所述方法还包括：

获取与所述第一页面元素相关联的层叠样式表CSS代码；

通过解析所述CSS代码，获取所述非线性变换函数；所述非线性变换函数包含所述预设的非线性关系。

6.如权利要求5所述的方法，其特征在于，所述通过解析所述CSS代码，获取所述非线性变换函数包括：

通过解析所述CSS代码，获取所述非线性变换函数的函数名称；

根据所述非线性变换函数的函数名称，调用预置的所述非线性变换函数。

7.一种页面元素变换装置，其特征在于，所述装置包括：

页面元素获取单元，用于获取网页页面中的第一页面元素；

页面元素切片单元，用于沿着所述第一页面元素的预设方向，按照预设步长，对所述第一页面元素进行切片处理，得到依次排列的N个元素切片，N＞1；

变换矩阵获取单元，用于利用非线性变换函数，按照预设的非线性关系，获取所述N个元素切片中各个元素切片分别对应的3d变换矩阵；

页面元素变换单元，用于按照所述各个元素切片分别对应的3d变换矩阵，对所述N个元素切片进行一一变换，得到第二页面元素。

8.如权利要求1所述的装置，其特征在于，所述变换矩阵获取单元包括：

切片序号获取单元，用于利用非线性变换函数，获取所述N个元素切片中各个元素切片的排列序号；

变换数值获取单元，用于按照预设的非线性关系，获取所述各个元素切片的排列序号分别对应的非线性变换值；

变换矩阵构造单元，用于根据所述各个元素切片的排列序号分别对应的非线性变换值，构造所述各个元素切片分别对应的3d变换矩阵。

9.如权利要求1所述的装置，其特征在于，所述装置还包括：

CSS代码获取单元，用于获取与所述第一页面元素相关联的层叠样式表CSS代码；

变换函数获取单元，用于通过解析所述CSS代码，获取所述非线性变换函数；所述非线性变换函数包含所述预设的非线性关系。

10.如权利要求9所述的装置，其特征在于，所述变换函数获取单元包括：

函数名称获取单元，用于通过解析所述CSS代码，获取所述非线性变换函数的函数名称；

变换函数调用单元，用于根据所述非线性变换函数的函数名称，调用预置的所述非线性变换函数。

Images