iOS绘制实心圆空心圆、图片的裁剪并加边框.

一，首先来说说怎么绘制实心圆和空心圆

• 新建类DrawCyclesView继承至UIView，DrawCyclesView.m中的代码如下：

 #import "DrawCyclesView.h"

#define kBorderWith 20

@implementation DrawCyclesView

//可以用对比性的方法来理解CGContextFillRect，CGContextFillPath，CGContextStrokePath

-(void)drawRect:(CGRect)rect {
    // 获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    CGFloat width = rect.size.width;
    
    /**
     
     画实心圆
     */
    CGRect frame = CGRectMake(kBorderWith + width/4,
                              kBorderWith + width/4,
                              rect.size.width - kBorderWith*2 - width/2,
                              rect.size.height - kBorderWith*2 - width/2);
    //填充当前绘画区域内的颜色
    [[UIColor whiteColor] set];
    //填充当前矩形区域
    CGContextFillRect(ctx, rect);
    //以矩形frame为依据画一个圆
    CGContextAddEllipseInRect(ctx, frame);
    //填充当前绘画区域内的颜色
    [[UIColor orangeColor] set];
    //填充(沿着矩形内围填充出指定大小的圆)
    CGContextFillPath(ctx);
    
    /**
     *  画空心圆
     */
    CGRect bigRect = CGRectMake(rect.origin.x + kBorderWith,
                                rect.origin.y+ kBorderWith,
                                rect.size.width - kBorderWith*2,
                                rect.size.height - kBorderWith*2);
    
    //设置空心圆的线条宽度
    CGContextSetLineWidth(ctx, kBorderWith);
    //以矩形bigRect为依据画一个圆
    CGContextAddEllipseInRect(ctx, bigRect);
    //填充当前绘画区域的颜色
    [[UIColor greenColor] set];
    //(如果是画圆会沿着矩形外围描画出指定宽度的（圆线）空心圆)/（根据上下文的内容渲染图层）
    CGContextStrokePath(ctx);
}

@end

• ViewController中调用：

#import "ViewController.h"
#import "DrawCyclesView.h"
#import "DrawCycleBorderImageView.h"

#define ScreenWidth     [[UIScreen mainScreen] bounds].size.width
#define ScreenHeight    [[UIScreen mainScreen] bounds].size.height

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    DrawCyclesView*cView =[[DrawCyclesView alloc]initWithFrame:CGRectMake((ScreenWidth - 200)/2, 50, 200, 200)];
    [self.view addSubview:cView];
    
}

@end

上面的代码绘制出的效果如下图:

例子1.png

二.图片的裁剪并加边框，这里只适用于图片比例为1:1的情况，其他比例图片会变形，解决办法去网上search一下

• 我们新建类DrawCycleBorderImageView来演示这个例子，DrawCycleBorderImageView.m中的代码如下：

#import "DrawCycleBorderImageView.h"

#define kBorderWith 20

@implementation DrawCycleBorderImageView

- (void)drawRect:(CGRect)rect {
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    /**
     画圆形边框
     */
    CGRect bigRect = CGRectMake(rect.origin.x + kBorderWith,
                                rect.origin.y+ kBorderWith,
                                rect.size.width - kBorderWith*2,
                                rect.size.height - kBorderWith*2);
    //设置空心圆的线条宽度
    CGContextSetLineWidth(ctx, kBorderWith);
    //以矩形bigRect为依据画一个圆
    CGContextAddEllipseInRect(ctx, bigRect);
    //填充当前绘画区域的颜色
    [[UIColor greenColor] set];
    //(如果是画圆会沿着矩形外围描画出指定宽度的（圆线）空心圆)/（根据上下文的内容渲染图层）
    CGContextStrokePath(ctx);
    
    /**
     *  裁剪图片
     */
    CGRect smallRect = CGRectMake(rect.origin.x + kBorderWith,
                                  rect.origin.y + kBorderWith,
                                  rect.size.width - 2 * kBorderWith,
                                  rect.size.height -2 * kBorderWith);
    //以矩形ctx为依据画一个圆
    CGContextAddEllipseInRect(ctx, smallRect);
    //设置裁剪区域
    CGContextClip(ctx);
    // 裁剪图片
    UIImage *image = [UIImage imageNamed:@"myImg.png"];
    // 把图片加入smallRect的矩形区域内，超过上面设定的裁剪区域的部分将被裁剪掉
    [image drawInRect:smallRect];
    // 将上下文的内容渲染到视图的layer图层上
    CGContextStrokePath(ctx);
}

@end

• ViewController中调用：

#import "ViewController.h"
#import "DrawCyclesView.h"
#import "DrawCycleBorderImageView.h"

#define ScreenWidth     [[UIScreen mainScreen] bounds].size.width
#define ScreenHeight    [[UIScreen mainScreen] bounds].size.height

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    DrawCycleBorderImageView*bView =[[DrawCycleBorderImageView alloc]initWithFrame:CGRectMake((ScreenWidth - 310)/2, 50 , 310, 310)];
    bView.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:bView];
}

@end

上面的代码绘制出的效果如下图：

例子2.png

本文Demo链接：https://github.com/zzyyd6316/CycleDemo.git

哈哈，讲完了，因为太无聊了太无聊了，很啰嗦很啰嗦很啰嗦，但适合新手看，老手请飘过~~~~