理解和应用canvas变换

默认的canvas画布以左上角为原点,向右为x轴增长方向,向下为y轴增长方向。默认以像素为单位。

很多情况下使用默认绘图环境极为不便,默认坐标系与我们上学时经常用到的直角坐标系不太一致。

幸运的是我们可以利用为canvas提供的变换函数来进行坐标转换,比如将原点移动到画布中心,转换Y轴方向等。 当调用一个变换函数时,接下来的绘图将自动变换。所以变换前应该先将当前环境保存下来,执行完绘图时恢复之前的环境。 save()和restore()两个函数用来保存和恢复环境。

下面说一下常用的变换函数:

1. 平移函数 translate(dx, dy) 调用此函数后接下来的绘图x值自动增加dx,y值自动增加dy。效果就是平移一个绘图,也就是所有点都进行了平移。这也是改变原点的办法。

2. 旋转函数 rotate(angle) 调用此函数后接下来的绘图将沿原点顺时针方向旋转angle弧度

3. 缩放函数 scale(a, b) 调用此函数后x坐标值将缩放a倍,y坐标将缩放b倍。效果是整个绘图放大或缩小了。 a和b的值可以为负值,比如 scale(1, -1)的效果是转换y轴的方向(向下变为向上)。

还有两个矩阵变换函数transform / setTransform。它们稍微复杂些,先不介绍。

上面那些变换函数可以一起使用,但你心中要明白每一步操作有什么影响。

回到开头的问题,比如我们想将原点移动到(300,400)这个点,然后使y轴方向向上,可以这么做:

    dc.translate(300, 400);
    dc.scale(1,-1);

接下来的绘图就是你熟悉的在直角坐标系下的绘图了。

当绘制正弦函数sin(x)时,由于y值最大为1,x的范围一般为2*π ,这时可以利用缩放函数scale对x轴和y轴进行放大。 又比如我们的数据值是在(1000,3000)附近,这时可以在设置好坐标后对坐标进行平移,使(1000,3000)这个点在画布中央。

    dc.translate(300, 400);
    dc.scale(1,-1);
    dc.translate(-1000, -3000);

相关链接:1.canvas基础教程

THE END