Processing-5-图形处理

fwalker

上一章
本章要点如下：

平移与相对平移旋转与缩放组合变换

第一部分的2、3章讲述了基本图形和高级图形的绘画技术，这一章主要讲对这些图形的变换处理。因为我们前面所讲的绘画的图形都是正交与坐标轴的，没有一个是斜着显示在窗口上的，有时候我们确实需要倾斜放置的图形，所以这章所讲的技术就很实用，我们不光是要会画图，还要会处理图形。
平移与相对平移

涉及的相关语法
translate()、pushMatrix()、popMatrix()
还是老规矩，我们首先举例说明用法
代码清单5.1

1. rect(10, 10, 50, 30);//绘制一个矩形A
2. translate(10, 30);//将矩形向右平移10个像素，向下平移30个像素
3. rect(10, 10, 50, 30);//在原位置再画一个先前的图形，对比平移效果B

复制代码

代码的效果图如下
translate(x, y)表示将这个函数上面绘画的图形向右移动x个像素，向下移动y个像素。
当x或y为负值的时候则向左，向上移动x,y的绝对值个像素，这很好理解，和数学上的定义基本一致。
还有一个需要注意的点，translate(x, y)是可以叠加的，例子如下
矩形C的位置被叠加平移了。
如果我们不想让C被平移叠加呢，我们改怎么办。
这个时候Processing也为我们提供了技术支持。使用相对平移，又称为矩阵
使用的函数是pushMatrix()、popMatrix()。
我们还是按照老规矩新举例
这里我使用了对比窗口，左边是没有使用矩阵的，右边是使用了矩阵的，为了实现矩形平移（33,0）,我们使用pushMatrix()和popMatrix()包裹矩形的平移代码。没有被包裹的就还是原样绘画。
pushMatrix()、popMatrix()必须是成对出现的，和前面beginShape()和endShape()一样。
pushMatrix()、popMatrix()可以进行嵌套使用
嵌套使用会使平移的坐标系变得复杂，我们需要一步一步梳理
代码清单5.2

1. pushMatrix();//放入矩阵1
2. translate(20, 0);
3. rect(0, 10, 70, 20);//在（20,10）绘制矩形
4. pushMatrix();//嵌套一层矩阵2
5. translate(30, 0);//在上一个矩阵的基础上移动（30,0）
6. rect(0, 30, 70, 20);//在（50,30）处绘制图形
7. popMatrix();//弹出矩阵2
8. rect(0, 50, 70, 20);//在（20,50）处绘制
9. popMatrix();//继续弹出矩阵1
10. rect(0, 70, 70, 20);//没有存放的矩阵，所以按照原始坐标画图

复制代码

其实pushMatrix()、popMatrix()就是起到了一个相对坐标系的作用。
旋转与缩放

旋转的语法是rotate()函数，用于旋转坐标系：rotat(angle)
例子如下
和translate类似，rotate()也是可以叠加的，旋转PI/16的时候其实是在原来PI/8的基础上旋转的，旋转的角度也可以是负数，rotate()和数学上的旋转的概念基本一致。
这里我做了一个测试，rotate()也是支持pushMatrix()和popMatrix()的。
缩放的语法是scala(size)、scale(xsize，ysize)，示例如下
scale()的用法很简单，设置一个参数时，x,y的放大倍数都会变化成相同的值，设置两个参数时，放大的倍数对应设置的参数，性质和rotate()、translate()也一样是可以叠加的。还有一点需要注意那就是scale()会影响图形的边线的宽度，如果要想保持边线宽度一致，需要在strokeWeight（）中除以scale的参数，例如下面这样
矩形的边框变宽了，为了通俗一点说，这里我就叫做边框不叫边线宽度。
在设置第2个strokeWeight(1.0/s)时，第三个矩形也就是最表面的那个矩形的边框还是比原来宽。必须再除以一个s才能与前两个矩形的边框相同。因为strokeWeight()并不能叠加，放大过几次要还原就必须除以放大倍数的次方。
组合变换

变换函数调用顺序的不同会产生不同的结果
组合变换的示例如下
这一章的内容也就到此结束了，下一章将讲述第三部分，Processing的动画技术。
下一章