图形与动画(四)--附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 旋转一个矩形

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容