iOS开发中Quartz2D的基本使用方式举例

一、画直线

代码：

//
//  yylineview.m
//  03-画直线
//
//  created by apple on 14-6-9.
//  copyright (c) 2014年 itcase. all rights reserved.
//

#import "yylineview.h"

@implementation yylineview

// 当自定义view第一次显示出来的时候就会调用drawrect方法
- (void)drawrect:(cgrect)rect
{

    // 1.取得和当前视图相关联的图形上下文(因为图形上下文决定绘制的输出目标)/
    // 如果是在drawrect方法中调用uigraphicsgetcurrentcontext方法获取出来的就是layer的上下文
    cgcontextref  ctx=uigraphicsgetcurrentcontext();//不需要*,同id
   
    // 2.绘图(绘制直线), 保存绘图信息
    // 设置起点
    cgcontextmovetopoint(ctx, 20, 100);
    //设置终点
    cgcontextaddlinetopoint(ctx, 300, 100);
   
   
    //设置绘图的状态
    //设置线条的颜色为蓝色
    cgcontextsetrgbstrokecolor(ctx, 0, 1.0, 0, 1.0);
    //设置线条的宽度
    cgcontextsetlinewidth(ctx, 15);
    //设置线条起点和终点的样式为圆角
    cgcontextsetlinecap(ctx, kcglinecapround);
    //设置线条的转角的样式为圆角
    cgcontextsetlinejoin(ctx, kcglinejoinround);
    //3.渲染（绘制出一条空心的线）
    cgcontextstrokepath(ctx);
   
//    //注意线条不能渲染为实心的
//    cgcontextfillpath(ctx);
   
   
   
    //设置第二条线
    //设置第二条线的起点
    cgcontextmovetopoint(ctx, 50, 200);
    //设置第二天线的终点(自动把上一条直线的终点当做起点)
    cgcontextaddlinetopoint(ctx, 300, 60);
   
    //设置绘图的状态
//    cgcontextsetrgbstrokecolor(ctx, 1.0, 0.7, 0.3, 1.0);
    //第二种设置颜色的方式
    [[uicolor graycolor] set];
    //设置线条的宽度
    cgcontextsetlinewidth(ctx, 10);
    //设置线条的起点和终点的样式
    cgcontextsetlinecap(ctx, kcglinecapbutt);
   
    //渲染第二条线的图形到view上
    //绘制一条空心的线
    cgcontextstrokepath(ctx);
}

@end

效果：

二、画三角形

代码：

//
//  yyrectview.m
//  02-画三角形
//
//  created by 孔医己 on 14-6-10.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yyrectview.h"

@implementation yyrectview

- (void)drawrect:(cgrect)rect
{
    //1.获得图形上下文
    cgcontextref ctx=uigraphicsgetcurrentcontext();
   
    //2.绘制三角形
    //设置起点
    cgcontextmovetopoint(ctx, 20, 100);
    //设置第二个点
    cgcontextaddlinetopoint(ctx, 40, 300);
    //设置第三个点
    cgcontextaddlinetopoint(ctx, 200, 200);
    //设置终点
//     cgcontextaddlinetopoint(ctx, 20, 100);
    //关闭起点和终点
    cgcontextclosepath(ctx);
   
    // 3.渲染图形到layer上
    cgcontextstrokepath(ctx);
   
}

@end

效果：

提示：关闭起点和终点  cgcontextclosepath(ctx);

三、画四边形

代码：

//
//  yyrect.m
//  03-画四边形
//
//  created by 孔医己 on 14-6-10.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yyrect.h"

@implementation yyrect

- (void)drawrect:(cgrect)rect
{

    //1.获取图形上下文
    cgcontextref ctx=uigraphicsgetcurrentcontext();
    //2.画四边形
    cgcontextaddrect(ctx, cgrectmake(20, 20, 150, 100));
   
    // 如果要设置绘图的状态必须在渲染之前
    //    cgcontextsetrgbstrokecolor(ctx, 1.0, 0, 0, 1.0);
    // 绘制什么类型的图形(空心或者实心).就要通过什么类型的方法设置状态
    //    cgcontextsetrgbfillcolor(ctx, 1.0, 0, 0, 1.0);
   
    // 调用oc的方法设置绘图的颜色
    //    [[uicolor purplecolor] setfill];
    //    [[uicolor bluecolor] setstroke];
    // 调用oc的方法设置绘图颜色(同时设置了实心和空心)
    //    [[uicolor greencolor] set];
    [[uicolor colorwithred:1.0 green:0 blue:0 alpha:1.0] set];
   
   
    //3.渲染图形到layer上
    //空心的
    cgcontextstrokepath(ctx);
    //实心的
//    cgcontextfillpath(ctx);
   
}

@end

提示：如果要设置绘图的状态必须在渲染之前。

效果（实心和空心）：

四、画圆

代码1：

- (void)drawrect:(cgrect)rect
{

    // 1.获取上下文
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 画圆
    cgcontextaddarc(ctx, 100, 100, 50, 0, 2 * m_pi, 0);

    // 3.渲染 (注意, 画线只能通过空心来画)
//    cgcontextfillpath(ctx);
    cgcontextstrokepath(ctx);
   
}

效果：

代码2：

// 画圆
    // 1.获取上下文
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 2.画圆
    cgcontextaddellipseinrect(ctx, cgrectmake(50, 100, 50, 50));
   
    [[uicolor greencolor] set];
   
    // 3.渲染
    //    cgcontextstrokepath(ctx);
    cgcontextfillpath(ctx);

效果：

代码3：

// 画椭圆
    // 1.获取上下文
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 2.画圆
    cgcontextaddellipseinrect(ctx, cgrectmake(50, 100, 100, 230));
   
    [[uicolor purplecolor] set];
   
    // 3.渲染
    //    cgcontextstrokepath(ctx);
    cgcontextfillpath(ctx);

效果：

五、画圆弧

代码1：

// 画圆弧
    // 1.获取上下文
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 2.画圆弧
    // x/y 圆心
    // radius 半径
    // startangle 开始的弧度
    // endangle 结束的弧度
    // clockwise 画圆弧的方向 (0 顺时针, 1 逆时针)
    //    cgcontextaddarc(ctx, 100, 100, 50, -m_pi_2, m_pi_2, 0);
    cgcontextaddarc(ctx, 100, 100, 50, m_pi_2, m_pi, 0);
    cgcontextclosepath(ctx);
   
    // 3.渲染
    //     cgcontextstrokepath(ctx);
    cgcontextfillpath(ctx);

效果：

代码2：

// 1.获取上下文
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 2.画饼状图
    // 画线
    cgcontextmovetopoint(ctx, 100, 100);
    cgcontextaddlinetopoint(ctx, 100, 150);
    // 画圆弧
    cgcontextaddarc(ctx, 100, 100, 50, m_pi_2, m_pi, 0);
    //    cgcontextaddarc(ctx, 100, 100, 50, -m_pi, m_pi_2, 1);
   
    // 关闭路径
    cgcontextclosepath(ctx);
    [[uicolor browncolor]set];
   
   
    // 3.渲染 (注意, 画线只能通过空心来画)
    cgcontextfillpath(ctx);
    //    cgcontextstrokepath(ctx);

效果：

六、画文字
代码：

//
//  yytextview.m
//  04-写文字
//
//  created by 孔医己 on 14-6-10.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yytextview.h"

@implementation yytextview

- (void)drawrect:(cgrect)rect
{
   
    // 画文字
    nsstring *str = @"的额搜风搜分手了粉色发俄双方说法offff瓦房你f回复f入会费wfh；飞；fn返回wfh；哦发货；f回复；fhisfhsifh我皮肤好apifrhi分红awfhiof威锋网i";
   
    // 1.获取上下文
    //    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 2.绘图
    // 不推荐使用c语言的方法绘制文字, 因为quraz2d中的坐标系和uikit中的坐标系不一致, 绘制出来的文字是颠倒的, 而且通过c语言的方法绘制文字相当麻烦
    //    cgcontextselectfont(<#cgcontextref c#>, <#const char *name#>, <#cgfloat size#>, <#cgtextencoding textencoding#>)
    //    cgcontextshowtext(ctx, <#const char *string#>, <#size_t length#>)
   
    // 绘制矩形
    // 1.获取上下文
    cgcontextref ctx = uigraphicsgetcurrentcontext();
    // 2.绘图
    cgcontextaddrect(ctx, cgrectmake(50, 50, 100, 100));
    // 3.渲染
    cgcontextstrokepath(ctx);
   
   
//    nsmutabledictionary *md = [nsmutabledictionary dictionary];
//    // 设置文字颜色
//    md[nsforegroundcolorattributename] =[uicolor redcolor];
//    // 设置文字背景颜色
//    md[nsbackgroundcolorattributename] = [uicolor greencolor];
//    // 设置文字大小
//    md[nsfontattributename] = [uifont systemfontofsize:20];
   
    //    将文字绘制到指点的位置
    //    [str drawatpoint:cgpointmake(10, 10) withattributes:md];
   
    //    将文字绘制到指定的范围内, 如果一行装不下会自动换行, 当文字超出范围后就不显示
    [str drawinrect:cgrectmake(50, 50, 100, 100) withattributes:nil];
}

@end

效果：

图片

代码1:

//
//  yyimage.m
//  04-写文字
//
//  created by 孔医己 on 14-6-10.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yyimage.h"

@implementation yyimage

- (void)drawrect:(cgrect)rect
{
 
    //    1.加载图片到内存中
    uiimage *image = [uiimage imagenamed:@"me"];
   
   
    // 利用drawaspatterninrec方法绘制图片到layer, 是通过平铺原有图片
    [image drawaspatterninrect:cgrectmake(0, 0, 320, 480)];
}

@end

效果（平铺）：

代码2：

#import "yyimage.h"

@implementation yyimage

- (void)drawrect:(cgrect)rect
{
 
    //    1.加载图片到内存中
    uiimage *image = [uiimage imagenamed:@"me"];
   
   
    // 利用oc方法将图片绘制到layer上
 
    // 利用drawinrect方法绘制图片到layer, 是通过拉伸原有图片
        [image drawinrect:cgrectmake(0, 0, 200, 200)];
   
    // 利用drawaspatterninrec方法绘制图片到layer, 是通过平铺原有图片
//    [image drawaspatterninrect:cgrectmake(0, 0, 320, 480)];
}

@end

效果（拉伸图片）：

代码3：

//
//  yyimage.m
//  04-写文字
//
//  created by 孔医己 on 14-6-10.
//  copyright (c) 2014年 itcast. all rights reserved.
//

#import "yyimage.h"

@implementation yyimage

- (void)drawrect:(cgrect)rect
{
 
    //    1.加载图片到内存中
    uiimage *image = [uiimage imagenamed:@"me"];
   
   
    // 利用oc方法将图片绘制到layer上
   
    // 将图片绘制到指定的位置
    [image drawatpoint:cgpointmake(100, 100)];
    }

效果（把图片绘制到一个固定的位置）：