第二章、小实例，画字，画线，矩形，画图，动画（iOS学习笔记，从零开始。）

源代码再此下载： http://download.csdn.net/detail/hherima/5108428

本博文主要讲如何绘制文字，绘制一条直线，绘制图片，给图片添加动画。

首先，创建一个Single View Application的工程。

起名字showApp.这是一个空的工程。源文件里只有下图1中的几个源文件。

（上图1）

我们发现ViewController这个类继承自UIViewController。是MVC模式中的C，即控制类。

其次，我们添加一个V类，Myview

继承自UIView用于绘制。按照如下几个图的步骤。添加Myview类。

在ShowApp工程上右键,选择New file...,弹出下面对话框图2

（上图2）

下一步键入添加类的名字Myview图3，注意选择继承自UIView

（上图3）

下一步保存到showapp工程里如图4

（上图4）

好了，Myview已经添加到showapp工程里了。（如果Myview.h和Myview.m不在showApp文件夹下，可以拖拽到showApp文件夹下）

第三，在ViewController中初始化Myview

在ViewController.m中的viewDidLoad中添加两行代码，出事后Myview。注意在头文件处，引入#import "Myview.h"，如图5.

（上图5）

第四，添加绘制文本的代码。

在Myview.m中的drawRect函数中，添加代码如下：

/*

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

// An empty implementation adversely affects performance during animation.

  */

- (void)drawRect:(CGRect)rect

{

   UIColor *magentaColor =

    [UIColorcolorWithRed:0.5f

                   green:0.0f

                    blue:0.5f

                   alpha:1.0f];

    /* Set the color in the graphical context */

    [magentaColorset];

    /* Load the font */

   UIFont *helveticaBold = [UIFontfontWithName:@"HelveticaNeue-Bold"size:30.0f];

    /* Our string to be drawn */

   NSString *myString =@"Hellow world";

    /* Draw the string using the font. The color has

     already been set */

    [myStringdrawAtPoint:CGPointMake(25,190)withFont:helveticaBold];

}

运行工程，模拟器就会显示Hello world了。

第五，绘制一条直线。

这里，我把绘制文本的代码放到drawMyText函数里，绘制直线的代码放到drawMyLine函数。如下所示：

*注意在头文件中声明drawMyText 和 drawMyLine两个函数。

- (void)drawMyText;

- (void)drawMyLine;

下面是源文件代码。

- (void)drawRect:(CGRect)rect

{

    [selfdrawMyText];

    [selfdrawMyLine];

}

- (void)drawMyText

{

   UIColor *magentaColor =

    [UIColorcolorWithRed:0.5f

                   green:0.0f

                    blue:0.5f

                   alpha:1.0f];

    /* Set the color in the graphical context */

    [magentaColorset];

    /* Load the font */

   UIFont *helveticaBold = [UIFontfontWithName:@"HelveticaNeue-Bold"size:30.0f];

    /* Our string to be drawn */

   NSString *myString =@"Hellow world";

    /* Draw the string using the font. The color has

     already been set */

    [myStringdrawAtPoint:CGPointMake(25,190)withFont:helveticaBold];

}

- (void)drawMyLine

{

    //draw line

    CGContextRef context    =UIGraphicsGetCurrentContext();//获取画布

    CGContextSetStrokeColorWithColor(context, [UIColorredColor].CGColor);//线条颜色

    CGContextSetShouldAntialias(context,NO);//设置线条平滑，不需要两边像素宽

    CGContextSetLineWidth(context,1.0f);//设置线条宽度

    CGContextMoveToPoint(context,153,6); //线条起始点

    CGContextAddLineToPoint(context,153,145);//线条结束点

    CGContextStrokePath(context);//结束，也就是开始画

}

一条竖直的直线已经显示到模拟器上了。

第六、绘制矩形

首先，获取上下文

CGContextRef context = UIGraphicsGetCurrentContext();

画无框矩形

1. //设置矩形填充颜色：红色  
2. CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);  
3. //填充矩形  
4. CGContextFillRect(context, rect);  
5. //执行绘画  
6. CGContextStrokePath(context);  

 

画有框矩形

1. //设置矩形填充颜色：红色  
2. CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);  
3. //填充矩形  
4. CGContextFillRect(context, rect);  
5. //设置画笔颜色：黑色  
6. CGContextSetRGBStrokeColor(context, 0, 0, 0, 1);  
7. //设置画笔线条粗细  
8. CGContextSetLineWidth(context, 1.0);  
9. //画矩形边框  
10. CGContextAddRect(context,rect);  
11. //执行绘画  
12. CGContextStrokePath(context);  

摘自：http://blog.csdn.net/onlyou930/article/details/7726399 

第七、绘制图片（注意图片可能颠倒）

事先准备一个图片，例如我准备了一个图片叫1.png，放到Support Files文件夹下：

在Myview.h里添加属性。

@interface Myview : UIView

{

    UIImage* image1;

}

@property (nonatomic,retain)UIImage* image1;

- (void)drawMyImage;

在Myview.m文件里，添加

@synthesize image1;

- (void)drawRect:(CGRect)rect

{

    [self drawMyText];

    [self drawMyLine];

    [selfdrawMyImage];

}

- (void)drawMyImage

{

    //draw image 

    CGContextRef context    =UIGraphicsGetCurrentContext();//获取画布

    //CGContextDrawImage(context,CGRectMake(160,0,160, 150), [image1CGImage]);

    //上面这种方式，绘制出来的图片是翻转的，开始不知道。因为测试的图片都比较对称。后发发现是上下颠倒了

    //下面才是正确的方法。

    UIGraphicsPushContext( context );

    [imagedrawInRect:imageRect];

    UIGraphicsPopContext();

}

使用CGContextDrawImage绘制图片上下颠倒的原因：

在iOS的不同framework中使用着不同的坐标系 ：

UIKit － y轴向下
Core Graphics(Quartz) － y轴向上
OpenGL ES － y轴向上
   

        UIKit是iPhone SDK的Cocoa Touch层的核心framework，是iPhone应用程序图形界面和事件驱动的基础，它和传统的windows桌面一样，坐标系是y轴向下的; 

        Core Graphics(Quartz)一个基于2D的图形绘制引擎，它的坐标系则是y轴向上的；

        OpenGL ES是iPhone SDK的2D和3D绘制引擎，它使用左手坐标系，它的坐标系也是y轴向上的，如果不考虑z轴，在二维下它的坐标系和Quartz是一样的。
        所以，当通过CGContextDrawImage绘制图片到一个context中时，如果传入的是UIImage的CGImageRef，因为UIKit和CG坐标系y轴相反，所以图片绘制将会上下颠倒。

在initWithFrame里对image1进行初始化，为1.png

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        // Initialization code

       image1 = [UIImageimageNamed:@"1.png"];

    }

    return self;

}

运行工程，就能显示图片了，如图6

第八、给图片添加动画

上面的图片显示方式直接绘制图片，下面的方式为控件方式绘制。当然，图片控件的话，就不需要我们自己绘制了，iOS的UI库已经帮助我们绘制了。

代码如下：彩色部分需要添加。

头文件部分。

@interface Myview : UIView

{

    UIImage* image1;

   UIImage* image2;

}

@property (nonatomic,retain) UIImage* image1;

@property (nonatomic,retain)UIImage* image2;

- (void)drawRect:(CGRect)rect;

- (void)drawMyText;

- (void)drawMyLine;

- (void)drawMyImage;

- (void)annimateImage;

@end

源文件部分

#import "Myview.h"

#import <QuartzCore/QuartzCore.h>

@implementation Myview

@synthesize image1;

@synthesize image2;

- (id)initWithFrame:(CGRect)frame

{

    self = [super initWithFrame:frame];

    if (self) {

        // Initialization code

        image1 = [UIImage imageNamed:@"1.png"];

       image2 = [UIImageimageNamed:@"2.png"];

        [selfannimateImage];

    }

    return self;

}

- (void)annimateImage

{

   UIImageView* imageView = [[UIImageViewalloc]initWithImage:image2];

    imageView.frame =CGRectMake(0,0,100,100);

    [selfaddSubview:imageView];

    imageView.userInteractionEnabled =YES;

    UITapGestureRecognizer* singleTap =

    [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(onImageClick)];

    [imageViewaddGestureRecognizer:singleTap];

    //animation

    CABasicAnimation *animation = [CABasicAnimationanimationWithKeyPath:@"transform"];

    animation.delegate =self;

    animation.toValue = [NSValuevalueWithCATransform3D:CATransform3DMakeRotation(M_PI ,0, 0,1.0)];

    animation.duration =1;

    animation.cumulative =YES;

    animation.repeatCount =INT_MAX;

    

    [imageView.layeraddAnimation:animationforKey:@"animation"];

}

代码已经添加完毕，但是我们不能编译过去，因为我们使用了QuartzCore的头文件，却没有引入它的库。

怎么引入，如图7所示：点击工程：

（上图7）

点击“+”号，将QuartzCore的库引入。再次编译工程成功运行。如图8

（上图8）

上图中的太阳一直在转动，这就是我们加的动画。

源代码再此下载：http://download.csdn.net/detail/hherima/5108428