body { font-family: Helvetica, arial, sans-serif; font-size: 14px; line-height: 1.6; padding: 30px; background-color: rgba(255, 255, 255, 1) }
body>*:first-child { margin-top: 0 !important }
body>*:last-child { margin-bottom: 0 !important }
a { color: rgba(65, 131, 196, 1) }
a.absent { color: rgba(204, 0, 0, 1) }
a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0 }
h1, h2, h3, h4, h5, h6 { margin: 20px 0 10px; padding: 0; font-weight: bold; -webkit-font-smoothing: antialiased; cursor: text; position: relative }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { background: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA09pVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoMTMuMCAyMDEyMDMwNS5tLjQxNSAyMDEyLzAzLzA1OjIxOjAwOjAwKSAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM2NjlDQjI4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM2NjlDQjM4ODBGMTFFMTg1ODlEODNERDJBRjUwQTQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzY2OUNCMDg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzY2OUNCMTg4MEYxMUUxODU4OUQ4M0REMkFGNTBBNCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsQhXeAAAABfSURBVHjaYvz//z8DJYCRUgMYQAbAMBQIAvEqkBQWXI6sHqwHiwG70TTBxGaiWwjCTGgOUgJiF1J8wMRAIUA34B4Q76HUBelAfJYSA0CuMIEaRP8wGIkGMA54bgQIMACAmkXJi0hKJQAAAABJRU5ErkJggg==”) 10px no-repeat; text-decoration: none }
h1 tt, h1 code { font-size: inherit }
h2 tt, h2 code { font-size: inherit }
h3 tt, h3 code { font-size: inherit }
h4 tt, h4 code { font-size: inherit }
h5 tt, h5 code { font-size: inherit }
h6 tt, h6 code { font-size: inherit }
h1 { font-size: 28px; color: rgba(0, 0, 0, 1) }
h2 { font-size: 24px; border-bottom: 1px solid rgba(204, 204, 204, 1); color: rgba(0, 0, 0, 1) }
h3 { font-size: 18px }
h4 { font-size: 16px }
h5 { font-size: 14px }
h6 { color: rgba(119, 119, 119, 1); font-size: 14px }
p, blockquote, ul, ol, dl, li, table, pre { margin: 15px 0 }
hr { background: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OENDRjNBN0E2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OENDRjNBN0I2NTZBMTFFMEI3QjRBODM4NzJDMjlGNDgiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4Q0NGM0E3ODY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4Q0NGM0E3OTY1NkExMUUwQjdCNEE4Mzg3MkMyOUY0OCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqqezsUAAAAfSURBVHjaYmRABcYwBiM2QSA4y4hNEKYDQxAEAAIMAHNGAzhkPOlYAAAAAElFTkSuQmCC”) left top repeat-x rgba(0, 0, 0, 0); border: 0 none; color: rgba(204, 204, 204, 1); height: 4px; padding: 0 }
body>h2:first-child { margin-top: 0; padding-top: 0 }
body>h1:first-child { margin-top: 0; padding-top: 0 }
body>h1:first-child+h2 { margin-top: 0; padding-top: 0 }
body>h3:first-child, body>h4:first-child, body>h5:first-child, body>h6:first-child { margin-top: 0; padding-top: 0 }
a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { margin-top: 0; padding-top: 0 }
h1 p, h2 p, h3 p, h4 p, h5 p, h6 p { margin-top: 0 }
li p.first { display: inline-block }
li { margin: 0 }
ul, ol { padding-left: 30px }
ul :first-child, ol :first-child { margin-top: 0 }
dl { padding: 0 }
dl dt { font-size: 14px; font-weight: bold; font-style: italic; padding: 0; margin: 15px 0 5px }
dl dt:first-child { padding: 0 }
dl dt>:first-child { margin-top: 0 }
dl dt>:last-child { margin-bottom: 0 }
dl dd { margin: 0 0 15px; padding: 0 15px }
dl dd>:first-child { margin-top: 0 }
dl dd>:last-child { margin-bottom: 0 }
blockquote { border-left: 4px solid rgba(221, 221, 221, 1); padding: 0 15px; color: rgba(119, 119, 119, 1) }
blockquote>:first-child { margin-top: 0 }
blockquote>:last-child { margin-bottom: 0 }
table { padding: 0; border-collapse: collapse }
table tr { border-top: 1px solid rgba(204, 204, 204, 1); background-color: rgba(255, 255, 255, 1); margin: 0; padding: 0 }
table tr:nth-child(2n) { background-color: rgba(248, 248, 248, 1) }
table tr th { font-weight: bold; border: 1px solid rgba(204, 204, 204, 1); margin: 0; padding: 6px 13px }
table tr td { border: 1px solid rgba(204, 204, 204, 1); margin: 0; padding: 6px 13px }
table tr th :first-child, table tr td :first-child { margin-top: 0 }
table tr th :last-child, table tr td :last-child { margin-bottom: 0 }
img { max-width: 100% }
span.frame { display: block; overflow: hidden }
span.frame>span { border: 1px solid rgba(221, 221, 221, 1); display: block; float: left; overflow: hidden; margin: 13px 0 0; padding: 7px; width: auto }
span.frame span img { display: block; float: left }
span.frame span span { clear: both; color: rgba(51, 51, 51, 1); display: block; padding: 5px 0 0 }
span.align-center { display: block; overflow: hidden; clear: both }
span.align-center>span { display: block; overflow: hidden; margin: 13px auto 0; text-align: center }
span.align-center span img { margin: 0 auto; text-align: center }
span.align-right { display: block; overflow: hidden; clear: both }
span.align-right>span { display: block; overflow: hidden; margin: 13px 0 0; text-align: right }
span.align-right span img { margin: 0; text-align: right }
span.float-left { display: block; margin-right: 13px; overflow: hidden; float: left }
span.float-left span { margin: 13px 0 0 }
span.float-right { display: block; margin-left: 13px; overflow: hidden; float: right }
span.float-right>span { display: block; overflow: hidden; margin: 13px auto 0; text-align: right }
code, tt { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid rgba(234, 234, 234, 1); background-color: rgba(248, 248, 248, 1); border-radius: 3px }
pre code { margin: 0; padding: 0; white-space: pre; border: none; background: rgba(0, 0, 0, 0) }
.highlight pre { background-color: rgba(248, 248, 248, 1); border: 1px solid rgba(204, 204, 204, 1); font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px }
pre { background-color: rgba(248, 248, 248, 1); border: 1px solid rgba(204, 204, 204, 1); font-size: 13px; line-height: 19px; overflow: auto; padding: 6px 10px; border-radius: 3px }
pre code, pre tt { background-color: rgba(0, 0, 0, 0); border: none }
sup { font-size: 0.83em; vertical-align: super; line-height: 0 }
* { -webkit-print-color-adjust: exact }
@media screen and (min-width: 914px) { body { width: 854px; margin: 0 auto } }
@media print { table, pre { page-break-inside: avoid } pre { word-wrap: break-word } }

10-简单圆形图片裁剪

裁剪图片思路.
开启一个图片上下文.
上下文的大小和原始图片保持一样.以免图片被拉伸缩放.
在上下文的上面添加一个圆形裁剪区域.圆形裁剪区域的半径大小和图片的宽度一样大.
把要裁剪的图片绘制到图片上下文当中.
从上下文当中取出图片.
关闭上下文.

1.如何设置圆形路径?
     UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:
                        CGRectMake(0, 0, image.size.width, image.size.width)];


2.如何把一个路径设为裁剪区域?
    [path addClip];

代码实现:

#import "ViewController.h"

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *imagView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 1.添加要裁剪的图片
    UIImage *image = [UIImage imageNamed:@"girl"];
    //2.开启位图上下文(跟图片相同大小的上下文)
    UIGraphicsBeginImageContextWithOptions(image.size, NO, 0);
    //3.设置裁剪区域
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
    //把路径设置成裁剪区域
    [path addClip];
    //4.把图片绘制到上下文当中.
    [image drawAtPoint:CGPointZero];
    //5.从上下文当中生成一张图片
     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //6.关闭位图
    UIGraphicsEndImageContext();
    //显示裁剪之后的图片
    self.imagView.image = newImage;

}


@end

实现效果: