iOS: 使用CGContextRef,CGPath和UIBezierPath来绘画

这三种东西:CGContextRefCGPathUIBezierPath。本质上都是一样的,都是使用Quartz来绘画。只不过把绘图操作暴露在不同的API层面上,在具体实现上,当然也会有一些细小的差别。

我们将主要使用这3个类型,绘制出同一张图片,如下,一个笑脸:

首先使用Quartz的CGPath来做这张图。很简单,首先创建用于转移坐标的Transform,然后创建一个CGMutablePathRef(属于CGPath类型)对象。接着通过两个CGPathAddEllipseInRect和一个CGPathAddArc函数来绘制Path中的两个眼睛和一个嘴,注意把CGAffineTransform的地址传进去,这样Transform才会应用。接着把这个创建好的CGPath加入到当前CGContextRef中,最后通过CGContextRef执行绘画。

代码:

- (void)viewDidLoad{    [super viewDidLoad];

    //开始图像绘图    UIGraphicsBeginImageContext(self.view.bounds.size);    //获取当前CGContextRef    CGContextRef gc = UIGraphicsGetCurrentContext();

    //创建用于转移坐标的Transform,这样我们不用按照实际显示做坐标计算    CGAffineTransform transform = CGAffineTransformMakeTranslation(50, 50);    //创建CGMutablePathRef    CGMutablePathRef path = CGPathCreateMutable();    //左眼    CGPathAddEllipseInRect(path, &transform, CGRectMake(0, 0, 20, 20));    //右眼    CGPathAddEllipseInRect(path, &transform, CGRectMake(80, 0, 20, 20));    //笑    CGPathMoveToPoint(path, &transform, 100, 50);    CGPathAddArc(path, &transform, 50, 50, 50, 0, M_PI, NO);    //将CGMutablePathRef添加到当前Context内    CGContextAddPath(gc, path);    //设置绘图属性    [[UIColor blueColor] setStroke];    CGContextSetLineWidth(gc, 2);    //执行绘画    CGContextStrokePath(gc);

    //从Context中获取图像,并显示在界面上    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();

    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];    [self.view addSubview:imgView];}

接下来,我们不去使用CGPath类型的相关函数,而完全使用CGContextRef相关的函数,这些函数执行起来其实是和上面讲的的CGPath完全等价的。

这里需要注意的是,完全使用CGContextRef的话,Transform的应用需使用CGContextTranslateCTM函数。

完整代码:

- (void)viewDidLoad{    [super viewDidLoad];

    //开始图像绘图    UIGraphicsBeginImageContext(self.view.bounds.size);    //获取当前CGContextRef    CGContextRef gc = UIGraphicsGetCurrentContext();

    //使用CGContextTranslateCTM函数来转移坐标的Transform,这样我们不用按照实际显示做坐标计算    CGContextTranslateCTM(gc, 50, 50);    //左眼    CGContextAddEllipseInRect(gc, CGRectMake(0, 0, 20, 20));    //右眼    CGContextAddEllipseInRect(gc, CGRectMake(80, 0, 20, 20));    //笑    CGContextMoveToPoint(gc, 100, 50);    CGContextAddArc(gc, 50, 50, 50, 0, M_PI, NO);    //设置绘图属性    [[UIColor blueColor] setStroke];    CGContextSetLineWidth(gc, 2);    //执行绘画    CGContextStrokePath(gc);

    //从Context中获取图像,并显示在界面上    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];    [self.view addSubview:imgView];}

同样会绘制出上面的图形。

最后我们使用UIBezierPath类型来完成上述图形,UIBezierPath很有意思,它包装了Quartz的相关API,自己存在于UIKit中,因此不是基于C的API,而是基于Objective-C对象的。那么一个非常重要的点是由于离开了Quartz绘图,所以不需要考虑Y轴翻转的问题,在画弧的时候,clockwise参数是和现实一样的,如果需要顺时针就传YES,而不是像Quartz环境下传NO的。

其次椭圆的创建需使用bezierPathWithOvalInRect方法,这里名字是Oral而不是Quartz中的Ellipse

最后注意UIBezierPathapplyTransform方法需要最后调用。

完整代码:

- (void)viewDidLoad{    [super viewDidLoad];

    //开始图像绘图    UIGraphicsBeginImageContext(self.view.bounds.size);

    //创建UIBezierPath    UIBezierPath *path = [UIBezierPath bezierPath];    //左眼    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 20, 20)]];    //右眼    [path appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(80, 0, 20, 20)]];    //笑    [path moveToPoint:CGPointMake(100, 50)];    //注意这里clockwise参数是YES而不是NO,因为这里不知Quartz,不需要考虑Y轴翻转的问题    [path addArcWithCenter:CGPointMake(50, 50) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];    //使用applyTransform函数来转移坐标的Transform,这样我们不用按照实际显示做坐标计算    [path applyTransform:CGAffineTransformMakeTranslation(50, 50)];    //设置绘画属性    [[UIColor blueColor] setStroke];    [path setLineWidth:2];    //执行绘画    [path stroke];

    //从Context中获取图像,并显示在界面上    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    UIImageView *imgView = [[UIImageView alloc] initWithImage:img];    [self.view addSubview:imgView];
时间: 2024-11-02 02:42:32

iOS: 使用CGContextRef,CGPath和UIBezierPath来绘画的相关文章

iOS使用Core Graphics和UIBezierPath绘画

通过UIView的子类的- (void)drawRect:(CGRect)rect 函数可用对视图进行重新绘画: 要重新绘画可以通过Core Graphics和UIBezierPath来实现. 1.通过Core Graphics函数来绘画 首先要通过UIGraphicsGetCurrentContex()函数获取当前绘画上下文: 然后设定起点,增加线到一个点,,,,,闭合,例如下面: //获取当前绘画上下文 CGContextRef context= UIGraphicsGetCurrentCo

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)(转)

Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. 自己学习时实现的demo,希望对大家有帮助,具体的实现看代码,并有完美的注释解释,还有一些对我帮助的博文供大家参考.都在代码里面. 看一下demo效果图先: 自定义CustomView类,CustomView.h: [cpp]  view plain copy #import <UIKit/UIKit.h> #import 

iOS学习:CAShapeLayer与UIBezierPath动画

CAShapeLayer与UIBezierPath动画: CAShapeLayer与UIBezierPath的动画,就离不开 CABasicAnimation:也将会使用到 strokeEnd.strokeStart.lineWidth 三个属性: 先做一条贝塞尔曲线: UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(40, 80)]; [path addCurveToPoint:CGPo

(转) IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

首先了解一下CGContextRef: An opaque type that represents a Quartz 2D drawing environment. Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框. 自己学习时实现的demo,希望对大家有帮助,具体的实现看代码,并有完美的注释解释,还有一些对我帮助的博文供大家参考.都在代码里面. 看一下demo效果图先: 自

IOS使用CGContextRef动态画折线图

- (void)drawRect:(CGRect)rect { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextClearRect(context, rect); CGContextSetLineWidth(context, _lineWidth); //设置画笔宽度 CGContextSetFillColorWithColor(context, [[self backgroundColor] CGColor]); /

iOS绘图CGContextRef详解

转自:http://blog.csdn.net/u014286994/article/details/51333118 /* CoreGraphics - CGContext.h */ /** Graphics state functions. **/ //为了让开发者在进行坐标变换时无须计算多次坐标变换后的累加结果,Quartz 2D还提供了如下两个方法来保存.恢复绘图状态 /* 保存CGContextRef当前的绘图状态,方便以后恢复该状态*/ void CGContextSaveGStat

OS: 剪裁UIImage部分不规则区域

首先,我们需要把图片展示在界面上.很简单的操作,唯一需要注意的是由于CGContextDrawImage会使用Quartz内以左下角为(0,0)点的坐标系,所以需要使用CGContextTranslateCTM函数和CGContextScaleCTM函数把以左下角为0点的坐标系转化成左上角形式的坐标系. ViewController中的代码: //ViewController中的viewDidLoad方法- (void)viewDidLoad { //从Bundle中读取图片 UIImage *

iOS开发---绘图

绘图操作 前言:在iOS开发中,系统已经给我们提供了功能强大的控件,可是很多并不能满足我们的需求.这时候我们需要,自定义一些美观的控件.所用的知识也就是下面的绘图. 1.基本的绘图知识 1.1图形上下文 1.1图形上下文(Graphics Context):是一个CGContextRef类型的数据 1.2图形上下文的作用 保存绘图信息.绘图状态 决定绘制的输出目标(绘制到什么地方去?) (输出目标可以是PDF文件.Bitmap或者显示器的窗口上) 1.2 - (void)drawRect:(CG

[ios]ios画线 UIGraphicsBeginImageContextWithOptions--生成透明的图形

参考 :http://www.mgenware.com/blog/?p=493 这三种东西:CGContextRef,CGPath和UIBezierPath.本质上都是一样的,都是使用Quartz来绘画.只不过把绘图操作暴露在不同的API层面上,在具体实现上,当然也会有一些细小的差别. 我们将主要使用这3个类型,绘制出同一张图片,如下,一个笑脸: 首先使用Quartz的CGPath来做这张图.很简单,首先创建用于转移坐标的Transform,然后创建一个CGMutablePathRef(属于CG