基于HTML的四边形区块非线性变换方法及其系统与流程

基于html的四边形区块非线性变换方法及其系统
技术领域
1.本发明涉及html前端领域，具体指有基于html的四边形区块非线性变换方法及其系统。


背景技术：

2.html中，div标签定义可以html文档中的一个分隔区块或者一个区域部分，网页可以在该区域中显示图片、文字等内容，从而为网页的显示构件不同的布局，使浏览者更加清楚地获取网页所要展示的内容。
3.目前，如图1所示，html中实现四边形区块的拖拽只有四边形间的线性拖拽，也就是通过拖拽改变四边形的长或宽，无法实现四边形任意形状的扭曲，形成平行四边形、梯形、不规则四边形等区块。
4.针对上述的现有技术存在的问题设计基于html的四边形区块非线性变换方法及其系统是本发明研究的目的。


技术实现要素：

5.针对上述现有技术存在的问题，本发明在于提供基于html的四边形区块非线性变换方法及其系统，能够有效解决上述现有技术存在的问题。
6.本发明的技术方案是：
7.基于html的四边形区块的非线性变换方法，包含以下步骤：
8.s1，获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；
9.s2，通过所述原始顶点坐标和所述变换后顶点坐标，确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；
10.s3，以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。
11.进一步地，计算包含css matrix3d属性参数的变换矩阵之前，执行以下步骤：
12.将所述初始四边形和所述非线性变换后的四边形升维，得到的结果转换为原始顶点齐次坐标和三维的变换后顶点齐次坐标。
13.进一步地，所述计算包含css matrix3d属性参数的变换矩阵包含以下步骤：
14.s2.1，建立原始顶点齐次坐标矩阵和变换后顶点齐次坐标矩阵，所述原始顶点齐次坐标矩阵包含原始顶点齐次坐标信息，所述变换后顶点齐次坐标矩阵包含变换后顶点齐次坐标信息，
15.s2.2，通过原始顶点齐次坐标矩阵和相应的变换后顶点齐次坐标矩阵确定css matrix3d属性参数的已知参数和无意义参数，得到第一中间矩阵；
16.s2.3，根据所述第一中间矩阵、原始顶点齐次坐标矩阵、变换后顶点齐次坐标，设定matrix3d元素参数缩放不变，计算包含matrix3d元素的参数的变换矩阵。
17.进一步地，所述步骤s2.3具体为：
18.所述第一中间矩阵＝变换后顶点齐次坐标矩阵*原始顶点齐次坐标矩阵的逆矩阵，设定css matrix3d属性参数的参数缩放不变，计算得到包含cssmatrix3d属性参数的的变换矩阵。
19.进一步地，设定css matrix3d属性参数的参数缩放为任意正整数。
20.进一步地，设定css matrix3d属性参数的参数缩放为1。
21.进一步地，所述将所述初始四边形和所述非线性变换后的四边形升维，并转换得到包含三维的原始顶点齐次坐标和三维的变换后顶点齐次坐标具体为：
22.设定z轴为0，将所述初始四边形和所述非线性变换后的四边形升维，得到的结果齐次坐标转换，得到原始顶点齐次坐标和三维的变换后顶点齐次坐标。
23.进一步地，所述html标签为div标签。
24.进一步提供基于html的四边形区块非线性变换系统，包含以下模块：
25.获取模块：用于获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；
26.计算模块：用于通过所述原始顶点坐标和所述变换后顶点坐标，确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；
27.渲染模块：用于以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。
28.因此，本发明提供以下的效果和/或优点：
29.本发明通过对二维的坐标确定css matrix3d属性参数的部分参数，并计算得到包含css matrix3d属性参数的变换矩阵，能够直接使用变换矩阵代入到css matrix3d属性参数，即可直接在html中渲染出一个根据原始四边形非线性形变后的四边形。整个过程简单，便捷，引入拖拽后无需人工调整css matrix3d 属性参数，即可呈现效果。
30.本发明通过对二维坐标升维、齐次转换等，能够使得二维的坐标能够匹配 css matrix3d属性参数矩阵的运算。
31.本发明根据二维坐标的特点，对css matrix3d属性参数进行确定、剔除，从而能够得到便于运算且能够运算的第一中间矩阵，并且根据css matrix3d属性参数确定参数缩放不变，从而计算包含matrix3d元素的参数的变换矩阵。
32.应当明白，本发明的上文的概述和下面的详细说明是示例性和解释性的，并且意在提供对如要求保护的本发明的进一步的解释。
附图说明
33.图1为背景技术中，线性拖拽的示意图。
34.图2为本发明的流程示意图。
35.图3为四边形拖拽变换的示意图。
36.图4为原始四边形的示意图。
37.图5为本方法执行的结果示意图。
具体实施方式
38.为了便于本领域技术人员理解，现将实施例结合附图对本发明的结构作进一步详细描述：
39.参考图2，基于html的四边形区块的非线性变换方法，其特征在于：
40.包含以下步骤：
41.s1，获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标。
42.本实施例中，原始四边形可以是用户输入的四边形，也可以是系统预先设定并展示给用户的四边形。原始四边形用于后续的用户拖拽操作。获取四个原始顶点坐标(x0,y0)，(x1,y1)，(x2,y2)，(x3,y3)，和拖拽后的四个变换后顶点坐标(u0,v0)，(u1,v1)，(u2,v2)，(u3,v3)。本实施例中，图3所示，原始四边形如原始顶点坐标(0，0)，(0,50)，(100,0)，(100,50)，拖拽后的四个变换后顶点坐标(25，0)，(0，50)，(75，0)，(100，50)。
43.s2，通过所述原始顶点坐标和所述变换后顶点坐标，设定z轴为0，将所述初始四边形和所述非线性变换后的四边形升维，得到(x，y，0)这样的三维坐标，此时，四边形的顶点仍在二维平面。得到的结果齐次坐标转换为原始顶点齐次坐标和三维的变换后顶点齐次坐标，得到(x，y，0，1)这样的齐次坐标。升维和变换齐次，是为了将二维的坐标匹配为可以和cssmatrix3d属性参数同位的矩阵。
44.确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵。
45.css matrix3d属性参数是一个4*4的16位矩阵，其如下列矩阵所示：
[0046][0047]
通过设定css matrix3d属性参数，如下列公式所示，从而通过矩阵和坐标相乘，得到的值即为转换后的坐标。
[0048][0049]
具体例如对一个点平移，可以下列矩阵代表的css matrix3d属性参数将点平移dx、dy、dz距离：
[0050][0051]
下面具体介绍其中的计算步骤：
[0052]
所述计算包含css matrix3d属性参数的变换矩阵包含以下步骤：
[0053]
s2.1，建立原始顶点齐次坐标矩阵和变换后顶点齐次坐标矩阵，所述原始顶点齐次坐标矩阵包含原始顶点齐次坐标信息，所述变换后顶点齐次坐标矩阵包含变换后顶点齐次坐标信息。
[0054]
以其中的一个点(x，y，z，1)举例，该点建立的顶点齐次坐标矩阵为：
[0055][0056]
其他点以此类推。
[0057]
s2.2，通过原始顶点齐次坐标矩阵和相应的变换后顶点齐次坐标矩阵确定css matrix3d属性参数的已知参数和无意义参数，得到第一中间矩阵。
[0058]
根据上述的公式1，代入原始顶点齐次坐标矩阵和变换后顶点齐次坐标矩阵，可以得到下列公式：
[0059][0060]
其中，最左侧的矩阵为css matrix3d属性参数的矩阵，中间的矩阵为原始顶点齐次坐标矩阵，右侧的矩阵为变换后顶点齐次坐标矩阵。由于前后坐标均为二维升维成的坐标，z轴均为0，因此定义i、j、k为可以为任意值，c、 g、o为无意义参数。其中令i＝j＝k＝l＝0，且c＝g＝o＝0。i＝j＝k＝l＝c＝g＝o＝0的前提下，代入css matrix3d属性参数的矩阵，即可得到第一中间矩阵。
[0061]
s2.3，根据所述第一中间矩阵、原始顶点齐次坐标矩阵、变换后顶点齐次坐标，设定matrix3d元素参数缩放不变，设定参数缩放为任意正整数，为了便于计算，本实施例设定css matrix3d属性参数的参数缩放为1，计算包含 matrix3d元素的参数的变换矩阵。所述步骤s2.3具体为：所述第一中间矩阵＝变换后顶点齐次坐标矩阵*原始顶点齐次坐标矩阵的逆矩阵，设定cssmatrix3d属性参数的参数缩放不变，计算得到包含css matrix3d属性参数的的变换矩阵。
[0062]
根据已知参数和无意义参数，展开公式2，得到如下公式：
[0063]
ax
i
+ey
i
+m＝k
i
u
i
[0064]
bx
i
+fy
i
+n＝k
i
v
i
[0065]
dx
i
+hy
i
+p＝k
i
ꢀꢀꢀ
(公式3)。
[0066]
根据公式3，将ki＝dxi+hyi+p代入kiui和kivi，
[0067]
ax
i
+ey
i
+m
‑
u
i
dx
i
‑
u
i
hy
i
＝pu
i
[0068]
bx
i
+fy
i
+n
‑
v
i
dx
i
‑
v
i
hy
i
＝pv
i
，
[0069]
并重新拆解回矩阵，得到：
[0070][0071]
上面是本实施例介绍的其中一个点的代入。循环上述步骤将所有点都代入，得到矩阵的ah＝b的形式：
[0072][0073]
其中，因为p是css matrix3d属性参数的参数缩放，设定p不变且p可以是任意正整数，本实施例中设定p为1，在其他实施例中也可以是其他数字，设定为1是为了方便计算。
[0074]
根据逆矩阵性质求出参数集合h，同时让p＝1，表示参数缩放系数为 1，得到所述第一中间矩阵＝变换后顶点齐次坐标矩阵*原始顶点齐次坐标矩阵的逆矩阵：
[0075]
h＝ba
‑1[0076]
h即包含了css matrix3d属性参数的所有参数。
[0077]
s3，以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。所述html标签为div标签。将css matrix3d属性参数代入到 matrix3d即可。通过div标签在网页中画出一个块。
[0078]
图4为本方法所实际获取的原始四边形，将图4的四个顶点拖拽拉伸进入下侧的名片区域内，通过本方法创建和该顶点相匹配的div块，并在该div 块中填充该名片，得到的结果如图5所示。根据本方法计算出的css matrix3d 属性参数为(0.318083,0.207884,0,0,
‑
0.224731,0.298579,0,
‑
0.000046,0,0,1,0, 289,336,0,1)。
[0079]
进一步提供基于html的四边形区块非线性变换系统，包含以下模块：
[0080]
获取模块：用于获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；
[0081]
计算模块：用于通过所述原始顶点坐标和所述变换后顶点坐标，确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；
[0082]
渲染模块：用于以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。
[0083]
以上所述仅为本发明的较佳实施例，凡依本发明申请专利范围所做的均等变化与修饰，皆应属于本发明的涵盖范围。