主页 > C卫生活 >CS193P史丹佛大学的iPhone应用开发课程:第五堂课摘

CS193P史丹佛大学的iPhone应用开发课程:第五堂课摘

上一次的课程中,我们提到了 View 的一些实做上的观念,包含座标系统以及如何建立自己的 View。在这次的笔记当中,我们将进一步探讨如何使用 View 来帮助我们绘图以及操作图片,赶快来一起学习吧!

View 绘图

在上次笔记中的最后一小节中我们曾经谈到如何建立自己的 View 类别,而当我们如果想要修改这个 View 的绘图方式时,我们可以重载 - drawRect:rect 这个方法,如果我们没有去重载这个方法的话,预设就是会使用 backgroundColor 来填满整个 View。

然而,什幺时候我们需要在 controller 中呼叫 drawRect 呢?事实上,我们并不需要呼叫这个方法,在 iPhone 上有一个很重要的设计原则就是要尽量让 Cocoa 去帮我们处理这些琐事,也同样能够增进效能。而当我们真的需要重画 View 的时候只需要呼叫 - setNeedsDisplay 就可以了。

在 iPhone 的平台上面,我们主要会使用 CoreGraphics 这组绘图的 API 来进行 View 的绘图,要注意的是,它是以 C 语言为基础的函式库,并非是 Objective-C,而 CG 这套函式库提供了一些简单但是好用的功能,包括变形、路径、颜色、字体及一些绘图的操作等等。

在我们开始绘製图形之前,一定要先了解所谓的 Context 的概念,context 在英文里面可以背翻译作为上下文或是背景,你可以想像成 context 是一片画布,而且也存放了一些绘图中的资讯,像是像在使用的字体大小或是路径等等。而这些 context 的会在呼叫 drawRect 之前就被设定好,我们只需要呼叫 UIGraphicsGetCurrentContext; 就可以取得现有的 context,在搭配上 CG 的一些函式,就可以修改 context 的设定值,以便完成我们的绘图作业。

虽然我们刚刚说 CG 主要是以 C 语言为主的 API,但其实 UIKit 也有将一些 API 包装成 Obj-C 的格式,像是 UIColor 就可以提供我们快速的设定颜色,而 UIFont 则提供了一个简单的介面来存取系统的字体。在投影片的第 42 页中有一些範例可以提供参考。

接下来我们用一段简单的程式马来看看实际的运作情形吧!

- drawRect:rect {   CGRect bounds = [self bounds]; // 取得 View 的範围    [[UIColor grayColor] set]; // 设定颜色为灰色   UIRectFill ; // 将 View 的範围涂满灰色    CGRect square = CGRectMake ; // 建立一个方形   [[UIColor redColor] set]; // 设定颜色为红色   UIRectFill ; // 将方形涂满红色    [[UIColor blackColor] set]; // 设定颜色为黑色   UIRectFrame ; // 将方形涂上黑色外框 }

成果如下图,应该不难理解:

CS193P史丹佛大学的iPhone应用开发课程:第五堂课摘

但如果我们需要比较複杂的图像,一般会透过以下几个步骤:

  1. 取得 context
  2. 建立路径
  3. 选择颜色
  4. 填满路径或是画边框
  5. 重複以上步骤

而路径又可以包含直线、边角、弧线或是四边型,我们必须先建立好路径,才能够绘图。在投影片的第 47 张中有一些常用的函式可以做参考,我们可以发现,针对 context 和路径的函式其实相当类似,唯一的不同点是建立好的路径可以重複使用,而 context 不行。下面是一个用路径绘图的範例:

- drawRect:rect {   CGContextRef context = UIGraphicsGetCurrentContext; // 取得现在的 context   [[UIColor grayColor] set]; // 将颜色设定成灰色   UIRectFill ; // 将现在的 View 填满灰色    CGContextBeginPath ; // 开始建立路径   CGContextMoveToPoint ; // 先移动到这个点   CGContextAddLineToPoint ; // 从画一条线道 ,注意,现在的定位点也同时移动到    CGContextAddLineToPoint ; // 从画一条线到    CGContextClosePath ; // 关闭路径    [[UIColor redColor] setFill]; // 设定红色为填满路径的颜色   [[UIColor blackColor] setStroke]; // 设定黑色为边的颜色   CGContextDrawPath ; // 将路径绘製出来,kCGPathFillStroke 代表要填满颜色并且涂边 }

而成果的图如下,是不是很方便呢?

CS193P史丹佛大学的iPhone应用开发课程:第五堂课摘
图片及文字

UIImage 是用来呈现图片的 UIKit 类别,我们可以透过下几种方法建立:

  1. +[UIImage imageNamed:name] -- 读取程式中的图片,也就是存放在 Project 的 Resource 的图片
  2. -[UIImage initWithContentsOfFile:path] -- 读取档案系统中的图片
  3. -[UIImage initWithData:data] -- 读取记忆体中的图片

而我们也可以透过刚刚学会的 Core Graphic 函式库来动态产生图片,一般的步骤是:

  1. 建立特定大小的 CGGraphicsContext
  2. 绘图
  3. 将 context 存为图档
  4. 清理 context

另外还有两个很方便的功能:当我们如果有 UIImage 物件时,我们可以透过以下 API 来取得 JPG 或是 PNG 的档案格式:

而在投影片第 57 页的地方,也提供了在 UIImage 上绘製 NSString 的 API,大家如果有需要可以参考。

结论

在这次的笔记当中,我们学到了关于 VIew 绘图的部份。在下一次的笔记当中,将会进入一些 View 的动画效果,敬请期待!

参考资源