iOS绘图UIBezierPath 和 Core Graphics框架

前言

  iOS系统本身提供了两套绘图的框架,即UIBezierPathCore Graphics。而前者所属UIKit,其实是对Core Graphics框架关于path的进一步封装,所以使用起来比较简单。但是毕竟Core Graphics更接近底层,所以它更加强大。

UIBezierPath

可以创建基于矢量的路径,例如椭圆或者矩形,或者有多个直线和曲线段组成的形状。

使用UIBezierPath,你只能在当前上下文中绘图,所以如果你当前处于UIGraphicsBeginImageContextWithOptions函数或drawRect:方法中,你就可以直接使用UIKit提供的方法进行绘图。如果你持有一个context:参数,那么使用UIKit提供的方法之前,必须将该上下文参数转化为当前上下文。幸运的是,调用UIGraphicsPushContext 函数可以方便的将context:参数转化为当前上下文,记住最后别忘了调用UIGraphicsPopContext函数恢复上下文环境。

简言之:我们一般使用UIBezierPath都是在重写的drawRecrt方法这种情形。其绘图的步骤是这样的:

  • 1.重写drawRect方法。但不需要我们自己获取当前上下文context;
  • 2.创建相应图形的UIBezierPath对象,并设置一些修饰属性;
  • 3.渲染,完成绘制。
- (void)drawRect:(CGRect)rect // 1.重写drawRect方法
{
UIBezierPath* aPath = [UIBezierPath bezierPathWithRect:CGRectMake(, , , )]; // 2.创建图形相应的UIBezierPath对象 // 3.设置一些修饰属性
aPath.lineWidth = 8.0;
aPath.lineCapStyle = kCGLineCapRound;
aPath.lineJoinStyle = kCGLineCapRound;
UIColor *color = [UIColor colorWithRed: green: blue:0.7 alpha:];
[color set]; [aPath stroke]; // 4.渲染,完成绘制
}

需要理解的东西不多,主要是一些代码需要记忆。所以就不写代码了,直接看别人的代码:绘图1-UIBezierPath

Core Graphics

这是一个绘图专用的API族,它经常被称为QuartZ或QuartZ 2D。Core Graphics是iOS上所有绘图功能的基石,包括UIKit。

要搞清楚Core Graphics就要搞清楚下面几个问题:

1.绘图需要 CGContextRef
CGContextRef即图形上下文。可以这么理解,我们绘图是需要一个载体或者说输出目标,它用来显示绘图信息,并且决定绘制的东西输出到哪个地方。可以形象的比喻context就像一个“画板”,我们得把图形绘制到这个画板上。所以,绘图必须要先有context。
2.怎么拿到context?

第一种方法是利用cocoa为你生成的图形上下文。当你子类化了一个UIView并实现了自己的drawRect:方法后,一旦drawRect:方法被调用,Cocoa就会为你创建一个图形上下文,此时你对图形上下文的所有绘图操作都会显示在UIView上。

第二种方法就是创建一个图片类型的上下文。调用UIGraphicsBeginImageContextWithOptions函数就可获得用来处理图片的图形上下文。利用该上下文,你就可以在其上进行绘图,并生成图片。调用UIGraphicsGetImageFromCurrentImageContext函数可从当前上下文中获取一个UIImage对象。记住在你所有的绘图操作后别忘了调用UIGraphicsEndImageContext函数关闭图形上下文。

简言之:

  • 重写UIView的drawRect方法,在该方法里便可得到context;
  • 调用UIGraphicsBeginImageContextWithOptions方法得到context;

3.注意
并不是说一提到绘图,就一定得重写drawRect方法,只是因为通常情况下我们一般采用在drawRect方法里获取context这种方式。

4.drawRect方法什么时候触发

  • 1.当view第一次显示到屏幕上时;
  • 2.当调用view的setNeedsDisplay或者setNeedsDisplayInRect:方法时。

步骤:

  • 1.先在drawRect方法中获得上下文context;
  • 2.绘制图形(线,图形,图片等);
  • 3.设置一些修饰属性;
  • 4.渲染到上下文,完成绘图。
#import "CustomView.h"

@implementation CustomView

- (void)drawRect:(CGRect)rect
{
// 1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext(); // --------------------------实心圆 // 2.画图
CGContextAddEllipseInRect(ctx, CGRectMake(, , , ));
[[UIColor greenColor] set]; // 3.渲染
CGContextFillPath(ctx); // --------------------------空心圆 CGContextAddEllipseInRect(ctx, CGRectMake(, , , ));
[[UIColor redColor] set];
CGContextStrokePath(ctx); // --------------------------椭圆
//画椭圆和画圆方法一样,椭圆只是设置不同的长宽
CGContextAddEllipseInRect(ctx, CGRectMake(, , , ));
[[UIColor purpleColor] set];
CGContextFillPath(ctx); // --------------------------直线
CGContextMoveToPoint(ctx, , ); // 起点
CGContextAddLineToPoint(ctx, self.frame.size.width-, ); //终点
// CGContextSetRGBStrokeColor(ctx, 0, 1.0, 0, 1.0); // 颜色
[[UIColor redColor] set]; // 两种设置颜色的方式都可以
CGContextSetLineWidth(ctx, 2.0f); // 线的宽度
CGContextSetLineCap(ctx, kCGLineCapRound); // 起点和重点圆角
CGContextSetLineJoin(ctx, kCGLineJoinRound); // 转角圆角
CGContextStrokePath(ctx); // 渲染(直线只能绘制空心的,不能调用CGContextFillPath(ctx);) // --------------------------三角形
CGContextMoveToPoint(ctx, , ); // 第一个点
CGContextAddLineToPoint(ctx, , ); // 第二个点
CGContextAddLineToPoint(ctx, , ); // 第三个点
[[UIColor purpleColor] set];
CGContextClosePath(ctx);
CGContextStrokePath(ctx); // --------------------------矩形
CGContextAddRect(ctx, CGRectMake(, , , ));
[[UIColor orangeColor] set];
// CGContextStrokePath(ctx); // 空心
CGContextFillPath(ctx); // --------------------------圆弧
CGContextAddArc(ctx, , , , M_PI, M_PI_4, );
CGContextClosePath(ctx);
CGContextFillPath(ctx); // --------------------------文字
NSString *str = @"你在红楼,我在西游";
NSMutableDictionary *dict = [NSMutableDictionary dictionary];
dict[NSForegroundColorAttributeName] = [UIColor whiteColor]; // 文字颜色
dict[NSFontAttributeName] = [UIFont systemFontOfSize:]; // 字体 [str drawInRect:CGRectMake(, , , ) withAttributes:dict]; // --------------------------图片
UIImage *img = [UIImage imageNamed:@"yingmu"];
// [img drawAsPatternInRect:CGRectMake(20, 280, 300, 300)]; // 多个平铺
// [img drawAtPoint:CGPointMake(20, 280)]; // 绘制到指定点,图片有多大就显示多大
[img drawInRect:CGRectMake(, , , )]; // 拉伸
}

我们常用绘图来自定义一些视图控件,以达到我们个性化的需求。
若自定义视图控件:我们可以子类化一个UIView,然后重写它的drawRect方法。在drawRect里进行图形绘制,从而实现自定义控件,完成酷炫个性化的控件。

 
 
上一篇:undo与redo


下一篇:[翻译]如何用YII写出安全的WEB应用