ios 裁剪出一个圆形的头像,,这样的例子在简书已经很多了,我就不详细的介绍了.今天我想讲的是怎么裁剪出一个环形的图片.废话不多说:见代码:
1:首先将一张图片裁剪成圆形图片,,
/**圆形图片裁剪*/
- (UIImage *)wjf_circleImage
{
//利用self生成一张圆形图片
// 1.开启图形上下文
UIGraphicsBeginImageContextWithOptions(self.size,NO,0);
// 2.描述圆形路径
UIBezierPath*path = [UIBezierPathbezierPathWithOvalInRect:CGRectMake(0,0,self.size.width,self.size.height)];
// 3.设置裁剪区域
[pathaddClip];
// 4.画图
[selfdrawAtPoint:CGPointZero];
// 5.取出图片
UIImage*image =UIGraphicsGetImageFromCurrentImageContext();
// 6.关闭上下文
UIGraphicsEndImageContext();
returnimage;
}
2:用CGContextClearRect 的功能 制作环形图片
- (UIImage*)getClearRectImage:(UIImage*)image{
UIGraphicsBeginImageContextWithOptions(image.size,NO,0.0f);
CGContextRefctx =UIGraphicsGetCurrentContext();
//默认绘制的内容尺寸和图片一样大,从某一点开始绘制
[imagedrawAtPoint:CGPointZero];
CGFloatbigRaduis = image.size.width/5;
CGRectcirleRect =CGRectMake(image.size.width/2-bigRaduis, image.size.height/2-bigRaduis, bigRaduis*2, bigRaduis*2);
//CGContextAddArc(ctx,image.size.width/2-bigRaduis,image.size.height/2-bigRaduis, bigRaduis, 0.0, 2*M_PI, 0);
CGContextAddEllipseInRect(ctx,cirleRect);
CGContextClip(ctx);
CGContextClearRect(ctx,cirleRect);
UIImage*newImage =UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
returnnewImage;
}
如果你的图片是正方形的话,就大功告成了,但是你的图片是长方形呢???不用怕.
注:将长方形图片变成正方形图片:
-(UIImage*)getSquareImage:(UIImage
*)image RangeCGRect:(CGRect)range
centerBool:(BOOL)centerBool{
/*如若centerBool为Yes则是由中心点取mCGRect范围的图片*/
floatimgWidth = image.size.width;
floatimgHeight = image.size.height;
floatviewWidth =range.size.width;
floatviewHidth =range.size.height;
CGRectrect;
if(centerBool)
rect =CGRectMake((imgWidth-viewWidth)/2,
(imgHeight-viewHidth)/2,viewWidth,viewHidth);
else{
if(viewHidth
{
if(imgWidth<= imgHeight){
rect=CGRectMake(0,0,imgWidth, imgWidth*viewHidth/viewWidth);
}else{
floatwidth = viewWidth*imgHeight/viewHidth;
floatx = (imgWidth - width)/2;
if(x >0){
rect =CGRectMake(x,0, width, imgHeight);
}else{
rect=CGRectMake(0,0,imgWidth, imgWidth*viewHidth/viewWidth);
}
}
}else{
if(imgWidth<= imgHeight){
floatheight = viewHidth*imgWidth/viewWidth;
if(height < imgHeight){
rect =CGRectMake(0,0,imgWidth, height);
}else
{
rect =CGRectMake(0,0,viewWidth*imgHeight/viewHidth,imgHeight);
}
}else
{
floatwidth = viewWidth*imgHeight/viewHidth;
if(width < imgWidth)
{
floatx = (imgWidth - width)/2;
rect =CGRectMake(x,0,width, imgHeight);
}else
{
rect =CGRectMake(0,0,imgWidth, imgHeight);
}
}
}
}
CGImageRefSquareImageRef =
CGImageCreateWithImageInRect(image.CGImage,rect);
CGRectSquareImageBounds =CGRectMake(0,0,CGImageGetWidth(SquareImageRef),CGImageGetHeight(SquareImageRef));
UIGraphicsBeginImageContext(SquareImageBounds.size);
CGContextRefcontext =UIGraphicsGetCurrentContext();
CGContextDrawImage(context,SquareImageBounds,SquareImageRef);
UIImage* SquareImage = [UIImageimageWithCGImage:SquareImageRef];
UIGraphicsEndImageContext();
returnSquareImage;
}
当然这是就用到了UIimage的size的属性了.
CGSize size =yuanlai.size;
floatimageSize;
NSLog(@"size==height%f====width%f",size.height,size.width);
if(size.height>= size.width) {
imageSize = size.width;
}else{
imageSize = size.height;
}
作者：T0_JOIN
链接：https://www.jianshu.com/p/856149a22274
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: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
上面的代码绘制出的效果如下图：
本文Demo链接：https://github.com/zzyyd6316/CycleDemo.git