【绘制】HTML5 Canvas自定义坐标变换。transform()和setTransform()的介绍和使用

介绍

我们之前实现了旋转(rotate)、缩放(scale)和平移(translate)，但是如果要实现更加复杂的坐标变换如“错切”就没那么容易了。

错切效果图

 

所以，接下来介绍更加基础的方法，来实现自定义的坐标变换。不仅能够实现旋转、错切和平移，也能够实现错切等等坐标变换。

自定义坐标变换

我们使用两个用于坐标变换的方法。

CanvasRenderingContext2D对象之中用于坐标变换的方法

方法	描述
transform(double a,double b,double c,double d,double e,double f)	按照这个6个参数所代表的矩阵对当前坐标系进行变换
setTransform(double a,double b,double c,double d,double e,double f)	先将当前对变换矩阵重置为单位矩阵，然后再按照这6个参数所代表对矩阵对坐标系进行变换

这6个参数的含义不能够用一两句话来说出来，为了让你理解，我们先看一下另外平移、缩放、旋转的代数方程。

平移

平移前的旧坐标(x,y),平移后的新坐标(x',y')。

x'=x+dx

y'=y+dy

 新旧坐标系的横向距离差记为dx，其中x你可以理解为单位x，所以根据dx和dy的值就能在x轴和y轴方向平移坐标系。

缩放

缩放前的旧坐标(x,y),平移后的新坐标(x',y')。

x'=x*sx

y'=y*sy

缩放倍数记为sx，其中x你可以理解为单位x，所以根据sx和sy的值就能实现缩放的功能。

旋转

旋转操作的等式需要用到一些三角函数

x' = x*cos(angle)-y*sin(angle)

y' = y*cos(angle)+x*sin(angle)

旋转角度为angle，例如将(5,10)以(0,0)为中心旋转45度，那么将会使其落在(3.5,10.6)这个位置上。

六个参数的含义

前面说transform(a,b,c,d,e,f)和setTransform(a,b,c,d,e,f)都有6个参数，这6个参数将会在一组等式中用到，该等式可以涵盖我们已经讲过的所有用于平移、缩放以及旋转的那些方程。

用于坐标变换的通式

x'=ax+cy+e

y'=bx+dy+f

 

a水平缩放。

b水平倾斜。

c垂直倾斜。

d垂直缩放。

e水平移动。

f垂直移动。

平移、缩放、旋转的自定义实现 

如果a,d=1;b,c=0;那么通过e,f就能实现平移，这种情况下等式就变成了

x'=x+e

y'=y+f

如果将b,c,e,f=0;那么通过a,d就能实现缩放，这种情况下等式就变成了

x'=ax

y'=dy 

如果将a=cos(angle);b=sin(angle);c=-sin(angle);d=cos(angle);e,f=0;就能实现旋转，这种情况下等式就变成了

x'=cos(angle)*x-sin(angle)*y+0

y'=sin(angle)*x+cos(angle)*y+0 

错切 

错切的效果只需要c和b的值就能实现了。当这种情况时：transform(1,0,0,1,0,0);

原图

当修改b和c的值时，transform(1,0,0.75,1,0,0);

修改c为0.75

将6个参数带入等式可以化简得到

x'=x+0.75x

y'=y 

上述等式对画布中每个点的x坐标进行了错切操作，同时保持y坐标不变，于是就产生了水平方向错切效果。竖直方向同理。

setTransform()的使用

transform()可以在当前变换矩阵上叠加运用另外的变换效果；这点其实setTransform()也可以做到，不过不同的是，setTransform()是先重置为默认单位矩阵后，再添加变换效果，这就意味着它会将之前的变换矩阵彻底清除。如果不带参数，则重置之后就不再添加变换效果。