效果图


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

实现思路


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

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

实现步骤


  • 加载需要显示的图片

    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. Communication - 02.Call U

    App层 从大拇哥Click CallButton开始手机便已明白,主人这是要打电话.当然,你可以选择直接拨号,也可以通过ContactList,或者从通话记录着手.这些都只是UI的设计不同而已,终归 ...

  2. Office Online简介

    一.什么是Office Online Office Online 将 Microsoft Office 体验扩展到了 Web 浏览器,这使您可以直接在存储文档的 SharePoint 网站上处理文档, ...

  3. Android 学习笔记之Volley开源框架解析(一)

    PS:看完了LGD的六场比赛...让人心酸... 学习内容: 1.Http请求的过程... 2.Volley的简单介绍...   1.Http请求...   这里只是简单的说一下Http请求的过程.. ...

  4. sitemesh学习笔记(3)

    前两篇博客浅谈了一下sitemesh3.0和2.4的区别和简单用法,今天我做了一个结合sturts2的sitemesh构架,由于strusts2只能用sitemesh2.x的版本,与3.0目前还不能兼 ...

  5. 拓扑图弹力布局呈现Flickr图片搜索结果

    十年前有值得分享的图片我都存在Flickr上,可惜yahoo收购了Flickr之后堕落​好多年,最近yahoo在梅姐带领下Flickr团队终于恢复了生机,个人免费存储空间扩充到了1T,界面用户体验也有 ...

  6. struts2基础——标签

    一.通用标签 1.s:property (读取值栈中对象的属性值) 属性:value:指定OGNL表达式:default:OGNL表达式返回为 null 时,使用默认值:escape:是否对 HTML ...

  7. PHP--正则表达式和样式匹配--小记

    正则表达式: Regular expression PHP 支持两种风格的函数: POSIX 风格的,有些低版本软件支持,目前高版本的有些已经废弃不用了,比如 zend studio 的较新版本. p ...

  8. LeetCode131:Palindrome Partitioning

    题目: Given a string s, partition s such that every substring of the partition is a palindrome. Return ...

  9. [moka同学笔记]yii2.0表单的使用

    1.创建model   /biaodan.php <?php /** * Created by PhpStorm. * User: moka同学 * Date: 2016/08/05 * Tim ...

  10. Mysql denied for user 'odbc@localhost' || denied for user 'root@localhost'

    1. Question Description: 1.1  mysql  version:  mysql-5.7.11-win64.zip 1.2  if you connect to the mys ...