效果图


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

实现思路


  • 效果图中主要由不同尺寸的两大部分组成

    • 蓝色的背景区域,尺寸等于图片的尺寸加上边框的尺寸
    • 图片区域,尺寸等于图片的尺寸
  • 绘制一个圆形背景区域,用边框颜色填充
  • 绘制一个圆形的图片区域,设置不显示超出的部分

实现步骤


  • 加载需要显示的图片

    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();

iOSQuartz2D-03-定制个性头像的更多相关文章

  1. iOS开发——定制圆形头像与照相机图库的使用

    如今的App都很流行圆形的头像,比方QQ右上角的头像,今日头条的头像等等.这已经成为App设计的趋势了.今天我们就来简单实现一下这个功能,我还会把从手机拍照中或者图库中取出作为头像的照片存储到应用程序 ...

  2. OC - 10.使用Quartz2D绘制个性头像

      效果图 将一张图片剪切成圆形 在图片周围显示指定宽度和颜色的边框 实现思路 效果图中主要由不同尺寸的两大部分组成 蓝色的背景区域,尺寸等于图片的尺寸加上边框的尺寸 图片区域,尺寸等于图片的尺寸 绘 ...

  3. 10分钟教你用Python玩转微信之抓取好友个性签名制作词云

    01 前言+展示 各位小伙伴我又来啦.今天带大家玩点好玩的东西,用Python抓取我们的微信好友个性签名,然后制作词云.怎样,有趣吧~好了,下面开始干活.我知道你们还是想先看看效果的. 后台登录: 词 ...

  4. 简述电动汽车的发展前景及3D个性化定制需求

    李彦宏前几天又搞事,他宣布百度要开始造电动汽车了!百度市值更是因此一夜暴涨了700亿. 这熟悉的配方,好像在乔布斯.库克那里也见过. 苹果的"iCar"(或者是Apple Car) ...

  5. gravatar配置和使用【让你的网站使用全球通用头像】

    前言 我们在很多博客或者网站留言,评论的时候会看到有的人头像很酷很个性化,但是这个博客和网站本身并没有提供设置头像的功能,感觉有点神奇,那么是怎么做到的呢?其实这是使用了Gravatar. Grava ...

  6. QQ 腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件

    QQ 编辑 腾讯QQ(简称“QQ”)是腾讯公司开发的一款基于Internet的即时通信(IM)软件.腾讯QQ支持在线聊天.视频通话.点对点断点续传文件.共享文件.网络硬盘.自定义面板.QQ邮箱等多种功 ...

  7. MSYS2——Windows平台下模拟linux环境的搭建

    最近从MSYS1.0迁移到了MSYS2.0,简单讲,MSYS2.0功能更强大,其环境模拟更加符合linux.虽然本身来自cygwin,但其集成了pacman软件管理工具,很有linux范,并且可以直接 ...

  8. 3D打印:三维智能数字化创造(全彩)

    3D打印:三维智能数字化创造(全彩)(全球第一本系统阐述3D打印与3D智能数字化的专业著作) 吴怀宇 编   ISBN 978-7-121-22063-0 2014年1月出版 定价:99.00元 42 ...

  9. GIM企业即时通讯

    GIM企业即时通讯是笔者Garfield(QQ:3674571)采用.NetFramework4.0+SQL2008R2开发的一套企业内网/外网 通用的即时通讯(IM)软件,分为服务器端和客户端,通讯 ...

随机推荐

  1. 后端码农谈前端(CSS篇)第二课:CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  2. 斐波那契堆(三)之 Java的实现

    概要 前面分别通过C和C++实现了斐波那契堆,本章给出斐波那契堆的Java版本.还是那句老话,三种实现的原理一样,择其一了解即可. 目录1. 斐波那契堆的介绍2. 斐波那契堆的基本操作3. 斐波那契堆 ...

  3. Tips9: Destroy( )函数中的 延迟摧毁 功能

    你知道Object.Destroy()函数吗?在脚本中用来摧毁一个游戏物体或组件,可是你知道他能在执行后延迟一段时间后才摧毁物体吗,其实很简单: using UnityEngine; public c ...

  4. 转载--CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡

    源地址:http://www.cnblogs.com/mchina/archive/2012/08/27/2644391.html 一.简介 VS/NAT原理图: 二.系统环境 实验拓扑: 系统平台: ...

  5. 使用 IntelliJ IDEA 2016和Maven创建Java Web项目的详细步骤及相关问题解决办法

    Maven简介 相对于传统的项目,Maven 下管理和构建的项目真的非常好用和简单,所以这里也强调下,尽量使用此类工具进行项目构建, 它可以管理项目的整个生命周期. 可以通过其命令做所有相关的工作,其 ...

  6. 充实你的素材库!10款免费的 PSD 素材下载

    由于网页设计师没有时间来自己从零开始设计,所以在设计项目中使用网络上已有的设计素材是常见的方式.这就是为什么我们经常会到网上搜索可以免费下载的素材. 今天,我们这里有几套不同的免费的 PSD 素材分享 ...

  7. 利用栈实现算术表达式求值(Java语言描述)

    利用栈实现算术表达式求值(Java语言描述) 算术表达式求值是栈的典型应用,自己写栈,实现Java栈算术表达式求值,涉及栈,编译原理方面的知识.声明:部分代码参考自茫茫大海的专栏. 链栈的实现: pa ...

  8. 在Kibana上格式化字段,更好的在dashboard上展示

    一.为什么要格式化? 接着之前的文章-利用 ELK系统分析Nginx日志并对数据进行可视化展示.下面是http访问的日志,里面有一个字段,bytes 传输的字节,如下图: 绿色框框内选中的就是本次请求 ...

  9. 转载:第三弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

    感谢朋友们的支持!这两天博卡君收到了很多支持和安慰,也认识了很多志同道合的朋友.目前微信公布的工具和代码都不是正式版,随时有可能调整,大家先体验和学习为主吧.最近这个教程搞得我也心力交瘁了,虽然苦逼, ...

  10. 数论 - 高精度Fibonacci数 --- UVa 10183 : How Many Fibs ?

    How many Fibs? Description Recall the definition of the Fibonacci numbers: f1 := 1 f2 := 2 fn := f n ...