1.效果图

Untitled3.gif

2.代码展示

1. 创建header file

/*
  该方法负责绘制圆角矩形
 x1,y2: 圆角矩形左上角的坐标
 width , height :控制圆角矩形宽高
 radius 控制圆角矩形的四个圆角的半径
 */
//void CGContextAssRoundRect(CGContextRef c, CGFloat x1, CGFloat y1, CGFloat width, CGFloat height, CGFloat radius)
//{
//    //移动到左上角
//    CGContextMoveToPoint(c, x1 + radius, y1);
//    //添加一条连接到右上角的线段
//    CGContextAddLineToPoint(c, x1 + width - radius, y1);
//    //添加一段圆弧
//    CGContextAddArcToPoint(c, x1 + width, y1, x1 + width, y1 + radius, radius);
//    //添加一条连接到右下角的线段
//    CGContextAddLineToPoint(c, x1 + width, y1 + height - radius);
//    
//}
void CGContextAddRoundRect(CGContextRef c, CGFloat x1 , CGFloat y1, CGFloat width , CGFloat height , CGFloat radius)
{
    // 移动到左上角
    CGContextMoveToPoint (c, x1 + radius , y1);
    // 添加一条连接到右上角的线段
    CGContextAddLineToPoint(c , x1 + width - radius, y1);
    // 添加一段圆弧
    CGContextAddArcToPoint(c , x1 + width , y1, x1 + width
                           , y1 + radius, radius);
    // 添加一条连接到右下角的线段
    CGContextAddLineToPoint(c , x1 + width, y1 + height - radius);
    // 添加一段圆弧
    CGContextAddArcToPoint(c , x1 + width, y1 + height
                           , x1 + width - radius , y1 + height , radius);
    // 添加一条连接到左下角的线段
    CGContextAddLineToPoint(c , x1 + radius, y1 + height);
    // 添加一段圆弧
    CGContextAddArcToPoint(c , x1, y1 + height , x1
                           , y1 + height - radius , radius);
    // 添加一条连接到左上角的线段
    CGContextAddLineToPoint(c , x1 , y1 + radius);
    // 添加一段圆弧
    CGContextAddArcToPoint(c , x1 , y1 , x1 + radius , y1 , radius);
}


void CGContextAddStar(CGContextRef c , NSInteger n, CGFloat dx , CGFloat dy , NSInteger size)
{
    CGFloat dig = 4 * M_PI / n ;
    // 移动到指定点
    CGContextMoveToPoint(c , dx , dy + size);
    for(int i = 1 ; i <= n ; i++)
    {
        CGFloat x = sin(i * dig);
        CGFloat y = cos(i * dig);
        // 绘制从当前点连接到指定点的线条
        CGContextAddLineToPoint(c , x * size + dx ,y * size + dy);
    }
}

2.再创建一个header file

//枚举类型
typedef enum
{
    klineShape = 0,
    krectShape,
    kEillpseShape,
    kRoundRectShape,
    kPenShape
    
}ShapeType;

3.继承uiview

@property (nonatomic, strong) UIColor* currentColor;
@property (nonatomic, assign) ShapeType shape;

CGPoint firstTouch, prevTouch, lastTouch;
// 定义向内存中图片执行绘图的CGContextRef
CGContextRef buffCtx;
UIImage* image;

- (id)initWithCoder:(NSCoder*)aCoder
{
    self = [super initWithCoder:aCoder];
    if (self) {
        // 初始化时将当前颜色设为红色
        self.currentColor = [UIColor redColor];
        // 创建内存中的图片
        UIGraphicsBeginImageContext(self.bounds.size);
        // 获取向内存中图片执行绘图的CGContextRef
        buffCtx = UIGraphicsGetCurrentContext();
    }
    return self;
}
// 当用户手指开始触碰时激发该方法
- (void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    // 获取触碰点坐标
    firstTouch = [touch locationInView:self];
    // 如果当前正在进行自由绘制，prevTouch代表第一个触碰点
    if (self.shape == kPenShape)
    {
        prevTouch = firstTouch;
    }
}
// 当用户手指在控件上拖动时不断地激发该方法
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    // 获取触碰点坐标
    lastTouch = [touch locationInView:self];
    // 如果当前正在进行自由绘制
    if (self.shape == kPenShape)
    {
        // 向内存中的图片执行绘制
        [self draw:buffCtx];
        // 取出内存中的图片，保存到image中
        image = UIGraphicsGetImageFromCurrentImageContext();
    }
    // 通知该控件重绘，此时会实时地绘制起始点与用户手指拖动点之间的形状
    [self setNeedsDisplay];
}
// 当用户手指离开控件时激发该方法
- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    // 获取离开触碰的点坐标
    lastTouch = [touch locationInView:self];
    // 向内存中的图片执行绘制，即把最终确定图形绘制到内存中图片上
    [self draw:buffCtx];
    image = UIGraphicsGetImageFromCurrentImageContext();
    // 通知重绘。
    [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect
{
    // 获取绘图上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 将内存中的图片绘制出来
    [image drawAtPoint:CGPointZero];
    // 调用draw:方法执行绘制
    [self draw:ctx];
}
// 定义一个函数，用于根据firstTouch、lastTouch来确定矩形区域
- (CGRect) curRect
{
    return CGRectMake(firstTouch.x, firstTouch.y,
                      lastTouch.x - firstTouch.x ,
                      lastTouch.y - firstTouch.y);
}
- (void)draw:(CGContextRef)ctx
{
    // 设置线条颜色
    CGContextSetStrokeColorWithColor(ctx, self.currentColor.CGColor);
    // 设置填充颜色
    CGContextSetFillColorWithColor(ctx, self.currentColor.CGColor);
    // 设置线宽
    CGContextSetLineWidth(ctx, 2.0);
    CGContextSetShouldAntialias(ctx, YES);
    switch (self.shape) {
            CGFloat leftTopX , leftTopY;
        case klineShape:
            // 添加从firstTouch到lastTouch的路径
            CGContextMoveToPoint(ctx, firstTouch.x, firstTouch.y);
            CGContextAddLineToPoint(ctx, lastTouch.x, lastTouch.y);
            // 绘制路径
            CGContextStrokePath(ctx);
            break;
        case krectShape:
            // 填充矩形
            CGContextFillRect(ctx ,[self curRect]);
            break;
        case kEillpseShape:
            // 填充椭圆
            CGContextFillEllipseInRect(ctx ,[self curRect]);
            break;
        case kRoundRectShape:
            // 计算左上角的坐标
            leftTopX = firstTouch.x < lastTouch.x ? firstTouch.x :
            lastTouch.x;
            leftTopY = firstTouch.y < lastTouch.y ? firstTouch.y :
            lastTouch.y;
            // 添加圆角矩形的路径
            CGContextAddRoundRect(ctx ,leftTopX ,leftTopY ,
                                  fabs(lastTouch.x - firstTouch.x) ,
                                  fabs(lastTouch.y - firstTouch.y) , 16);
            // 填充路径
            CGContextFillPath(ctx);
            break;
        case kPenShape:
            // 添加从prevTouch到lastTouch的路径
            CGContextMoveToPoint(ctx, prevTouch.x, prevTouch.y);
            CGContextAddLineToPoint(ctx, lastTouch.x, lastTouch.y);
            // 绘制路径
            CGContextStrokePath(ctx);
            // 使用prevTouch保存当前点
            prevTouch = lastTouch;
            break;
    }
}

@interface ViewController ()
{
    NSArray *colors;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    colors = [NSArray arrayWithObjects:
              [UIColor redColor],[UIColor greenColor],
              [UIColor blueColor],[UIColor yellowColor],
              [UIColor purpleColor],[UIColor cyanColor],
              [UIColor blackColor] , nil];
    // Do any additional setup after loading the view, typically from a nib.
}
- (IBAction)changeColor:(UISegmentedControl *)sender {
    // 根据用户的选择来修改FKDrawView的当前颜色
    ((GSCDrawView*)self.view).currentColor = [colors objectAtIndex:sender.selectedSegmentIndex];
}
- (IBAction)changeShape:(UISegmentedControl *)sender {
    
    // 修改FKDrawView控件的shape属性
    ((GSCDrawView*)self.view).shape = sender.selectedSegmentIndex;

}

多有不足还请见谅