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

下面就来实现一下这种效果   圆形头像的绘制

先来看一下效果图

分析一下：

      1、首先是需要画带有背景色的圆形头像

      2、然后是需要画文字

      3、文字是截取的字符串的一部分

      4、不同的字符串，圆形的背景色是不一样的

      5、对于中英文同样处理，英文的一个字符和中文的一个汉字同样算作一个字符

      6、文字总是居中显示

好 有了这样几点 我们就可以开始画图了

看一下最终实现的效果图

首先 ，我们需要自定义一个view当做自定义头像，在view的drawRect方法中进行图像的绘制

@interface RoundHeadView()
@property (nonatomic, copy) NSString *title;//需要绘制的标题
@property (nonatomic, assign) CGFloat colorPoint;//用户后面计算颜色的随机值
//设置文字
- (void)setTitle:(NSString *)title;
@end
@implementation RoundHeadView
-(instancetype)initWithFrame:(CGRect)frame{
  self = [super initWithFrame:frame];
  if (self) {
    self.backgroundColor = [UIColor clearColor];
  }
  return self;
}
@end

-(void)drawRect:(CGRect)rect{
  
  //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画
   CGContextRef context = UIGraphicsGetCurrentContext();
   [self caculateColor];//计算颜色
  
  /*画圆*/
   CGContextSetRGBFillColor (context,_colorPoint, 0.5, 0.5, 1.0);//设置填充颜色 颜色这里随机设置的，后面会根据文字来计算颜色
  
  //填充圆，无边框
  CGContextAddArc(context, self.frame.size.width/2.0, self.frame.size.width/2.0, self.frame.size.width/2.0, 0, 2*M_PI, 0); //添加一个圆
  CGContextDrawPath(context, kCGPathFill);//绘制填充
  }

- (void)setTitle:(NSString *)title{
  _title = [[self subStringWithLendth:2 string:title] copy];
  [self setNeedsDisplay];//调用这个方法 进行重新绘制 view会重新调用drawRect方法
}								 
 1/3    1 2 3 下一页 尾页