Quartz2D
- 1.Quartz2D是一个二维的绘图引擎,同时支持iOS和Mac OS
- 2.图形上下文(Graphics Context):是CGContextRef类型的数据.
作用:
2.1保存绘图信息,绘图状态.
2.2决定绘制的输出目标(绘制到什么地方去)(输出目标可以是PDF文件)
3.过程:
绘制好图形----(保存)--->通过图形上下文---(显示)--->输出目标
- 4.在同一个绘图序列里,制定不同的图形上下文,可以将所绘的图像绘制到不同的目标上
- 在Quartz2D里,提供了几种Graphics Context
- ①Bitmap Graphics Context
- ②PDF Graphics Context
- ③Window Graphics Context
- ④Layer Graphics Context
- ⑤Printer Graphics Context
- 5.自定义UI控件
- 5.1如何利用Quartz2D自定义UI控件?
- 5.2如何利用Quartz2D绘制东西到UIView上?
- ①首先,要有图形上下文,因为它能保存图形绘制信息,并且决定绘制到什么地方
- ②其次,图形上下文必须跟view相关联,才能将内容绘制到UIView上面.
- 6.自定义UI控件的步骤
- 6.1创建一个类继承于UIView
- 6.2实现
- (void)drawRect:(CGRect)rect {
// Drawing code
}
然后在这个方法中,可以:
- 6.2.1获取跟当前View相关联的图形上下文
- 6.2.2绘制相应的图形内容,绘制时产生的线条,称为路径----是由一个或者多个直线或者曲线段组成
- 6.2.3利用图形上下文绘制的所有内容,渲染显示到View上
- 6.2.4利用UIKit封装的绘图函数,直接绘图
BezierPath基础
- 1.UIBezierPath对象,是对CGPathRef数据类型的封装,path如果是基于矢量图(面向对象图像或者绘图图像,一系列由线连接起来的点)的,都用直线或者曲线创建
- 2.我们使用直线段去创建矩形和多边形,使用曲线段创建弧,圆或者其他复杂的曲线状态
- 3.每一段都包括一个,或者多个点.
4.每一个直线段或者曲线段的结束的地方是下一个开始的地方 - 5.每一个连接的直线段或者曲线段的集合,称为subPath
- 6.一个UIBezierPath对象定义一个完整的路劲,包括一个或者多个subPath.
- 7.创建path对象和使用path对象的过程是分开的,创建path是第一步,包含以下步骤:
- 7.1创建path对象
- 7.2使用moveToPoint:去设置初始线段的的起点
下边给出了简单的例子
#pragma mark------ 利用UIBezierPath绘制图像
- (void)BezierPath_1{
UIColor *color = [UIColor redColor];
[color set];
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 5.0;//线宽
// path.lineCapStyle = kCGLineCapRound;//线条的拐角
path.lineJoinStyle = kCGLineJoinRound;//对接点的处理
/*
线和多边形是一些简单形状,我们可以使用moveToPoint:或者addLineToPoint:方法去构建.
moveToPoint:设置我们想要形状的起点,从这个点开始,我们可以使用方法addLineToPoint:去创建一个形状的线段,也可以连续的创建line.每一个line的起点都是先前线段的终点,终点就是指定的点
*/
//设置初始线段起点
[path moveToPoint:CGPointMake(100.0, 0.0)];
//使用line或者Curve去定义一个或者多个subPath
[path addLineToPoint:CGPointMake(200.0, 40.0)];
[path addLineToPoint:CGPointMake(160.0, 140.0)];
[path addLineToPoint:CGPointMake(40.0, 140.0)];
[path addLineToPoint:CGPointMake(0.0, 40.0)];
//结束路径
//closePath方法,不仅结束了subPath ,它也在最后一个点和第一个点之间建立了一条线段,如果画的是多边形,这一点省去了我们画最后一条线
[path closePath];
//根据坐标连线
[path stroke];
}
#pragma mark-----画线1-------
- (void)drawLine_1{
//1.获取图形上下文(图层)
//目前所用的上下文,都是UIGraphics开头的
// CG-Context-Ref:[CG:目前使用的类型和函数,一般都是以CG开头][Ref:引用] [框架:CoreGraphics]
CGContextRef cxt = UIGraphicsGetCurrentContext();
//描述路径(可变路径)
//创建路径
CGMutablePathRef path = CGPathCreateMutable();
//设置起点
CGPathMoveToPoint(path, NULL, 60, 50);
//设置终点
CGPathAddLineToPoint(path, NULL, 200, 200);
//把路径添加到上下文
CGContextAddPath(cxt, path);
//线宽
CGContextSetLineWidth(cxt, 5.0);
//颜色
// [[UIColor purpleColor] set];
CGContextSetRGBStrokeColor(cxt, 0.7, 0.8, 0.5, 0.9);
//设置线的样式
CGContextSetLineCap(cxt, kCGLineCapRound);
//填充
[[UIColor greenColor]setFill];
//描边
[[UIColor blueColor]setStroke];
//渲染上下文(填充加描边)
CGContextDrawPath(cxt, kCGPathEOFillStroke);
// CGContextFillPath(cxt);
}
#pragma mark-----曲线/矩形-------
- (void)drawCurve{
//获取上下文
CGContextRef cxt = UIGraphicsGetCurrentContext();
//创建路径
UIBezierPath *path = [UIBezierPath bezierPath];
//设置起点
[path moveToPoint:CGPointMake(100, 100)];
//设置终点
[path addCurveToPoint:CGPointMake(200, 200) controlPoint1:CGPointMake(10, 50) controlPoint2:CGPointMake(100, 10)];
//圆形的绘制
// path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 50, 50) cornerRadius:25];
/* //描述圆弧路径
/*
bezierPathWithArcCenter:<#(CGPoint)#> radius:<#(CGFloat)#> startAngle:<#(CGFloat)#> endAngle:<#(CGFloat)#> clockwise:<#(BOOL)#>
参数1:圆弧的中心点
参数2:半径
参数3:起始角度
参数4:结束角度
参数5:是否顺时针
*/
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.frame.size.width/2, self.frame.size.height/2) radius:self.frame.size.width/2 startAngle:0 endAngle:M_PI clockwise:NO];
*/
//添加到上下文上
CGContextAddPath(cxt, path.CGPath);
//渲染上下文
// CGContextDrawPath(cxt, kCGPathFillStroke);
CGContextStrokePath(cxt);
}
