iOSQuartz2D-03-定制个性头像

效果图


  • 将一张图片剪切成圆形
  • 在图片周围显示指定宽度和颜色的边框

实现思路


  • 效果图中主要由不同尺寸的两大部分组成
    • 蓝色的背景区域,尺寸等于图片的尺寸加上边框的尺寸
    • 图片区域,尺寸等于图片的尺寸
  • 绘制一个圆形背景区域,用边框颜色填充
  • 绘制一个圆形的图片区域,设置不显示超出的部分

实现步骤


  • 加载需要显示的图片

    UIImage *image = [UIImage imageNamed:@"资源中图片的名字"];
    
  • 初始化用到的变量

    //图片的宽宽高
    CGFloat imageWH = image.size.width;
    //边界的宽度
    CGFloat border = 1;
    //背景区域的宽高
    CGFloat ovalWH = imageWH + 2 * border;
    
  • 开启图形上下文(尺寸为背景区域的尺寸

    //设置图形上下文的尺寸
    CGSize size = CGSizeMake(ovalWH, ovalWH);
    //开启图形上下文
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    
  • 绘制背景区域

    //绘制封闭的圆形路径
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, ovalWH, ovalWH)];
    //设置填充颜色
    [[UIColor blueColor] set];
    //渲染所绘制的区域
    [path fill];
    
  • 绘制图片区域

    //绘制封闭的圆形区域
    UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(border, border, imageWH, imageWH)];
    //设置超出区域的内容剪掉(不显示)
    [clipPath addClip];
    //见图片绘制到圆形区域内,从点(border, border)开始
    [image drawAtPoint:CGPointMake(border, border)];
    
  • 从图形上下文中取出绘制的图片

    UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();
    
  • 将图片显示到imageView上

    self.imageView.image = clipImage;
    
  • 关闭图形上下文

    UIGraphicsEndImageContext();
    
posted @ 2015-08-17 18:48  世俗孤岛  阅读(387)  评论(1编辑  收藏  举报