iOS开发之绘图（Core Graphics）

在准备画板的时候一定要重写drawRect方法

常用的方法：

• CGContextRef 上下文

• 路径
  1 UIBezierPath 贝塞尔路径
  2 通过点绘制一条路径 CGMutablePathRef
  3 注意必须设置一个起始点 CGContextMoveToPoint
• 画形状
  1 矩形 CGContextAddRect:
  2 曲线 CGContextAddCurveToPoint
  3 圆形 CGContextAddEllipseInRect
• 截图
  1 开始截图的方法 UIGraphicsBeginImageContextWithOptions
  2 获得当前图片上下文的图片 UIGraphicsGetImageFromCurrentImageContext() -> 从画图的layer上得到的
  3 UIGraphicsEndImageContext 关闭图片上下文
  4 UIGraphicsBeginImageContext开始获得图片上下文
  5 CGContextStrokePath 把路径绘制到上下文
  6 直接把路径绘制到界面 stroke
• 设置画笔
  1 CGContextSetLineWidth 设置画笔宽度
  2 setFill 设置画线区域范围的填充颜色
  3 CGContextSetStrokeColor 设置画笔颜色
  4 set 设置画笔颜色
  5 设置画笔颜色填充模式
  kCGPathFill, 只填充
  kCGPathStroke,只显示画笔颜色
  kCGPathFillStroke,既填充又有画笔

使用步骤

• 1 CGContextRef 上下文->画板
• 2 画图的内容 -> 设置画图的内容
• 3 把内容添加到上下文（画板）上
• 4 把内容画到画板上

代码示例

//  Copyright © 2016年 安静SRR. All rights reserved.
//

#import "PaintingView.h"

@interface PaintingView ()
{
    CGContextRef contextRef;

}
@end

@implementation PaintingView
//所有画图的方法 写在drawRect里面
//1、初始化的时候就会调用drawRect方法
//2、调用setNeedsDisplay的时候也会调用drawRect方法

-(void)drawRect:(CGRect)rect{
    [super drawRect:rect];
    [self addRound];
    
}
//画直线
-(void)addLine{

//1、创建画布上下文
//获得当前的上下文当做画布
 CGContextRef context = UIGraphicsGetCurrentContext();
//2、创建画图的内容
    UIBezierPath *path = [UIBezierPath bezierPath];
    /*
     Point 中心点
     x 中心点x
     y 中心点y
     
     y不变 x从小值 - 大值 横向直线
     */
  //2.1设置一个起始点
    [path moveToPoint:CGPointMake(10, 50)];
  //2.2添加其他点
    [path addLineToPoint:CGPointMake(300, 50)];
      [path addLineToPoint:CGPointMake(300, 350)];
    
  //2.3设置画笔宽度
    path.lineWidth = 2;
    
 //2.4设置画笔颜色
    //[[UIColor orangeColor]set];
    //画笔颜色
    [[UIColor whiteColor]setStroke];
    //填充颜色
    [[UIColor purpleColor]setFill];
    
    
//3、把内容《路径》添加到上下文<画布>
    CGContextAddPath(context, path.CGPath);
//4、绘制（渲染）内容到画板（上下文）
  //  CGContextStrokePath(context);
    //设置填充的样式
    CGContextDrawPath(context, kCGPathFillStroke);
    
}
//添加矩形
-(void)addRect{
//1、创建画布
    CGContextRef context = UIGraphicsGetCurrentContext();
//2、设置内容
    CGContextAddRect(context, CGRectMake(10, 10, 100, 100));
    //2.1设置画笔颜色
    [[UIColor orangeColor]setStroke];
    [[UIColor colorWithRed:1.0 green:0.382 blue:0.4795 alpha:1.0]setFill];
    //2.2 设置画笔宽度;
    CGContextSetLineWidth(context, 5);
 //3、渲染内容到画板
  //  CGContextStrokePath(context);
  //   CGContextDrawPath(context, kCGPathFillStroke);
    //把内容直接渲染到画布
    CGContextStrokeRect(context, CGRectMake(10, 10, 100, 100));
}
//添加圆形
-(void)addRound{
    //1、创建画布
     contextRef = UIGraphicsGetCurrentContext();
    //2、内容
    CGContextAddEllipseInRect(contextRef, CGRectMake(20, 20, 100, 100));
    //3、设置画笔颜色
    [[UIColor whiteColor]set];
    //渲染到画布
    CGContextDrawPath(contextRef, kCGPathFillStroke);

}
//画曲线
-(void)addCurve
{
   //1、创建画布
    CGContextRef context = UIGraphicsGetCurrentContext();
    //2、内容
    UIBezierPath *path = [UIBezierPath bezierPath];
    // [ moveToPoint:CGPointMake(10, 100)];
    //绘制曲线
    //  [path addCurveToPoint:CGPointMake(20, 130) controlPoint1:CGPointMake(100, 200) controlPoint2:CGPointMake(300, 100)];
    /**
     *  center 中心点
     *  radius 半径
     *  startAngle 开始的弧度
     *  endAngle 结束的弧度
     *  clockwise 是顺时针 还是逆时针
     */
    [path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:M_PI_2 endAngle:M_PI clockwise:YES];
    [[UIColor redColor]setStroke];
    [[UIColor yellowColor]setFill];
    //3、把内容添加到画布上
    CGContextAddPath(context, path.CGPath);
    //4、渲染
    CGContextDrawPath(context, kCGPathFillStroke);

}
//简化画线
-(void)addLine2{
//1、路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(200, 200)];
    [path addLineToPoint:CGPointMake(200, 500)];
    [[UIColor whiteColor]set];
    
    //2、画出内容
    [path stroke];
 }

//截屏
- (UIImage *)imageFromView
{
   //1、获得图片的画布（上下文）
    //2、画布的上下文
    //3、设置截图的参数 截图
    //4、关闭图片的上下文
    //5、保存
    UIGraphicsBeginImageContext(self.frame.size);
    CGContextRef context = UIGraphicsGetCurrentContext();
    [self.layer renderInContext:context];
    //开始截图
    UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
   //关闭截图上下文
    UIGraphicsEndImageContext();
    
    UIImageWriteToSavedPhotosAlbum(theImage,nil,nil,nil); //保存图片到相册
    
    return theImage;
}

@end

备注：代码示例里面包括了画直线、画矩形、画圆形、画曲线、还有保存截图的方法。有兴趣的朋友可以研究一下。
这里面没有添加撤销的方法，在这里把思路说一下：因为画的线是存在数组里面的，可以添加一个响应事件，在这个响应事件里面添加移除数组元素的方法，这样就可以实现划线的撤消了