一:圆形图片的绘制

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imageV; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; /**
* UIBezierPath:绘制路径,就是根据路径对图形上下文进行构造
*/
//0.加载图片
UIImage *image = [UIImage imageNamed:@"阿狸头像"];
//1.开启跟原始图片一样大小的上下文
UIGraphicsBeginImageContextWithOptions(image.size, NO, );
//2.设置一个圆形裁剪区域
//2.1绘制一个圆形
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , image.size.width, image.size.height)];
//2.2.把圆形的路径设置成裁剪区域
[path addClip];//超过裁剪区域以外的内容都给裁剪掉
//3.把图片绘制到上下文当中(超过裁剪区域以外的内容都给裁剪掉)
[image drawAtPoint:CGPointZero];
//4.从上下文当中取出图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//5.关闭上下文
UIGraphicsEndImageContext(); self.imageV.image = newImage; } @end

裁剪图片思路.

开启一个图片上下文.

上下文的大小和原始图片保持一样.以免图片被拉伸缩放.

在上下文的上面添加一个圆形裁剪区域.圆形裁剪区域的半径大小和图片的宽度一样大.

把要裁剪的图片绘制到图片上下文当中.

从上下文当中取出图片.

关闭上下文.

1.如何设置圆形路径?

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:

CGRectMake(0, 0, image.size.width, image.size.width)];

2.如何把一个路径设为裁剪区域?

[path addClip];

二:带边框的圆形图片绘制

#import <UIKit/UIKit.h>

@interface UIImage (image)

/**
* 生成一张带有边框的圆形图片
*
* @param borderW 边框宽度
* @param borderColor 边框颜色
* @param image 要添加边框的图片
*
* @return 生成的带有边框的圆形图片
*/
+ (UIImage *)imageWithBorder:(CGFloat)borderW color:(UIColor *)borderColor image:(UIImage *)image; @end
#import "UIImage+image.h"

@implementation UIImage (image)

+ (UIImage *)imageWithBorder:(CGFloat)borderW color:(UIColor *)borderColor image:(UIImage *)image{

    //0.加载图片
//UIImage *image = [UIImage imageNamed:@"阿狸头像"];
//1.确定边框宽度
//CGFloat borderW = 5;
//2.开启一个上下文
CGSize size = CGSizeMake(image.size.width + * borderW, image.size.height + * borderW);
UIGraphicsBeginImageContextWithOptions(size, NO, );
//3.绘制大圆,显示出来
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(, , size.width, size.height)];
[borderColor set];
[path addClip];
[path fill];//自动将路径添加到上下文
//4.绘制一个小圆,把小圆设置成裁剪区域
UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
[clipPath addClip];//自动将路径添加到上下文,并且超过裁剪区域的路径直接裁减掉,此方法会裁减掉超过大圆的部分
//5.把图片绘制到上下文当中,drawAtPoint画出的图片大小和image大小相同
[image drawAtPoint:CGPointMake(borderW, borderW)];
//6.从上下文当中取出图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
//7.关闭上下文
UIGraphicsEndImageContext(); return newImage;
} @end

具体实现思路:

1.假设边框宽度为BorderW

2.开启的图片上下文的尺寸就应该是原始图片的宽高分别加上两倍的BorderW,这样开启的目的是为了不让原始图片变形.

3.在上下文上面添加一个圆形填充路径.位置从0,0点开始,宽高和上下文尺寸一样大.设置颜色为要设置的边框颜色.

4.继续在上下文上面添加一个圆形路径,这个路径为裁剪路径.

它的x,y分别从BorderW这个点开始.宽度和高度分别和原始图片的宽高一样大.

将绘制的这个路径设为裁剪区域.

5.把原始路径绘制到上下文当中.绘制的位置和是裁剪区域的位置相同,x,y分别从border开始绘制.

6.从上下文状态当中取出图片.

7.关闭上下文状态.

iOS开发Quzrtz2D 十:圆形图片的绘制以及加边框圆形图片的绘制的更多相关文章

  1. iOS开发Quzrtz2D:十一:图片截屏以及图片擦除

    一:图片截屏:截取的是控制器的view #import "ViewController.h" @interface ViewController () @end @implemen ...

  2. iOS开发Quartz2D十二:手势解锁实例

    一:效果如图: 二:代码: #import "ClockView.h" @interface ClockView() /** 存放的都是当前选中的按钮 */ @property ( ...

  3. 从零开始学ios开发(十九):Application Settings and User Defaults(上)

    在iphone和ipad中,有一个东西大家一定很熟悉,那个东西就是Settings. 这次要学习的东西说白了很简单,就是学习如何在Settings中对一个app的某些属性进行设置,反过来,在app中更 ...

  4. 从零开始学ios开发(十二):Table Views(上)

    这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messa ...

  5. 从零开始学ios开发(十五):Navigation Controllers and Table Views(中)

    这篇内容我们继续上一篇的例子接着做下去,为其再添加3个table view的例子,有了之前的基础,学习下面的例子会变得很简单,很多东西都是举一反三,稍稍有些不同的内容,好了,闲话少说,开始这次的学习. ...

  6. 从零开始学ios开发(十):Multiview Applications(多个xib之前的切换)

    这篇学习的主要内容是Multiview,在我们学习iphone旋转的时候,介绍过多个view的使用方法,不过这里的view和旋转屏幕中所指的多个view是不同的,旋转屏幕中涉及到的多个view是在一个 ...

  7. 从零开始学ios开发(十二):Table Views(中)UITableViewCell定制

    我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...

  8. 从零开始学ios开发(十八):Storyboards(下)

    这篇我们完成Storyboards的最后一个例子,之前的例子中没有view之间的切换,这篇加上这个功能,使Storyboards的功能完整呈现.在Storyboards中负责view切换的东西叫做“s ...

  9. 从零开始学ios开发(十六):Navigation Controllers and Table Views(下)

    终于进行到下了,这是关于Navigation Controllers和Table Views的最后一个例子,稍微复杂了一点,但也仅仅是复杂而已,难度不大,我们开始吧. 如果没有上一篇的代码,可以从这里 ...

随机推荐

  1. 很好的资源 for android

    //texttospeach http://examples.javacodegeeks.com/android/core/text-to-speech/android-text-to-speech- ...

  2. LAN8720A网络模块的使用问题

    一.LAN8720A模块驱动电路 最近在调试STM32F4驱动LAN8720A网络模块,在做方案前参考是正点原子的LAN8720A的驱动电路方案,但是从网上买回来的LAN8720A模块用正点原子的例程 ...

  3. l洛谷 P3926 SAC E#1 - 一道不可做题 Jelly

    P3926 SAC E#1 - 一道不可做题 Jelly 题目背景 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢吃蒟蒻果冻.而SOL菌也很喜欢蒟蒻果冻. 有一 ...

  4. Eclipse导入Maven项目出现错误:Unsupported IClasspathEntry kind=4

    使用Eclipse导入Maven项目失败,提示: An internal error occurred during: "Importing Maven projects". Un ...

  5. 几个经常使用的cmd命令

    compmgmt.msc 计算机管理  devmgmt.msc 设备管理器  diskmgmt.msc 磁盘管理工具  dfrg.msc 磁盘碎片整理  eventvwr.msc 事件查看器  fsm ...

  6. 解决Cookie乱码

    在Asp.net的HttpCookie中写入汉字,读取值为什么全是乱码?其实这是因 为文字编码而造成的,汉字是两个编码,所以才会搞出这么个乱码出来!其实解决的方法很简单:只要在写入Cookie时,先将 ...

  7. Android Service com.android.exchange.ExchangeService has leaked ServiceConnection

    启动Android项目的时候,clean  Project的时候,报错: android.app.ServiceConnectionLeaked: Service com.android.exchan ...

  8. 多线程在python中的使用 thread

    近期想学习研究一下python中使用多线程,来提高python在爬虫项目中的效率. 如今我们在网页上查询到在python中使用的多线程的使用大多数都是使用的threading模块,可是python中另 ...

  9. Spring Profiles example--转载

    原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...

  10. CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

    <title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...