一种使用矩阵实现制造技术

本发明专利技术公开了一种使用矩阵实现

【技术实现步骤摘要】
一种使用矩阵实现svg变化的方法


[0001]本专利技术属于前端开发
，特别涉及
svg
元素的矩阵变化处理方法
。

技术介绍

[0002]随着计算机科学的不断发展，前端框架变得越来越顺手，页面的交互也开始越来越复杂，其中对页面内的元素操作也越来越奇怪，其中实现
svg(
可缩放矢量图形
)
元素变化就是常见的需求
。
实现
svg
元素的变化不是很复杂，通常可以设置
svg
的
transform
为
translateXY(x、y
平移
)、scaleXY(x、y
方向缩放
)、rotate(
旋转
)
就可以实现简单刚性变化
。
但是可以使用矩阵变化作用在
svg
从而发生变化的方法却很少
。
而能使用矩阵实现
svg
变化的方法尤为重要，因为使用矩阵的变化方法更加好理解
。
[0003]常见的实现
svg
元素变化，需要对
svg
元素进行
css
的
transform
设置，移动在一些实施方式中要对
svg
元素设置
position
为
absolute
的设置，然后进行
top、left
的赋值，从而达到控制<br/>svg
元素进行位移，在另一些实施方式中要对
svg
元素设置
viewBox
的
x、y
，进而达到位移操作；旋转一般是需要对
svg
元素进行
css
的
transform.scale
设置，一般为
transform
＝
'scale(3)'。
目前对
svg
元素处理比较不统一，上述的实施方式中一般只能解决
svg
元素的一两种变化，也只能处理单种变化，无法进行位移的同时又要旋转或者缩放，或者同时三种情况一起作用于
svg。
[0004]通常，在接到
svg
变化的需求之后，要么是利用
css
定位进行实现，要么是使用
viewbox
进行设置实现
。
目前还缺乏能综合各种平面矩阵变化作用于
svg
元素的方法
。

技术实现思路

[0005]本专利技术的目的在于针对现有技术的不足，提供了一种使用矩阵实现
svg
变化的方法
。
[0006]本专利技术采用的技术方案具体如下：
[0007]一种使用矩阵实现
svg
变化的方法，使用多个控制点且可自由拖拽；记录控制点的初始位置作为第一组参考位置，根据第一组参考数据可以生成第一向量矩阵；鼠标对控制点拖动，根据相关控制点的位置变化，获得第二组位置数据，利用这第二组位置数据，可以生成第二向量矩阵；将两个向量进行向量运算，就可以得到一个代数几何
2x3
的变换矩阵，该代数几何的矩阵根据每一个数值代表的意义，转化成
svg
的变化对象；使用变化对象作用于
svg
上，
svg
即可发生矩阵中的变化，不限于位移
、
缩放
、
旋转等变化
。
[0008]在一些实施方式中，开发人员想对
svg
元素进行准确位移的操作
。
[0009]在一些实施方式中，开发人员想对
svg
元素进行准确旋转角度的操作
。
[0010]在一些实施方式中，开发人员想对
svg
元素进行缩放的操作
。
[0011]在一些实施方式中，开发人员想对
svg
元素进行复合操作，不限于位移
、
缩放
、
旋转
。
[0012]具体地，包括以下步骤：
[0013](1)
在前端页面设置若干个可自由拖拽的控制点，并记录控制点的初始位置生成第一向量矩阵；其中，所述若干个可自由拖拽的控制点包括一个作为平移操作的控制点
、
一个作为旋转操作的控制点和一个作为缩放操作的控制点；
[0014](2)
根据需求拖动控制点，并记录控制点的最终位置生成第二向量矩阵；
[0015](3)
依据控制点移动前后的第一向量矩阵与第二向量矩阵换算获得变换矩阵；
[0016](4)
将变换矩阵作用于
svg
，实现
svg
变化
。
[0017]进一步地，所述步骤
(3)
中，依据控制点移动前后的第一向量与第二向量换算获得变换矩阵，具体如下：
[0018]计算作为平移操作的控制点移动前后的第一向量与第二向量的变换向量的模，作为变换矩阵中的平移的距离，变换向量的方向为变换矩阵中的平移方向；
[0019]计算作为旋转操作的控制点移动前后的第一向量与第二向量之间的角度，作为变换矩阵中的旋转角度；
[0020]计算作为缩放操作的控制点移动前后的第一向量与第二向量的模的比值，作为变换矩阵中的缩放量
。
[0021]进一步地，若干个可自由拖拽的控制点包括一个作为平移操作的控制点
、
一个作为旋转缩放操作的控制点
。
[0022]进一步地，所述步骤
(3)
中，依据控制点移动前后的第一向量与第二向量换算获得变换矩阵，具体如下：
[0023]计算作为平移操作的控制点移动前后的第一向量与第二向量的变换向量的模，作为变换矩阵中的平移的距离，变换向量的方向为变换矩阵中的平移方向；
[0024]计算作为旋转缩放操作的控制点移动前后的第一向量与第二向量之间的角度，作为变换矩阵中的旋转角度，计算作为旋转缩放操作的控制点移动前后的第一向量与第二向量的模的比值，作为变换矩阵中的缩放量
。
[0025]一种电子设备，包括存储器
、
处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现所述的一种使用矩阵实现
svg
变化的方法
。
[0026]一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时实现所述的一种使用矩阵实现
svg
变化的方法
。
[0027]本专利技术的有益效果是：本专利技术方法每次都是以控制点的初始位置和最终位置换算出变换矩阵，然后作用于初始的
svg
，这本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种使用矩阵实现
svg
变化的方法，其特征在于，包括以下步骤：
(1)
在前端页面设置若干个可自由拖拽的控制点，并记录控制点的初始位置生成第一向量矩阵；其中，所述若干个可自由拖拽的控制点包括一个作为平移操作的控制点
、
一个作为旋转操作的控制点和一个作为缩放操作的控制点；
(2)
根据需求拖动控制点，并记录控制点的最终位置生成第二向量矩阵；
(3)
依据控制点移动前后的第一向量矩阵与第二向量矩阵换算获得变换矩阵；
(4)
将变换矩阵作用于
svg
，实现
svg
变化
。2.
根据权利要求1所述的方法，其特征在于，所述步骤
(3)
中，依据控制点移动前后的第一向量与第二向量换算获得变换矩阵，具体如下：计算作为平移操作的控制点移动前后的第一向量与第二向量的变换向量的模，作为变换矩阵中的平移的距离，变换向量的方向为变换矩阵中的平移方向；计算作为旋转操作的控制点移动前后的第一向量与第二向量之间的角度，作为变换矩阵中的旋转角度；计算作为缩放操作的控制点移动前后的第一向量与第二向量的模的比值，作为变换矩阵中的缩放量

【专利技术属性】
技术研发人员：杨达，孙铭逊，
申请(专利权)人：杭州朝厚信息科技有限公司，
类型：发明
国别省市：