网站如何做搜索引擎优化,程序员做网站美工能过关吗,精准营销定义,关键词列表矩阵可以用来表示图形的变换。css3定义了matrix和matrix3d方法#xff0c;用来表示2维和3维的变换。下文将分析这两个接口的使用方法#xff0c;并且用下文的思路#xff0c;实现了一个简单的用js控制css3变换的jquery插件css3js #xff0c;
变换矩阵和净变换矩阵
matri…矩阵可以用来表示图形的变换。css3定义了matrix和matrix3d方法用来表示2维和3维的变换。下文将分析这两个接口的使用方法并且用下文的思路实现了一个简单的用js控制css3变换的jquery插件css3js
变换矩阵和净变换矩阵
matrix(a,b,c,d,e,f)有六个参数这六个参数对应到矩阵如下
⎡⎣⎢ab0cd0ef1⎤⎦⎥\begin{bmatrix}a 这种叫做齐次坐标矩阵用齐次坐标矩阵和图形的顶点相乘就能得到变换后的新顶点的位置。比如图形有一个顶点ab现使图形整体延x轴平移100px平移后该顶点的位置应该是a100b。很明显下面的矩阵运算就表示了这个过程
⎡⎣⎢10001010001⎤⎦⎥\begin{bmatrix}1 ⎡⎣⎢a100b1⎤⎦⎥\begin{bmatrix} a+100 \\ b \\ 1\end{bmatrix}
因此知道了这个齐次坐标矩阵就可以算出任何一点变换后的位置所以这个齐次坐标矩阵就是变换矩阵。
如果该点再次延y轴平移100px平移后的新位置应该是a100,b100,则整个过程可表示成
⎡⎣⎢10001010001⎤⎦⎥\begin{bmatrix}1 ⎡⎣⎢1000101001001⎤⎦⎥\begin{bmatrix}1 ⎡⎣⎢a100b1001⎤⎦⎥\begin{bmatrix} a+100 \\ b+ 100 \\ 1\end{bmatrix}
由此可得图形的多次变换可以由一个净变换矩阵表示像上面算式中的
⎡⎣⎢1000101001001⎤⎦⎥\begin{bmatrix}1保存了两次变换的结果。净变换矩阵可由多个变换矩阵相乘得到。
2D变换
我们知道matrix(a,b,c,d,e,f)有六个参数这六个参数对应到矩阵如下
⎡⎣⎢ab0cd0ef1⎤⎦⎥\begin{bmatrix}a 图形学的相关书籍已经指出了其变换矩阵我们直接使用就好了
平移 ⎡⎣⎢100010xy1⎤⎦⎥\begin{bmatrix}1matrix(1,0,0,1,x,y)缩放 ⎡⎣⎢x000y0001⎤⎦⎥\begin{bmatrix} xmatrix(x,0,0,y,0,0)旋转 ⎡⎣⎢cos(x)sin(x)0−sin(x)cos(x)0001⎤⎦⎥\begin{bmatrix} cos(x) 这16个参数对应到矩阵如下
⎡⎣⎢⎢⎢0123456789101112131415⎤⎦⎥⎥⎥\begin{bmatrix} 0 这16个参数是按列排列出矩阵的。3维变换矩阵相比2维变换矩阵增加了一个维度但是原理是相似的也是使用齐次坐标矩阵表示变换矩阵和净变换矩阵。
在图形学上对3维变换的变换矩阵也早有定义
平移 ⎡⎣⎢⎢⎢100001000010xyz1⎤⎦⎥⎥⎥\begin{bmatrix}1matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)缩放 ⎡⎣⎢⎢⎢x0000y0000z00001⎤⎦⎥⎥⎥\begin{bmatrix}xmatrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)旋转 3维旋转稍微复杂因为旋转的轴有可能不是标准的x,y,z轴了而可能是任何一个向量。一般可用欧拉角和四元数表示旋转而欧拉旋转由于存在“万向节死锁”问题所以最好还是用四元数来表示。 四元数即是一个复数p a i b j c kd关于四元数比较难解释可以看中文翻译《理解四元数》。幸好四元数变换也有变换矩阵 ⎡⎣⎢⎢⎢⎢x2∗wcos(θ)y∗x∗wz∗sin(θ)z∗x∗w−y∗sin(θ)0x∗y∗w−z∗sin(θ)y2∗wcos(θ)z∗y∗wx∗sin(θ)0x∗z∗wy∗sin(θ)y∗z∗w−x∗sin(θ)z2∗wcos(θ)00001⎤⎦⎥⎥⎥⎥\begin{bmatrix} x^{2}*w+cos(\theta) 1−cos(θ) w = 1 - cos(\theta) 使用上面的变换矩阵可以实现在坐标原点绕任意轴的旋转所以变换完要做一次逆变换将图形移回原来的位置。
这部分可以看一下 css3js 源代码的Matrix4的实现。
