iOS 第十章 图像处理

目标

    了解 CoreGraphics 库

    CoreGraphics 与 Quartz 2D 的区别

    为什么要使用Core Graphics

    了解 Core Graphics 坐标系

    使用 Core Graphics 绘制文字

    使用 Core Graphics 绘制图片

    使用 Core Graphics 上下文绘制更多内容

    使用 Core Graphics 绘制线条

    使用 UIBesizerPath 绘制曲线

 

1、了解 CoreGraphics 库

     

     每个ios 项目，都默认会包含三个库

    (1)Foundation.framework 提供 OC 编码使用的基本函数、类

     (2)UIKit.framework提供各种界面组件和对应的控制器类

     (3)CoreGraphics.framework负责把 UIKit 的图像在屏幕上绘制出来

 

    CoreGraphics是一组基于 C 的 API ，可以用于一切绘图操作。

位于整个 iOS 架构的 媒体层(Media)，负责生成界面，与用户打交道

 

    通过实现和重载Core Graphics 的方法，可以创建自定义的界面元素，可以自定义：文字、图像、渐变、阴影等效果，还可以绘制各种直线、曲线。

         

2、Core Graphics 与 Quartz 2D 的区别

    在学习动画的时候，了解过 Quartz 。在 iOS 中Quartz是一个通用术语，用来描述 iOS 中整个媒体层用到的多种技术，包括 图形、动画、音频、视频等。

    目前需要区分 Quartz 2D 和Quartz Core

    (1)QuartzCore 专门指Core Animation 用到的动画相关的库

    (2)Quartz2D 指一组二维绘图与渲染的 API。Core Graphics 会用到这组 API

    CoreGraphics 有时候也被成为 Quartz 2D 。

 

3、为什么要使用 Core Graphics

   (1)CoreGraphics 绘制的内容是由代码生成的，灵活的在各种分辨率的设备上运行；

   (2)可以绘制自定义的用户界面，可以减小程序的大小

   (3)可以绘制高保真的动态图形、文字、渐变、阴影等。

如iPhone 中下列程序，都用了 CoreGraphics

     

     

 

4、了解 Core Graphics 坐标系

    CoreGraphics 使用的坐标系，原点(0,0)在屏幕的左上角。X 轴向右正向延伸，Y 轴向下正方向延伸。

    CoreGraphics 绘制任何内容(文字、图像、渐变、阴影等)，都需要由一个“点”来考虑。这样就不会因为设备分辨率变化而产生效果的变化。

    不同的设备分辨率不同，但是以点为单位的坐标系完全一样。

设备	像素分辨率	坐标系
iphone2G/3G/3GS、iPod	480*320	480*320
iPhone4/4S	960*640	480*320
iPad、iPad2、iPad3/4/Mini	1024*768	1024*768

   

 

5、使用 Core Graphics 绘制文字

   如何使用Core Graphics ？

    最常见的方法是，自定义一个类，继承 UIView 。重载 UIView 子类中的 drawRect: 方法(重新绘制)。只要改视图加载或刷新显示，重绘方法就会被调用，不要直接调用。

注意：由于drawRect:  方法被调用频率太高，不允许在里面做任何分配内存、释放内存的操作，防止出现内存错误。

 

使用 Core Graphics 绘制文字：

(1)新建工程，并创建一个普通的 UIViewController.h  .m 类

(2)自定义一个类，继承 UIView类。默认会重写

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        //初始化这个视图的基本样式

         self.backgroundColor = [UIColor whiteColor];

    }

    return self;

}

 

 

//Only override drawRect: if you perform custom drawing.

//An empty implementation adversely affects performance during animation.

- (void)drawRect:(CGRect)rect

{

    //这里就可以编写 Core Graphics 代码

}

 

(3)在步骤(1)创建的视图控制器，加载的方法中调用重写过Core Graphics 方法的类对象

- (void)viewDidLoad

{

    [super viewDidLoad];

    //这里调用 Core Graphics 自定义类，drawRect方法会自动调用

    OneDemoView *oneView= [[OneDemoView alloc]initWithFrame:self.view.bounds];

    [self.view addSubview:oneView];

}  

 

可以设置文字 NSString 的如下方法：

方法	描述
drawAtPoint: withFont:	用指定字体，在指定点绘制文字。文字折行用 UILineBreakModeWordWrap方式计算
drawAtPoint:  forWidth: withFont: lineBreakMode:	在指定点，用指定宽度，字体、折行模式。
drawInRect: withFont:	用指定字体绘制文字，大小适合 GGRect。文字折行用 UILineBreakModeWordWrap方式计算，对其方式UITextAlignmentLeft模式
drawInRect: withFont: lineBreakMode:	类似上一个，允许用 UILineBreakMode 定义折行模式。
drawInRect: withFont: lineBreakMode: alignment:	类似上一个，允许开发者定义字体、折行模式、文字对齐方式

 

Demo1

- (void)drawRect:(CGRect)rect

{

    //绘制文字，添加简单的效果

   //1 指定颜色

   UIColor*textColor = [[UIColoralloc]initWithRed:0.1 green:0.4 blue:0.3 alpha:0.9];

   [textColor set];

   //2 指定 字体

   UIFont*myfont = [UIFontfontWithName:@"Avenir-Black" size:26.0f];

   NSString* strText = @"Hello Core Graphics";

   //3 指定文字的位置

   CGPoint mypoint = CGPointMake(10, 10);

   [strText drawAtPoint:CGPointZero withFont:myfont];

}

 

 

 

6、使用 Core Graphics 绘制图片

    如果只是需要显示一个图像，使用 UIImageView 效率更高。使用 Core Graphic 绘制图像，很简单，与UIImageView 的区别是，不会维持图像的高宽比例。不管图像是否变形。

方法	描述
drawAtPoint:	在指定点绘制一副图像
drawAtPoint:  blendMode: alpha:	指定点绘制图像，定义混合模式，透明度
drawInRect:	在指定区域绘图
drawIntRect: blendMode: alpha:	在指定区域绘图，定义混合模式和透明度

Demo

- (void)drawRect:(CGRect)rect

{

 UIImage*img = [UIImage imageNamed:@"png1.png"];

    [img drawAtPoint:CGPointMake(20, 20)];

   

    [img drawInRect:CGRectMake(20, 70, 20, 80)];

}

 

 

7、使用 Core Graphics 上下文绘制更多内容

使用 Core Graphics 上下文，可以修改如下属性CGContextSetXXXX()

路径	Path
阴影	Shadow
笔画	Stroke
剪裁路径	Clip Path
线条粗细	Line Width
混合模式	Blend Mode
填充色	Fill Color
线条图案	Line Dash
当前型变矩阵	Current Transform Matrix

Demo，使用基本的CGContextRef

- (void)drawRect:(CGRect)rect

{

    //1 创建上下文对象

   CGContextRefmyContext = UIGraphicsGetCurrentContext();

   // ********** 你绘制图像的代码 **********

   //2 设置填充颜色

   CGContextSetRGBFillColor(myContext, 1,0,0,1);

   //3 设置填充形状

   CGContextFillRect(myContext, CGRectMake(0,0,200,100));

   //4 设置另一个填充颜色

   CGContextSetRGBFillColor(myContext, 0,0,1,.5);

   //5 设置另一个填充形状

   CGContextFillRect(myContext, CGRectMake(0,0,100,200));

}

 

 

Demo ，给文字添加阴影效果

- (void)drawRect:(CGRect)rect

{

   //给文字添加阴影效果

   //1 得到绘制图形的上下文对象

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //2 坐标点、字体

   CGPointfirst = CGPointMake(10, 30);

   UIFont*myfont3 = [UIFontboldSystemFontOfSize:30.0f];

   //3 设置阴影位置、模糊程度

   CGContextSetShadow(context,CGSizeMake(5,5), 2);

   [@"hello,CoreGraphics "drawAtPoint:firstwithFont:myfont3];

   

   //阴影效果二

   CGPointsecond= CGPointMake(10, 70);

   CGContextSetShadow(context,CGSizeMake(-5, -5), 2);

   [strText drawAtPoint:secondwithFont:myfont2];

   

}

 

8、使用 Core Graphics 绘制线条

 

 

 

Demo:绘制一条直线

- (void)drawRect:(CGRect)rect

{

    //1 得到上下文对象

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //2 设置颜色

   [[UIColorblueColor]set];

   //3 设置线条的属性

   CGContextSetLineWidth(context, 10.0f); //粗细

   CGContextSetLineJoin(context,kCGLineJoinRound);//线条结合点样式

   CGContextSetLineCap(context,kCGLineCapButt);//线条形状

   //4 设置线条起点

   CGContextMoveToPoint(context,50,50);

   //5 设置线条的一个结束点

   CGContextAddLineToPoint(context,200,150);

   

   //封闭笔画路径

   CGContextStrokePath(context);

}

 

 

 

再增加一句话，就能增加一条先，两条先相交的点为  kCGLineJoinRound

 // 再添加一个点

   CGContextAddLineToPoint(context,100,40);

 

 

Demo:绘制一个矩形框

- (void)drawRect:(CGRect)rect

{

    //1 得到上下文对象

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //2 设置颜色

   [[UIColorblueColor]set];

   //3 设置线条的属性

   CGContextSetLineWidth(context,10.0f);  //粗细

   CGContextSetLineJoin(context,kCGLineJoinRound);//线条结合点样式

   CGContextSetLineCap(context,kCGLineCapButt);//线条形状

   //4 设置矩形大小和位置

   CGRect rect1 = CGRectMake(200, 200, 100, 100);

   //封闭矩形

   CGContextStrokeRect(context, rect1);   

}

 

Demo:绘制一个矩形块

- (void)drawRect:(CGRect)rect

{

    //1 得到上下文对象

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //2 设置颜色

   [[UIColorblueColor]set];

   //3 设置线条的属性

   CGContextSetLineWidth(context,10.0f);  //粗细

   CGContextSetLineJoin(context,kCGLineJoinRound);//线条结合点样式

   CGContextSetLineCap(context,kCGLineCapButt);//线条形状

   //设置形状中填充的颜色

   CGContextSetFillColorWithColor(context,[UIColoryellowColor].CGColor);

   //用填充色绘制一个矩形

   CGRectrect2 = CGRectMake(250, 300, 80, 80);

   CGContextFillRect(context,rect2);

}

 

 

Demo 绘制一个椭圆

- (void)drawRect:(CGRect)rect

{

    //1 得到上下文对象

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //2 设置颜色

   [[UIColorblueColor]set];

   //3 设置线条的属性

   CGContextSetLineWidth(context,10.0f);  //粗细

   CGContextSetLineJoin(context,kCGLineJoinRound);//线条结合点样式

   CGContextSetLineCap(context,kCGLineCapButt);//线条形状

 

    //画椭圆

   CGContextStrokeEllipseInRect(context,CGRectMake(100, 100, 50, 220));

}

 

 

9、使用 UIBesizerPath 绘制曲线

计算机中绘制曲线，采用了 法国数学家 贝塞尔 的计算公式。在Core Graphics 库中，有一个专门的类实现这个函数的功能-UIBezierPath

这个公式操作的都是路径：绘图的时候，两个点之间的部分叫路径 Path

 

类方法	描述
+bezierPath:	返回空对象，用于手工构建路径
+bezierPathWithRect:	返回路径，轮廓与 CGRect 一致
+bezierPathWithOvalInRect:	返回椭圆路径，与 CGRect 矩形内切，如果矩形为正方形，返回圆形
+bezierPathWithRoundedRect: cornerRadius:	返回圆角矩形路径，轮廓与CGRect 一致，圆角半径是 conerRadius:
+bezierPathWithRoundedRect: byRoundingCorners: cornerRadii:	与上一个类似，额外可以选择哪个角为圆角，可选四个角：UIRectCornerTopLeft、UIRectCornerTopRight、UIRectCornerBottomLeft、UIRectCornerBottomRight、UIRectCornerAllCorners ，可以用 | 连接，选择多个转角
+bezierPathWithCenter:  radius:  startAngle:  endAngle:  clockwise:	返回路径是弧形、四个参数指明：圆心、半径、开始角度、结束角度(弧度)
+bezierPathWithCGPath:	返回被 Core Graphics 路径初始化的值

Demo 绘制一个圆形

//转换角度的宏定义

#define   DEGREES_TO_RADIANS(degrees)  ((M_PI * degrees)/ 180)

 

- (void)drawRect:(CGRect)rect

{

//绘制一个圆形

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //2 创建一个贝塞尔路径

   UIBezierPath *blueCircle = [UIBezierPath bezierPathWithArcCenter:CGPointMake(80, 100)

                         radius:50

                     startAngle:0

                       endAngle:DEGREES_TO_RADIANS(360)

                      clockwise:NO];

        //3 设置填充颜色，并填充

   CGContextSetRGBFillColor(context,184.0f/255.0f, 217.0f/255.0f, 239.0f/255.0f, 1);

   [blueCircle fill];

  

}

 

Demo 绘制一个带圆角的 矩形

- (void)drawRect:(CGRect)rect

{

//绘制一个带圆角的矩形

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   UIBezierPath*path1 = [UIBezierPathbezierPathWithRoundedRect:CGRectMake(100, 100, 200, 200) cornerRadius:30.0f];

   //得到颜色，填充矩形

   CGContextSetRGBFillColor(context,0.1,0.2,0.2,0.4);

   [path1 fill];

}

 

 

Demo 绘制不规则的形状

- (void)drawRect:(CGRect)rect

{

//绘制不规则形状，泪滴

   CGContextRefcontext = UIGraphicsGetCurrentContext();

   //得到空路径

   UIBezierPath*path = [UIBezierPathbezierPath];

   //指定各个点和角度

   [path moveToPoint:CGPointMake(160, 20)];

   [path addLineToPoint:CGPointMake(260, 340)];

   [path addArcWithCenter:CGPointMake(160, 340) radius:100 startAngle:0 endAngle:M_PI clockwise:YES];

   //关闭并填充路径

   [path closePath];

   [path fill];

}

Hi，推荐文件给你 "ios-05-17-CoreGraphics.zip" http://vdisk.weibo.com/s/IjXB-