博客> Quartz2D基础
Quartz2D基础
2017-08-19 06:04 评论:0 阅读:174 zyqiong
ios Quartz2D 绘图

偶尔用到绘图,但每次用到都是东拼西凑,不了解原理也不知道有没有更好的实现方法,所以这里总结一下。

1.Quartz2D是一个二维的绘图引擎,同时支持iOS和OS X系统

可以绘制一些简单的图形:线、三角形、圆形、矩形、弧等。还可以绘制文字,生成图片,生成PDF,截图、裁剪图片,自定义UI控件等。因为我们在布局UI界面的时候,一些需求用基本的控件就可以实现了,有一些比较复杂的,就需要自定义实现。所以Quartz2D一个很重要的作用是自定义控件。

2.图形上下文 Graphics Context

通俗来说图形上下文可以相当于一个画布,有几种不同的画布,不同的画布作用不一样 Quartz2D提供了几种: Bitmap Graphics Context

PDF Graphics Context

Window Graphics Context

Layer Graphics Context

Printer Graphics Context

3.drawRect:方法

这个方法决定了可以将图形绘制到view上。 要自定义UI控件,首先要有图形上下文,其次,这个图形上下文要和view相关联,在drawRect:方法中可以获取到系统当前的图形上下文。 新建一个继承自UIView的类 代码示例:

- (void)drawRect:(CGRect)rect {
    // 获取当前上下文
    CGContextRef currRef =  UIGraphicsGetCurrentContext();

    CGContextMoveToPoint(currRef, 100, 100); // 新建起点
    CGContextAddLineToPoint(currRef, 200, 200); // 添加线段到某个点
    CGContextStrokePath(currRef); // 绘制
}

说明:view内部有个属性layer,drawRect:方法中取得的图形上下文是Layer Graphics Context类型的,所以可以将图形绘制到view上。view之所以能显示图形,完全因为内部有layer

4.drawRect:方法什么时候会调用 1.当view第一次显示到屏幕上,系统会创建一个跟当前view相关联的图形上下文 2.在其他地方调用setNeedsDisplay或setNeedsDisplayInRect:的时候,主动调用drawRect:方法无效 在其他地方拿不到view当前的图形上下文,所以不能进行绘图

5.绘图的基本步骤

获得上下文-->拼接/绘制路径-->将路径添加到上下文-->渲染上下文
所有的绘图无非这几个步骤,只不过根据不同的需求使用不同的上下文、不同的路径。
1.获得上下文
可以在drawRect:方法中获取和当前view相关联的上下文:

CGContextRef currRef =  UIGraphicsGetCurrentContext();

也可以在其他方法中开启新的绘图上下文:
比如开启一个位图上下文:

UIImage *image = [UIImage imageNamed:@"img_name"];
UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);

2.拼接路径

新建一个起点:CGContextMoveToPoint(currRef, 100, 100);
添加一个线段到某个点:CGContextAddLineToPoint(currRef, 200, 200);
添加一个矩形:CGContextAddRect(currRef, rect);
添加一个椭圆:CGContextAddEllipseInRect(currRef, rect);
添加一个圆弧:CGContextAddArc(currRef, centerX, centerY, radius, startAngle, endAngle, clockwise);

关闭路径:[path closePath];  // 从终点到起点自动添加线段

// 设置绘图状态,一定要在渲染之前
// 颜色
[[UIColor redColor] setStroke];
// 线宽
CGContextSetLineWidth(ctx, 5);
// 设置连接样式
CGContextSetLineJoin(ctx, kCGLineJoinBevel);
// 设置顶角样式
CGContextSetLineCap(ctx, kCGLineCapRound);

// 上下文矩阵操作,矩阵操作必须要在添加路径之前
//  平移
CGContextTranslateCTM(ctx, 100, 50);
// 缩放
CGContextScaleCTM(ctx, 0.5, 0.5);
// 旋转
CGContextRotateCTM(ctx, M_PI_4);

3.绘制路径

绘制空心路径:CGContextStrokePath(currRef);
绘制实心路径:CGContextFillPath(currRef);
绘制不同模式的路径:CGContextDrawPath(currRef, kCGPathStroke);

4.贝塞尔曲线

贝塞尔曲线只是路径的一种,是对绘图路径的封装,使用起来比较方便
创建一个椭圆的路径:[UIBezierPath bezierPathWithOvalInRect:rect];
设置起始点:[path moveToPoint:CGPointMake(200, 100)];

6.截屏

UIGraphicsBeginImageContextWithOptions(self.view.frame.size, NO, 0);// 创建一个不透明不缩放的图形上下文
CGContextRef currRef =  UIGraphicsGetCurrentContext();// 获取到刚创建的上下文
[myView.layer renderInContext:currRef]; // 渲染
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();  // 从上下文中获取图片
UIGraphicsEndImageContext();// 一定要关闭上下文
收藏
0
sina weixin mail 回到顶部