简介:
Quartz2D是一个二维绘图引擎, 同时支持 iOS 和 Mac 系统
Quartz
2D
能完成的工作
绘制图形
:
线条
\
三角形
\
矩形
\
圆
\
弧等
绘制文字
绘制
\
生成图片
(
图像
)
读取
\
生成
PDF
截图
\
裁剪图片
自定义
UI
控件
在iOS开发中的价值:
有些
UI
界面极其复杂、而且比较个性化,用普通的
UI
控件无法实现,这时可以利用
Quartz2D
技术将控件内部的结构画出来,自定义控件的样子
iOS
中大部分控件的内容都是通过
Quartz2D
画出来的
因此,
Quartz2D
在
iOS
开发中很重要的一个价值是:自定义
view
(自定义
UI
控件)
图形上下文:
图形上下文(
Graphics
Context
):是一个
CGContextRef
类型的数据
图形上下文的作用:
保存绘图信息、绘图状态
决定绘制的输出目标(绘制到什么地方去?) ( 输出 目标 可以 是 PDF 文件、 Bitmap 或者显示器的窗 口上)
相同的一套绘图序列,
指定不同的
GraphicsContext
,就可将相同的图像绘制到
不同的目标上
Quartz2D
提供了以下几种类型的GraphicsContext
Bitmap
Graphics Context (位图上下文)
PDF
Graphics
Context(打印机上下文)
Window
Graphics
Context window上下文(在mac上用的)
Layer
Graphics
Context 图层上下文(iphone上用的 )
Printer
Graphics
Context打印机上下文)
如何利用Quartz2D自定义view?
如何利用
Quartz2D
绘制东西到
view
上?
首先,得有图形上下文,因为它能保存绘图信息,并且决定着绘制到什么地方去
其次,那个图形上下文必须跟
view
相关联,才能将内容绘制到
view
上面
自定义
view
的步骤:
1.新建一个类,继承自
UIView
2.实现
- (
void
)drawRect:(
CGRect
)rect
方法,然后在这个方法中
3.取得跟当前
view
相关联的图形上下文
4.绘制相应的图形内容
5.利用图形上下文将绘制的所有内容渲染显示到
view
上面
- (void)drawRect:(CGRect)rect
必须在自定义的View里实现这个方法, 因为在 drawRect: 方法中才能取得跟 view 相关联的图形上下文
默认只会在view第一次显示的时候调用(只能由系统自动调用, 不能手动调用)- (void)drawRect:(CGRect)rect 图层上下文在这个方法中获取, 其他地方无法获取
画文字
[string drawAtPoint:CGPointMake(50, 50) withAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:30]}];
两种方法 [string drawInRect:CGRectMake(50, 50, 100, 100) withAttributes:dictionary];
[image drawInRect:CGRectMake(0, 0, 150, 150)]; 这个方法是填充
[image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)]; 这一个是填补。
中间两个是控制点的坐标, 最后两个是结束点的坐标。 弧度根据控制点距离两端的长度变化。
设置线段的宽度 CGContextSetLineWidth(context, 10);
设置线段头尾部的样式 CGContextSetLineCap(context, kCGLineCapRound);
设置线段转折点的样式 CGContextSetLineJoin(context, kCGLineJoinRound);
- (void)drawRect:(CGRect)rect
必须在自定义的View里实现这个方法, 因为在 drawRect: 方法中才能取得跟 view 相关联的图形上下文
默认只会在view第一次显示的时候调用(只能由系统自动调用, 不能手动调用)- (void)drawRect:(CGRect)rect 图层上下文在这个方法中获取, 其他地方无法获取
当然 也可以在其他地方调用这个
view
的
setNeedsDisplay
或者
setNeedsDisplayInRect: 方法进行重新绘画。
Quartz2D的API
Quartz2D的API
Quartz2D
的
API
是纯
C
语言的
Quartz2D
的
API
来自于
Core
Graphics
框架
数据类型和函数基本都以
CG
作为前缀
CGContextRef
CGPathRef
CGContextStrokePath
(ctx)
;
在
drawRect:
方法中取得上下文后,就可以绘制东西到
view
上
View
内部有个
layer
(图层)属性,
drawRect:
方法中取得的是一个
Layer
Graphics
Context
,因此,绘制的东西其实是绘制到
view
的
layer
上去了
View
之所以能显示东西,完全是因为它内部的
layer
画直线
1.
获得图形上下文
CGContextRef context=UIGraphicsGetCurrentContext();
2.
拼接路径
CGContextMoveToPoint(context,10,10); 添加一个起点
CGContextAddLineToPoint(context,100,100); 从起点到这个点的线段
3.
绘制路径
CGContextStrokePath
(context)
;画矩形
void CGContextAddRect(CGContextRefc,CGRect rect)
画椭圆
void CGContextAddEllipseInRect(CGContextRefcontext,CGRect rect)
画圆弧
void CGContextAddArc(CGContextRefc,CGFloatx,CGFloaty,
CGFloat radius,CGFloat startAngle,CGFloat endAngle,int clockwise)
x\y : 圆心 radius : 半径 startAngle : 开始角度 endAngle : 结束角度 clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)
画文字
[string drawAtPoint:CGPointMake(50, 50) withAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:30]}];两种方法 [string drawInRect:CGRectMake(50, 50, 100, 100) withAttributes:dictionary];
画图片
[image drawAtPoint:CGPointMake(50, 50)]; 这个方法是按照原本的大小
[image drawInRect:CGRectMake(0, 0, 150, 150)]; 这个方法是填充
[image drawAsPatternInRect:CGRectMake(0, 0, 200, 200)]; 这一个是填补。
贝塞尔曲线
CGContextAddQuadCurveToPoint(ctx, controlX, controlY, endX, endY);
中间两个是控制点的坐标, 最后两个是结束点的坐标。 弧度根据控制点距离两端的长度变化。
关闭路径(连接起点和最后一个点)
CGContextClosePath(ctx);
绘制空心路径
void CGContextStrokePath(CGContextRefc)
绘制实心路径
void CGContextFillPath(CGContextRefc)
CGContextDrawPath(context,kCGPathStroke);
表示填充的模式
设置线段的宽度 CGContextSetLineWidth(context, 10);
设置线段头尾部的样式 CGContextSetLineCap(context, kCGLineCapRound);
设置线段转折点的样式 CGContextSetLineJoin(context, kCGLineJoinRound);
图形上下文栈
将ctx拷贝一份放到栈中
CGContextSaveGState(ctx);
将栈顶的上下文出栈,替换当前的上下文
CGContextRestoreGState(ctx);
即把图形上下文的基本状态存到栈上, 方便下次用。
矩阵操作(一般放在前面)
CGContextRotateCTM(ctx, M_PI_4 * 0.3); 让图形上下文里面画的内容旋转CGContextScaleCTM(ctx, 0.5, 0.5); 让画出来的图都缩放
CGContextTranslateCTM(ctx, 0, 150); 平移
裁剪图片(放在图形的后面, 渲染的前面)
CGContextClip(context); 这一种需要在上面给给定裁剪的范围 可以是圆 矩形 什么的(根据紧挨着这行代码的上面的范围进行裁剪)
CGContextClipToRect(context, CGRectMake(50, 50, 20, 20)); 在矩形里裁剪