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)];
}
效果（把图片绘制到一个固定的位置）：