JS获取transform rotate旋转角度的度数,matrix解析

JavaScript037

JS获取transform rotate旋转角度的度数,matrix解析,第1张

转自 竹音林 ,只为自己笔记,以备不时之需

如果使用 $(objName).css('transform') 来获取CSS3里transform rotate旋转角度的度数,得到的是矩阵 matrix(a,b,c,d,e,f)

看到这个矩阵,很多人都是一脸蒙蔽的

那么想获取rotate的角度怎么办,看看我抄来的大作:)

(一脸严肃)

还有一个百度来的~~

与 Vector接口 一样,threejs也在 Matrix3.d.ts 文件中提供了一个 Matrix 接口,并且在 Matrix3 (3x3矩阵类)和 Maxtrix4 (4x4矩阵类)中实现了该接口。

我们可以看到,矩阵中的元素是用数组的方式储存的。由于不同维度的矩阵内所用的元素个数不同,所以Matrix3和Matrix4的set方法是分开声明在每个类中的。这里我们以Matrix3.set为例:

可以看到,在set时是以行优先的顺序进行传值的,也就是第一行第一个,第一行第二个,第一行第三个,第二行第一个,第二行第二个...

但是在set方法的实现中,可以看到elements数组内是以列优先的顺序进行存储的:

简单点说,这里只是 存储方式的不同 。由于大多数人都习惯以行优先的方式考虑矩阵,所以threejs中所有的文档都是以行优先的方式表示的。但如果我们想要阅读源码,就要注意到[n11, n12, n13, n21 ... n33]并不是按顺序储存在elements中。事实上如果我们按顺序读取elements中的元素并以行优先的方式组成矩阵,它将是原本矩阵的转置矩阵。

如同Vector的类型,Matrix类型中所有返回值为自身类对象的方法也是原地修改该对象。例如 Transpose转置

所有的Matrix也提供了clone和copy方法,用于深拷贝不同Matrix对象。

那么threejs中的向量与矩阵进行计算是以什么形式进行的呢?这里我们举一个例子。

在Vector3类中提供了appyMatrix3这个方法,这个方法以一个3x3的矩阵作为参数,相乘后原地修改向量的值。

如果我们将Vector3看做 三行一列的矩阵(3x1) 的话,那么就需要左乘3x3矩阵,最后得到列向量:

如果我们将Vecot3看做 一行三列的矩阵(1x3) 的话,那么就需要右乘3x3矩阵,最后得到行向量:

接下来,我们再假设一个向量

加入齐次坐标w=1,来表示三维空间中的一个点(1,2,3)

然后我们构建一个仿射变换矩阵做缩放+平移运算

即沿着xyz轴均缩放2倍,然后沿着xyz移动5个单位距离。最终结果是:

这个计算我们会使用Vector3.applyMatrix4

接下来验证一下:

控制台打印结果:

threejs中的矩阵以 行优先 的形式初始化,以 列优先 的形式储存。

threejs中的向量采用 列向量 ,与矩阵做 左乘运算 。

threejs中一个三维向量与4x4的矩阵进行运算时,会先给三维向量补充第四个值w,也就是齐次坐标,w值与矩阵的第四行有关系:

在上面的例子中,我们使用了一个缩放+平移的 仿射变换矩阵 作为例子,此时w为1。

-webkit-transform-origin: center bottom

transform-origin: center bottom

transform-origin:[ <percentage>| <length>| left | center① | right

] [ <percentage>| <length>| top | center② | bottom

]?

默认值:50% 50%,效果等同于center

center

适用于:所有块级元素及某些内联元素

继承性:无

取值:

<percentage>:

用百分比指定坐标值。可以为负值。

<length>:

用长度值指定坐标值。可以为负值。

left:

指定原点的横坐标为left

center①:

指定原点的横坐标为center

right:

指定原点的横坐标为right

top:

指定原点的纵坐标为top

center②:

指定原点的纵坐标为center

bottom:

指定原点的纵坐标为bottom

说明:

设置或检索对象以某个原点进行转换。

该属性提供2个参数值。

如果提供两个,第一个用于横坐标,第二个用于纵坐标。

如果只提供一个,该值将用于横坐标;纵坐标将默认为50%。

对应的脚本特性为transformOrigin。