基于HTML的四边形区块非线性变换方法及其系统技术方案

本发明专利技术涉及基于HTML的四边形区块的非线性变换方法及其系统，包含以下步骤：S1，获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；S2，通过所述原始顶点坐标和所述变换后顶点坐标，确定cssmatrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；S3，以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。本发明专利技术通过对二维的坐标确定css matrix3d属性参数的部分参数，并计算得到包含css matrix3d属性参数的变换矩阵，能够直接使用变换矩阵代入到css matrix3d属性参数，即可直接在html中渲染出一个根据原始四边形非线性形变后的四边形。个根据原始四边形非线性形变后的四边形。个根据原始四边形非线性形变后的四边形。

【技术实现步骤摘要】
基于HTML的四边形区块非线性变换方法及其系统


[0001]本专利技术涉及HTML前端领域，具体指有基于HTML的四边形区块非线性变换方法及其系统。

技术介绍

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

技术实现思路

[0005]针对上述现有技术存在的问题，本专利技术在于提供基于HTML的四边形区块非线性变换方法及其系统，能够有效解决上述现有技术存在的问题。
[0006]本专利技术的技术方案是：
[0007]基于HTML的四边形区块的非线性变换方法，包含以下步骤：
[0008]S1，获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；
[0009]S2，通过所述原始顶点坐标和所述变换后顶点坐标，确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；
[0010]S3，以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。
[0011]进一步地，计算包含css matrix3d属性参数的变换矩阵之前，执行以下步骤：
[0012]将所述初始四边形和所述非线性变换后的四边形升维，得到的结果转换为原始顶点齐次坐标和三维的变换后顶点齐次坐标。
[0013]进一步地，所述计算包含css matrix3d属性参数的变换矩阵包含以下步骤：
[0014]S2.1，建立原始顶点齐次坐标矩阵和变换后顶点齐次坐标矩阵，所述原始顶点齐次坐标矩阵包含原始顶点齐次坐标信息，所述变换后顶点齐次坐标矩阵包含变换后顶点齐次坐标信息，
[0015]S2.2，通过原始顶点齐次坐标矩阵和相应的变换后顶点齐次坐标矩阵确定css matrix3d属性参数的已知参数和无意义参数，得到第一中间矩阵；
[0016]S2.3，根据所述第一中间矩阵、原始顶点齐次坐标矩阵、变换后顶点齐次坐标，设定matrix3d元素参数缩放不变，计算包含matrix3d元素的参数的变换矩阵。
[0017]进一步地，所述步骤S2.3具体为：
[0018]所述第一中间矩阵＝变换后顶点齐次坐标矩阵*原始顶点齐次坐标矩阵的逆矩阵，设定css matrix3d属性参数的参数缩放不变，计算得到包含cssmatrix3d属性参数的的变换矩阵。
[0019]进一步地，设定css matrix3d属性参数的参数缩放为任意正整数。
[0020]进一步地，设定css matrix3d属性参数的参数缩放为1。
[0021]进一步地，所述将所述初始四边形和所述非线性变换后的四边形升维，并转换得到包含三维的原始顶点齐次坐标和三维的变换后顶点齐次坐标具体为：
[0022]设定z轴为0，将所述初始四边形和所述非线性变换后的四边形升维，得到的结果齐次坐标转换，得到原始顶点齐次坐标和三维的变换后顶点齐次坐标。
[0023]进一步地，所述html标签为div标签。
[0024]进一步提供基于HTML的四边形区块非线性变换系统，包含以下模块：
[0025]获取模块：用于获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；
[0026]计算模块：用于通过所述原始顶点坐标和所述变换后顶点坐标，确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；
[0027]渲染模块：用于以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。
[0028]因此，本专利技术提供以下的效果和/或优点：
[0029]本专利技术通过对二维的坐标确定css matrix3d属性参数的部分参数，并计算得到包含css matrix3d属性参数的变换矩阵，能够直接使用变换矩阵代入到css matrix3d属性参数，即可直接在html中渲染出一个根据原始四边形非线性形变后的四边形。整个过程简单，便捷，引入拖拽后无需人工调整css matrix3d 属性参数，即可呈现效果。
[0030]本专利技术通过对二维坐标升维、齐次转换等，能够使得二维的坐标能够匹配 css matrix3d属性参数矩阵的运算。
[0031]本专利技术根据二维坐标的特点，对css matrix3d属性参数进行确定、剔除，从而能够得到便于运算且能够运算的第一中间矩阵，并且根据css matrix3d属性参数确定参数缩放不变，从而计算包含matrix3d元素的参数的变换矩阵。
[0032]应当明白，本专利技术的上文的概述和下面的详细说明是示例性和解释性的，并且意在提供对如要求保护的本专利技术的进一步的解释。
附图说明
[0033]图1为
技术介绍
中，线性拖拽的示意图。
[0034]图2为本专利技术的流程示意图。
[0035]图3为四边形拖拽变换的示意图。
[0036]图4为原始四边形的示意图。
[0037]图5为本方法执行的结果示意图。
具体实施方式
[0038]为了便于本领域技术人员理解，现将实施例结合附图对本专利技术的结构作进一步详细描述：
[0039]参考图2，基于HTML的四边形区块的非线性变换方法，其特征在于：
[0040]包含以下步骤：
[0041]S1，获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标。
[0042]本实施例中，原始四边形可以是用户输入的四边形，也可以是系统预先设定并展示给用户的四边形。原始四边形用于后续的用户拖拽操作。获取四个原始顶点坐标(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)。
[0043]S2，通过所述原始顶点坐标和所述变换后顶点坐标，设定z轴为0，将所述初始四边形和所述非线性变换后的四边形升维，得到(x，y，0)这样的三维坐标，此时，四边形的顶点仍在二维平面。得到的结果本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.基于HTML的四边形区块的非线性变换方法，其特征在于：包含以下步骤：S1，获取原始四边形的四个原始顶点坐标以及用户拖拽原始四边形后的四个变换后顶点坐标，所述原始顶点坐标和所述变换后顶点坐标均为二维坐标；S2，通过所述原始顶点坐标和所述变换后顶点坐标，确定css matrix3d属性参数的部分参数，计算包含css matrix3d属性参数的变换矩阵；S3，以所述变换矩阵为html标签的matrix3d属性参数渲染出非线性变换后的四边形。2.根据权利要求1所述的基于HTML的四边形区块非线性变换方法，其特征在于：计算包含css matrix3d属性参数的变换矩阵之前，执行以下步骤：将所述初始四边形和所述非线性变换后的四边形升维，得到的结果转换为原始顶点齐次坐标和三维的变换后顶点齐次坐标。3.根据权利要求2所述的基于HTML的四边形区块非线性变换方法，其特征在于：所述计算包含css matrix3d属性参数的变换矩阵包含以下步骤：S2.1，建立原始顶点齐次坐标矩阵和变换后顶点齐次坐标矩阵，所述原始顶点齐次坐标矩阵包含原始顶点齐次坐标信息，所述变换后顶点齐次坐标矩阵包含变换后顶点齐次坐标信息，S2.2，通过原始顶点齐次坐标矩阵和相应的变换后顶点齐次坐标矩阵确定css matrix3d属性参数的已知参数和无意义参数，得到第一中间矩阵；S2.3，根据所述第一中间矩阵、原始顶点齐次坐标矩阵、变换后顶点齐次坐标，设定matrix3d元素参数缩放不变，计算包含matrix3d元素的参数的变换矩阵。4.根据权利要求3所述的基于HTML的四边形区块非线性变换方法，其特征在于：所述步骤S...

【专利技术属性】
技术研发人员：黄治城，
申请(专利权)人：稿定厦门科技有限公司，
类型：发明
国别省市：