IOS定制属于自己的个性头像

本文实例介绍了IOS定制属于自己的个性头像的方法，分享给大家供大家参考，具体内容如下

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

二、实现思路
1、效果图中主要由不同尺寸的两大部分组成

  • 蓝色的背景区域，尺寸等于图片的尺寸加上边框的尺寸
  • 图片区域，尺寸等于图片的尺寸

2、绘制一个圆形背景区域，用边框颜色填充
3、绘制一个圆形的图片区域，设置不显示超出的部分
三、实现步骤
1、加载需要显示的图片

UIImage *image = [UIImage imageNamed:@"资源中图片的名字"];

2、初始化用到的变量

//图片的宽宽高
CGFloat imageWH = image.size.width;
//边界的宽度
CGFloat border = 1;
//背景区域的宽高
CGFloat ovalWH = imageWH + 2 * border;

3、开启图形上下文（尺寸为背景区域的尺寸）

//设置图形上下文的尺寸
CGSize size = CGSizeMake(ovalWH, ovalWH);
//开启图形上下文
UIGraphicsBeginImageContextWithOptions(size, NO, 0);

4、绘制背景区域

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

5、绘制图片区域

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

6、从图形上下文中取出绘制的图片

UIImage *clipImage = UIGraphicsGetImageFromCurrentImageContext();

7、将图片显示到imageView上

self.imageView.image = clipImage;

8、关闭图形上下文

UIGraphicsEndImageContext();

以上就是本文的全部内容，希望对大家的学习有所帮助。

赞 (0)

相关推荐

  • IOS中一段文字设置多种字体颜色代码

    给定range和需要设置的颜色,就可以给一段文字设置多种不同的字体颜色,使用方法如下: 复制代码 代码如下: [self fuwenbenLabel:contentLabel FontNumber:[UIFont systemFontOfSize:15] AndRange:NSMakeRange(6, 1) AndColor:RGBACOLOR(34, 150, 253, 1)]; 复制代码 代码如下: //设置不同字体颜色 -(void)fuwenbenLabel:(UILabel *)lab

  • iOS应用中UILabel文字显示效果的常用设置总结

    创建UIlabel对象 复制代码 代码如下: UILabel* label = [[UILabel alloc] initWithFrame:self.view.bounds]; 设置显示文本 复制代码 代码如下: label.text = @"This is a UILabel Demo,"; 设置文本字体 复制代码 代码如下: label.font = [UIFont fontWithName:@"Arial" size:35]; 设置文本颜色 复制代码 代码如

  • iOS实现文字转化成彩色文字图片

    iOS实现文字转化成彩色文字图片

    本文写了个将文字转化为多彩图片的功能,输入文字将文字转化为彩色的文字图片,可选择不同的字体,渐变,先看看效果. 实现主要用CAGradientLayer渐变,先看看上部展示实现代码: -(void)setupContentView { UIView *contentView = [[UIView alloc] initWithFrame:CGRectMake(0, 44, ScreenWidth, ScreenHight - 44 -300)]; [self.view addSubview:co

  • iOS如何裁剪圆形头像

    iOS如何裁剪圆形头像

    本文实例为大家介绍了iOS裁剪圆形头像的详细代码,供大家参考,具体内容如下 - (void)viewDidLoad { [super viewDidLoad]; //加载图片 UIImage *image = [UIImage imageNamed:@"菲哥"]; //获取图片尺寸 CGSize size = image.size; //开启位图上下文 UIGraphicsBeginImageContextWithOptions(size, NO, 0); //创建圆形路径 UIBez

  • iOS实现带文字的圆形头像效果

    iOS实现带文字的圆形头像效果

    下面就来实现一下这种效果   圆形头像的绘制 先来看一下效果图 分析一下: 1.首先是需要画带有背景色的圆形头像 2.然后是需要画文字 3.文字是截取的字符串的一部分 4.不同的字符串,圆形的背景色是不一样的 5.对于中英文同样处理,英文的一个字符和中文的一个汉字同样算作一个字符 6.文字总是居中显示 好 有了这样几点 我们就可以开始画图了 看一下最终实现的效果图 首先 ,我们需要自定义一个view当做自定义头像,在view的drawRect方法中进行图像的绘制 @interface Round

  • iOS实现百度外卖头像波浪的效果

    iOS实现百度外卖头像波浪的效果

    效果演示 百度外卖 波浪效果图: 你需要知道的 CADisplayLink 简单的说就是一定时器,其根本利用刷帧和屏幕频率一样来重绘渲染页面. 其创建方式: CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)]; [timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes]; C

  • iOS应用开发中的文字选中操作控件UITextView用法讲解

    iOS应用开发中的文字选中操作控件UITextView用法讲解

    1.创建并初始化 创建UITextView的文件,并在.h文件中写入如下代码: 复制代码 代码如下: #import <UIKit/UIKit.h>        @interface TextViewController : UIViewController <UITextViewDelegate>    {                  UITextView *textView;    }        @property (nonatomic, retain) UITex

  • iOS开发中Quartz2D控制圆形缩放和实现刷帧效果

    iOS开发中Quartz2D控制圆形缩放和实现刷帧效果

    Quartz2D简要回顾 一.什么是Quartz2D Quartz 2D是⼀个二维绘图引擎,同时支持iOS和Mac系统 Quartz 2D能完成的工作: 绘制图形 : 线条\三角形\矩形\圆\弧等 绘制文字 绘制\生成图片(图像) 读取\生成PDF 截图\裁剪图片 自定义UI控件 二.Quartz2D在iOS开发中的价值 为了便于搭建美观的UI界面,iOS提供了UIKit框架,⾥⾯有各种各样的UI控件 UILabel:显⽰文字 UIImageView:显示图片 UIButton:同时显示图片和⽂

  • IOS使用progssview仿滴滴打车圆形计时

    IOS使用progssview仿滴滴打车圆形计时

    实现类似在微信中使用的滴滴打车的progressview,实现效果如图 // // CCProgressView.h // HurricaneConsumer // // Created by wangcong on 15-3-25. // Copyright (c) 2015年 WangCong. All rights reserved. // #import <UIKit/UIKit.h> #import <QuartzCore/QuartzCore.h> /** * 动画开始

  • IOS实现圆形图片效果的两种方法

    IOS实现圆形图片效果的两种方法

    先来看看效果图 ↓ 这个显示效果的做法有很多: 方法一: 使用两张图片, 作为边框的背景图片和中间的图片,然后使用imageView的cornerRadius来做圆, 具体代码如下: backImageView.layer.cornerRadius = backImageView.frame.size.width / 2; backImageView.layer.masksToBounds = YES; frontImageView.layer.cornerRadius = frontImage

随机推荐