iOS开发Quzrtz2D 十:圆形图片的绘制以及加边框圆形图片的绘制
一:圆形图片的绘制
@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 十:圆形图片的绘制以及加边框圆形图片的绘制的更多相关文章
- iOS开发Quzrtz2D:十一:图片截屏以及图片擦除
一:图片截屏:截取的是控制器的view #import "ViewController.h" @interface ViewController () @end @implemen ...
- iOS开发Quartz2D十二:手势解锁实例
一:效果如图: 二:代码: #import "ClockView.h" @interface ClockView() /** 存放的都是当前选中的按钮 */ @property ( ...
- 从零开始学ios开发(十九):Application Settings and User Defaults(上)
在iphone和ipad中,有一个东西大家一定很熟悉,那个东西就是Settings. 这次要学习的东西说白了很简单,就是学习如何在Settings中对一个app的某些属性进行设置,反过来,在app中更 ...
- 从零开始学ios开发(十二):Table Views(上)
这次学习的控件非常重要且非常强大,是ios应用中使用率非常高的一个控件,可以说几乎每个app都会使用到它,它就是功能异常强大的Table Views.可以打开你的iphone中的phone.Messa ...
- 从零开始学ios开发(十五):Navigation Controllers and Table Views(中)
这篇内容我们继续上一篇的例子接着做下去,为其再添加3个table view的例子,有了之前的基础,学习下面的例子会变得很简单,很多东西都是举一反三,稍稍有些不同的内容,好了,闲话少说,开始这次的学习. ...
- 从零开始学ios开发(十):Multiview Applications(多个xib之前的切换)
这篇学习的主要内容是Multiview,在我们学习iphone旋转的时候,介绍过多个view的使用方法,不过这里的view和旋转屏幕中所指的多个view是不同的,旋转屏幕中涉及到的多个view是在一个 ...
- 从零开始学ios开发(十二):Table Views(中)UITableViewCell定制
我们继续学习Table View的内容,这次主要是针对UITableViewCell,在前一篇的例子中我们已经使用过UITableViewCell,一个默认的UITableViewCell包含imag ...
- 从零开始学ios开发(十八):Storyboards(下)
这篇我们完成Storyboards的最后一个例子,之前的例子中没有view之间的切换,这篇加上这个功能,使Storyboards的功能完整呈现.在Storyboards中负责view切换的东西叫做“s ...
- 从零开始学ios开发(十六):Navigation Controllers and Table Views(下)
终于进行到下了,这是关于Navigation Controllers和Table Views的最后一个例子,稍微复杂了一点,但也仅仅是复杂而已,难度不大,我们开始吧. 如果没有上一篇的代码,可以从这里 ...
随机推荐
- 很好的资源 for android
//texttospeach http://examples.javacodegeeks.com/android/core/text-to-speech/android-text-to-speech- ...
- LAN8720A网络模块的使用问题
一.LAN8720A模块驱动电路 最近在调试STM32F4驱动LAN8720A网络模块,在做方案前参考是正点原子的LAN8720A的驱动电路方案,但是从网上买回来的LAN8720A模块用正点原子的例程 ...
- l洛谷 P3926 SAC E#1 - 一道不可做题 Jelly
P3926 SAC E#1 - 一道不可做题 Jelly 题目背景 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢吃蒟蒻果冻.而SOL菌也很喜欢蒟蒻果冻. 有一 ...
- Eclipse导入Maven项目出现错误:Unsupported IClasspathEntry kind=4
使用Eclipse导入Maven项目失败,提示: An internal error occurred during: "Importing Maven projects". Un ...
- 几个经常使用的cmd命令
compmgmt.msc 计算机管理 devmgmt.msc 设备管理器 diskmgmt.msc 磁盘管理工具 dfrg.msc 磁盘碎片整理 eventvwr.msc 事件查看器 fsm ...
- 解决Cookie乱码
在Asp.net的HttpCookie中写入汉字,读取值为什么全是乱码?其实这是因 为文字编码而造成的,汉字是两个编码,所以才会搞出这么个乱码出来!其实解决的方法很简单:只要在写入Cookie时,先将 ...
- Android Service com.android.exchange.ExchangeService has leaked ServiceConnection
启动Android项目的时候,clean Project的时候,报错: android.app.ServiceConnectionLeaked: Service com.android.exchan ...
- 多线程在python中的使用 thread
近期想学习研究一下python中使用多线程,来提高python在爬虫项目中的效率. 如今我们在网页上查询到在python中使用的多线程的使用大多数都是使用的threading模块,可是python中另 ...
- Spring Profiles example--转载
原文地址:http://www.mkyong.com/spring/spring-profiles-example/ Spring @Profile allow developers to regis ...
- CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局
<title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...