图形与动画（四）--附Demo
最近在看《iOS 6 Programming Cookbook》的翻译版，它由DevDiv论坛的网友翻译，原文地址：点击跳转。由于下载的pdf都有水印，并且排版不是很好，特别是代码排版，基本不能看，所以这里就整理了一下，方便再次查看。另外把里面提到的点写了一个demo，由于里面一些代码现在已经废弃，所以demo中都是用的新api，下载地址在这里：图形与动画Demo。
1.10 移动图形环境上所绘制的形状
你想移动被绘制到图形环境上的一切,到一个新的位置,而不需要修改你的绘图代码。或者你只是想轻易的移动你的图形环境。
使用 CGAffineTransformMakeTranslation 函数创建一个仿射位移变换(`affine translation transformation)。
变换。顾名思义:就是改变图形显示的方式。变换在core graphics中是图形在绘制前被应用的一些对象。比如,你可以创建一个位移变换。移动什么,你可能会问?一个位移变换是一种让你能移动形状或图形环境的机制。
其他类型的变换包含旋转和缩放这些都是仿射变换的例子,仿射变换会在最终版本中将原来的每个点映射到另一个点。
位移变换能将路径或图形环境上的形状的当前位置移动到另一个相对的位置。比如说, 你在(10,20)画了一个点,对其使用了(30,40)的仿射变换,然后再画它,这个点会被 画到(40,60),因为 10+30 的和为 40,20+40 的和为 60。
为了创建一个新的位移变换,我们必须使用 CGAffineTransformMakeTranslation 函数, 它会返回一个 CGAffineTransform 类型的仿射变换。此函数的两个参数指定了以点为单位的 x 和 y 方向上的位移。
在 1.7 小节中,我们看见了 CGPathAddRect 过程的第二个参数是一个 CGAffineTransform 类型的变换对象。为了从原始位置向另一个位置移动矩形,你只要创建 一个放射变换,并指定你希望的 x 和 y 轴的位移,并将变换作为第二个参数传入 CGPathAddRect,如下:
- (void)drawRect:(CGRect)rect
{
//创建一个新的 CGMutablePathRef 类型的可变路径
CGMutablePathRef path = CGPathCreateMutable();
CGRect rectrangle = CGRectMake(10.0, 70, 200, 300);
CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 0);
//向路径添加一个矩形
CGPathAddRect(path, &transform, rectrangle);
//获取当前图形上下文
CGContextRef currentContext = UIGraphicsGetCurrentContext();
//向图形环境上添加一个路径
CGContextAddPath(currentContext, path);
UIColor *color = [UIColor colorWithRed:0.20f
green:0.60f
blue:0.80f
alpha:1.0f];
//设置填充颜色为浅蓝色
[color setFill];
//将笔触颜色设置为棕色
[[UIColor brownColor] setStroke];
//设置线的宽度
CGContextSetLineWidth(currentContext, 5.0);
//在图形上下文绘制路径
CGContextDrawPath(currentContext, kCGPathFillStroke);
//释放路径所分配的内存
CGPathRelease(path);
}
效果如下：
图10-1 一个应用了仿射位移变换的矩形
比较图 7-1（图形与动画（二））） 和图10-1 .你能发现不同点吗?检查这两个图形的代码,你会发现每个代码块中的矩形所指定的 x 和 y 点是相同的。只不过在图 10-1 中,我们在将矩形加到路径中时,对矩形应用了仿射位移变换。
除了向绘制到路径中的形状应用变换之外,我们还可以使用 CGContextTranslateCTM 过程对图形环境应用变换。这会在当前变换矩阵(CTM)上应用位移变换。当前的变换矩阵,虽然听起来很复杂,其实很容易理解。你可以将 CTM 当作你的图形环境的中心如何被设置,而你绘制的每个点又是如何投射到屏幕上的工具。比如说,当你要求core graphics在(0,0)点绘图时,core graphics查看CTM来得到屏幕的中心。CTM会做一些计算然后告诉 core graphics(0,0)这点确实是在屏幕的左上角。使用如 CGContextTranslateCTM 这样的过程函数,你可以修改 CTM 的配置,从而改变图形环境上的每个形状,使他们绘制到画布上的另一个位置。下面的例子中,我们能通过对 CTM 应用位移变换而不是直接对矩形操作,而得到和图 10-1 完全相同的屏幕:
- (void)drawRect:(CGRect)rect
{
/* Create the path first. Just the path handle. */
CGMutablePathRef path = CGPathCreateMutable();
/* Here are the rectangle boundaries */
CGRect rectangle = CGRectMake(10.0f, 10.0f, 200.0f, 300.0f);
/* Add the rectangle to the path */
CGPathAddRect(path, NULL, rectangle);
/* Get the handle to the current context */
CGContextRef currentContext = UIGraphicsGetCurrentContext();
/* Save the state of the context to revert
back to how it was at this state, later */
CGContextSaveGState(currentContext);
/* Translate the current transformation matrix to the right by 100 points */
CGContextTranslateCTM(currentContext, 100.0f, 0.0f);
/* Add the path to the context */
CGContextAddPath(currentContext, path);
/* Set the fill color to cornflower blue */
[[UIColor colorWithRed:0.20f
green:0.60f
blue:0.80f
alpha:1.0f] setFill];
/* Set the stroke color to brown */
[[UIColor brownColor] setStroke];
/* Set the line width (for the stroke) to 5 */
CGContextSetLineWidth(currentContext,
5.0f);
/* Stroke and fill the path on the context */
CGContextDrawPath(currentContext, kCGPathFillStroke);
/* Dispose of the path */
CGPathRelease(path);
/* Restore the state of the context */
CGContextRestoreGState(currentContext);
}
1.11 缩放绘制到图形环境上的形状
动态的缩放你图形环境上的形状。
使用 CGAffineTransformMakeScale 函数创建一个仿射缩放变换。
和1.10节类似，只需将变换方式修改为CGAffineTransformMakeScale即可。效果图11-1，
图11-1 缩放一个矩形
注意：这里x,y坐标均有缩放。
1.12 旋转绘制在图形环境上的形状
要旋转图形环境上的内容,而不改变绘图代码。
使用 CGAffineTransformMakeRotation 函数来创建一个仿射旋转变换。
将矩形旋转45°，很简单，和1.10节类似，只需将变换方式修改为CGAffineTransformMakeRotation即可。效果图12-1，
图12-1 旋转一个矩形
