canvas transform 使用 详解

图形的矩阵变换，其实就是图形中每个点的变换

 

Canvas的transform(a,b,c,d,e,f)方法 和Matrix(矩阵)的对应关系

 

_                 _

|     a   c   e   |

|     b   d   f    |

|_   0   0   1 _|

 

Matrix和点（x,y）的对应关系

x 对应第一行，y对应第二行

 

点（x,y）经过矩阵变换后的结果

x' = ax + cy + e;

y' = bx + dy + f;

一个图形初始的Matrix(矩阵) 如下：

_                 _

|     1   0   0   |

|     0   1   0   |

|_   0   0   1 _|

因为每个点 还是它本身

x' = 1*x + 0*y + 0 = x;

y' = 0*x + 1*y + 0 = y;

 

现在进行矩阵的变换：

平移：translate  其实就是对 e和f的变换， e 代表x的平移量，f代表y的平移量

transform(1, 0, 0, 1, 10, 20) = translate(10, 20),x平移10，y平移20

 

_                   _

|     1   0   10   |

|     0   1   20   |

|_   0   0   1   _|

 

缩放:scale  就是对a 和 d 的变换， a代表x的缩放量，d代表y的缩放量

transform(2, 0, 0, 0.5, 0, 0) = scale(2, 0.5), x放大一倍，y缩小一倍

 

_                   _

|     2   0     0   |

|     0   0.5  0   |

|_   0   0     1 _|

 

旋转：rotate，涉及到a，b，c，d四个变量，

transform(cosθ, sinθ, -sinθ, cosθ，0, 0) = rotate(θ),   θ是旋转的角度

 

_                             _

|     cosθ   -sinθ   0    |

|     sinθ   cosθ    0    |

|_   0        0         1  _|

 

拉伸：skew，涉及到 b 和 c两个变量

transform(1, tanθy, tanθx, 1, 0, 0) = rotate(θ),   θy是y轴的倾斜角度，θx是x轴的倾斜角度,此时的a，b应该为1，

ctx.transform(1,Math.tan(Math.PI/180*30),0,1,0,0)

斜切30度,那么就必须用tan把30度包起来,x/y轴都是如此.

 

_                             _

|     1        tanθ   0     |

|     tanθ   1        0     |

|_   0        0        1   _|

 

更多的复杂变换，需要计算出相应的Matrix,并赋给transform就行。

如：镜像，任意对称轴都可以用y = k * x表示

matrix((1-k*k) / (1+k*k), 2k / (1 + k*k), 2k / (1 + k*k), (k*k - 1) / (1+k*k), 0, 0)

 

那么已知对称轴和(x, y),求对称点(x', y')

 

很简单，一是垂直，二是中心点在轴线上，因此有：

(y-y') / (x - x') = -1/ k → ky-ky' = -x+x'
(x + x') / 2 * k = (y + y')/2 → kx+kx' = y+y'

很简单的，把x'和y'提出来，就有：

x' = (1-k*k)/(k*k+1) *x + 2k/(k*k+1) *y;
y' = 2k/(k*k+1) *x + (k*k-1)/(k*k+1) *y;

再结合矩阵公式：
x' = ax+cy+e;
y' = bx+dy+f;

我们就可以得到：
a = (1-k*k)/(k*k+1);
b = 2k/(k*k+1);
c = 2k/(k*k+1);
d = (k*k-1)/(k*k+1);

也就是上面matrix方法中的参数值啦！