iOS开发中Quartz2D绘图路径的使用以及条纹效果的实现

绘图路径

a.简单说明
在画线的时候，方法的内部默认创建一个path。它把路径都放到了path里面去。
1.创建路径  cgmutablepathref 调用该方法相当于创建了一个路径，这个路径用来保存绘图信息。
2.把绘图信息添加到路径里边。
以前的方法是点的位置添加到ctx（图形上下文信息）中，ctx 默认会在内部创建一个path用来保存绘图信息。
在图形上下文中有一块存储空间专门用来存储绘图信息，其实这块空间就是cgmutablepathref。
3.把路径添加到上下文中。
代码示例：
绘制一条直线的代码：

//1.获取图形上下文
    cgcontextref ctx=uigraphicsgetcurrentcontext();
    //2.绘图（画线）
    //设置起点
    cgcontextmovetopoint(ctx, 20, 20);
    //设置终点
    cgcontextaddlinetopoint(ctx, 200, 300);
    //渲染
    cgcontextstrokepath(ctx);

上面的代码和下面的代码是等价的。

//1.获取图形上下文
    cgcontextref ctx=uigraphicsgetcurrentcontext();
   
    //2.绘图
    //2.1创建一条直线绘图的路径
    //注意：但凡通过quartz2d中带有creat/copy/retain方法创建出来的值都必须要释放
    cgmutablepathref path=cgpathcreatemutable();
    //2.2把绘图信息添加到路径里
    cgpathmovetopoint(path, null, 20, 20);
    cgpathaddlinetopoint(path, null, 200, 300);
    //2.3把路径添加到上下文中
    //把绘制直线的绘图信息保存到图形上下文中
    cgcontextaddpath(ctx, path);
   
    //3.渲染
    cgcontextstrokepath(ctx);
   
    //4.释放前面创建的两条路径
    //第一种方法
    cgpathrelease(path);
    //第二种方法
    //    cfrelease(path);
}

 
b.直接使用path的好处：
第一种代码的阅读性不好，不便于区分。使用path，则一个path就代表一条路径。
比如：如果要在上下文中绘制多个图形，这种情况下建议使用path。
代码示例：

- (void)drawrect:(cgrect)rect
{
    //1.获取图形上下文
    cgcontextref ctx=uigraphicsgetcurrentcontext();

    //2.绘图
    //2.a 画一条直线
    //2.a.1创建一条绘图的路径
    //注意：但凡通过quartz2d中带有creat/copy/retain方法创建出来的值都必须要释放
    cgmutablepathref path=cgpathcreatemutable();
   
    //2.a.2把绘图信息添加到路径里
    cgpathmovetopoint(path, null, 20, 20);
    cgpathaddlinetopoint(path, null, 200, 300);
   
    //2.a.3把路径添加到上下文中
    //把绘制直线的绘图信息保存到图形上下文中
    cgcontextaddpath(ctx, path);
   
   
    //2.b画一个圆
    //2.b.1创建一条画圆的绘图路径(注意这里是可变的，不是cgpathref)
    cgmutablepathref path1=cgpathcreatemutable();
   
    //2.b.2把圆的绘图信息添加到路径里
    cgpathaddellipseinrect(path1, null, cgrectmake(50, 50, 100, 100));
   
    //2.b.3把圆的路径添加到图形上下文中
    cgcontextaddpath(ctx, path1);
   
   
    //3.渲染
    cgcontextstrokepath(ctx);
   
    //4.释放前面创建的两条路径
    //第一种方法
    cgpathrelease(path);
    cgpathrelease(path1);
    //第二种方法
//    cfrelease(path);
}

效果：

提示：如果是画线，那么就创建一条路径（path）用来保存画线的绘图信息，如果又要重新画一个圆，那么就可以创建一条新的路径来专门保存画圆的绘图信息。
注意：
但凡通过quarzt2d中带有creat/copy/retain方法创建出来的值都必须手动的释放
有两种方法可以释放前面创建的路径：
（1）cgpathrelease(path);
（2）cfrelease(path);
说明：cfrelease属于更底层的cocafoundation框架
 
ps：补充知识点：
画四边形的一些方法：
第一种方式：通过连接固定的点绘制四边形
第二种方式：指定起点和宽高绘制四边形
第三种方式：把第二种方式中的两步合并成一步。
第四种方式（oc的方法）：绘制实心的四边形，注意没有空心的方法
第五种：画根线，设置线条的宽度（通过这种方式可以画斜的四边形）
代码示例：

//
//  yyview.m
//  06-四边形的五种画法
//
//  created by apple on 14-6-11.
//  copyright (c) 2014年 itcase. all rights reserved.
//

#import "yyview.h"

@implementation yyview

- (void)drawrect:(cgrect)rect
{
    //获取图形上下文
    cgcontextref ctx=uigraphicsgetcurrentcontext();
    //第一种画法,通过连接固定的点绘制四边形
//    cgcontextmovetopoint(ctx, 0, 20);
//    cgcontextaddlinetopoint(<#cgcontextref c#>, <#cgfloat x#>, <#cgfloat y#>);
//    cgcontextaddlinetopoint(<#cgcontextref c#>, <#cgfloat x#>, <#cgfloat y#>);
//    cgcontextaddlinetopoint(<#cgcontextref c#>, <#cgfloat x#>, <#cgfloat y#>);
   
    //第二种方式：指定起点和宽高绘制四边形
//    cgcontextaddrect(ctx, cgrectmake(20, 20, 200, 100));
//    //渲染
//    cgcontextstrokepath(ctx);
   
    //第三种方式：二种的两步合并成一步。
    //画空心的四边形
//    cgcontextstrokerect(ctx, cgrectmake(20, 20, 200, 100));
//    //画实心的四边形
//    cgcontextfillrect(ctx, cgrectmake(20, 20, 200, 100));
   
    //第四种方式（oc的方法）：绘制实心的四边形，注意没有空心的方法
    uirectfill(cgrectmake(20, 20, 200, 100));
   
    //第五种方式：画根线，设置线条的宽度（通过这种方式可以画斜的四边形）
//    cgcontextmovetopoint(ctx, 20, 20);
//    cgcontextaddlinetopoint(ctx, 100, 200);
//    cgcontextsetlinewidth(ctx, 50);
//    //注意，线条只能画成是空心的
//    cgcontextstrokepath(ctx);
   
}
@end

第五种方法可以画斜的四边形。

信纸条纹
一、前导程序

新建一个项目，在主控制器文件中实现以下几行代码，就能轻松的完成图片在视图中的平铺。

#import "yyviewcontroller.h"

@interface yyviewcontroller ()

@end

@implementation yyviewcontroller

- (void)viewdidload
{
    [super viewdidload];

    uiimage *image=[uiimage imagenamed:@"me"];
    uicolor *color=[uicolor colorwithpatternimage:image];
    self.view.backgroundcolor=color;
}

@end

效果：

二、实现信纸条纹的效果

利用上面的这种特性来做一个信纸的效果。
默认的view上没有分割线，要在view上加上分割线有两种方式：
（1）让美工做一张专门用来做背景的图片，把图片设置为背景。缺点：信的长度不确定，所以背景图片的长度也难以确定。
（2）通过一张小的图片来创建一个颜色，平铺实现背景效果。
 
第一步：生成一张以后用以平铺的小图片。
画矩形。
画线条。
第二步：从上下文中取出图片设置为背景。黑乎乎一片？（其他地方时透明的，控制器的颜色，如果不设置那么默认为黑色的）
实现代码：

//
//  yyviewcontroller.m
//  01-信纸条纹
//
//  created by 孔医己 on 14-6-11.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yyviewcontroller.h"

@interface yyviewcontroller ()

@end

@implementation yyviewcontroller

- (void)viewdidload
{
    [super viewdidload];

   
    // 1.生成一张以后用于平铺的小图片
    cgsize size = cgsizemake(self.view.frame.size.width, 35);
    uigraphicsbeginimagecontextwithoptions(size , no, 0);
   
    // 2.画矩形
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    cgfloat height = 35;
    cgcontextaddrect(ctx, cgrectmake(0, 0, self.view.frame.size.width, height));
    [[uicolor whitecolor] set];
    cgcontextfillpath(ctx);
   
    // 3.画线条
   
    cgfloat linewidth = 2;
    cgfloat liney = height - linewidth;
    cgfloat linex = 0;
    cgcontextmovetopoint(ctx, linex, liney);
    cgcontextaddlinetopoint(ctx, 320, liney);
    [[uicolor blackcolor] set];
    cgcontextstrokepath(ctx);
   
   
    uiimage *image=uigraphicsgetimagefromcurrentimagecontext();
    uicolor *color=[uicolor colorwithpatternimage:image];
    self.view.backgroundcolor=color;
}

@end

效果：

三、应用场景

完成一个简陋的电子书阅读器

代码：

//
//  yyviewcontroller.m
//  01-信纸条纹
//
//  created by 孔医己 on 14-6-11.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yyviewcontroller.h"

@interface yyviewcontroller ()

@property (weak, nonatomic) iboutlet uitextview *textview;
- (ibaction)perbtnclick:(uibutton *)sender;
- (ibaction)nextbtnclick:(uibutton *)sender;
@property(nonatomic,assign)int index;
@end

@implementation yyviewcontroller

- (void)viewdidload
{
    [super viewdidload];

   
    // 1.生成一张以后用于平铺的小图片
    cgsize size = cgsizemake(self.view.frame.size.width, 26);
    uigraphicsbeginimagecontextwithoptions(size , no, 0);
   
    // 2.画矩形
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    cgfloat height = 26;
    cgcontextaddrect(ctx, cgrectmake(0, 0, self.view.frame.size.width, height));
    [[uicolor browncolor] set];
    cgcontextfillpath(ctx);
   
    // 3.画线条
   
    cgfloat linewidth = 2;
    cgfloat liney = height - linewidth;
    cgfloat linex = 0;
    cgcontextmovetopoint(ctx, linex, liney);
    cgcontextaddlinetopoint(ctx, 320, liney);
    [[uicolor blackcolor] set];
    cgcontextstrokepath(ctx);
   
   
    uiimage *image=uigraphicsgetimagefromcurrentimagecontext();
    uicolor *color=[uicolor colorwithpatternimage:image];
    //self.view.backgroundcolor=color;
    self.textview.backgroundcolor=color;
}

- (ibaction)perbtnclick:(uibutton *)sender {
    self.index--;
    self.textview.text=[nsstring stringwithformat:@"第%d页",self.index];
    catransition *ca = [[catransition alloc] init];
    ca.type = @"pagecurl";
   
    [self.textview.layer addanimation:ca forkey:nil];
   
}

- (ibaction)nextbtnclick:(uibutton *)sender {
    self.index++;
    self.textview.text=[nsstring stringwithformat:@"第%d页",self.index];
    catransition *ca = [[catransition alloc] init];
    ca.type = @"pagecurl";
   
    [self.textview.layer addanimation:ca forkey:nil];
}
@end

storyboard中的界面布局

实现的简单效果：