十六 iOS之 酷炫弹幕（二）

这次基于上一次的demo做更复杂点的功能，原理是 通过加载我自己准备的plist文件里的数据，生成一张张图文混排的图片，让它们从屏幕上飘过，就达到了弹幕效果

---

效果图：每次点击屏幕就飘出一条弹幕

一 主要添加了一个plist文件，和一个模型类 DGDanMuModel

• DGDanMuModel.h

#import <UIKit/UIKit.h>//弹幕类型枚举， 0就是其他人，1就是自己typedef enum {    DGDanMuTypeOther,    DGDanMuTypeMe,} DGDanMuType;@interface DGDanMuModel : NSObject/**弹幕类型*/@property(nonatomic,assign)DGDanMuType type;/**用户名*/@property(nonatomic,copy)NSString * username;/**文本内容*/@property(nonatomic,copy)NSString * text;/**头像*/@property(nonatomic,strong)UIImage * icon;/**表情图片名数组*/@property(nonatomic,strong)NSArray<NSString*> * emotions;/** 字典转模型方法*/+(instancetype)danMuWithDict:(NSDictionary*)dict;@end

• DGDanMuModel.m

#import "DGDanMuModel.h"@implementation DGDanMuModel/** 字典转模型方法 @param dict 要转的字典 @return 模型对象 */+(instancetype)danMuWithDict:(NSDictionary*)dict{    id obj = [[self alloc]init];    [obj setValuesForKeysWithDictionary:dict];    return obj;}@end

二 在DGDanMuView中增加了一个绘制弹幕的方法

如下图，分成四部分去绘制这个图：头像、名称、文本、表情，相应部分的位置大小都参照这个图去计算

• 这个方法的核心代码

/** 根据弹幕模型生成弹幕图片 */-(DGImage*)imageWithDanMu:(DGDanMuModel*)danMu{    //绘制文字使用的字体    UIFont * font = [UIFont systemFontOfSize:13];    //间距    CGFloat marginX = 5;    //头像的尺寸    CGFloat iconH = 30;    CGFloat iconW = iconH;    //表情图片的尺寸    CGFloat emotioW = 25;    CGFloat emotionH = emotioW;    //计算用户名占据的实际区域    CGSize nameSize =  [danMu.username boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;    //用户名字体高度    CGFloat nameFontH = nameSize.height;    //计算内容占据的实际区域    CGSize textSize =  [danMu.text boundingRectWithSize:CGSizeMake(MAXFLOAT, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;    //内容字体高度    CGFloat textFontH = textSize.height;    //位图上下文的尺寸    CGFloat contextH = iconH;    //位图上下文的宽度 = 头像的宽度 + 1个间距 + 1个间距 + 用户名的宽度 + 1个间距 + 内容的宽度 + 表情的宽度 * 个数 + 1个间距    CGFloat contextW = iconW + marginX * 2 + nameSize.width + marginX + textSize.width + marginX + danMu.emotions.count * emotioW;    CGSize contextSize = CGSizeMake(contextW, contextH);    //开启位图上下文    UIGraphicsBeginImageContextWithOptions(contextSize, NO, 0);    //获得位图上下文    CGContextRef ctx = UIGraphicsGetCurrentContext();    //将上下文保存一份到栈中，因为绘制头像时会裁剪点一部分上下文    CGContextSaveGState(ctx);    //--------------绘制头像-------------//    //设置头像尺寸    CGRect iconFrame = CGRectMake(0, 0, iconW, iconH);    //绘制头像圆形    CGContextAddEllipseInRect(ctx, iconFrame);    //超出圆形范围内的内容裁减掉    CGContextClip(ctx);    UIImage * icon = danMu.type ? [UIImage imageNamed:@"me"] : [UIImage imageNamed:@"other"];    //绘制头像    [icon drawInRect:iconFrame];    //------------- 绘制背景图片----------------//    //将上下文出栈    CGContextRestoreGState(ctx);    //绘制背景图片    CGFloat bgX = iconW + marginX;    CGFloat bgY = 0;    CGFloat bgW = contextW - bgX;    CGFloat bgH = contextH;    danMu.type ? [[UIColor orangeColor] set] : [[UIColor whiteColor] set];    [[UIBezierPath bezierPathWithRoundedRect:CGRectMake(bgX, bgY, bgW, bgH) cornerRadius:20] fill];    //-----------------绘制用户名---------------//    CGFloat nameX = bgX + marginX;    CGFloat nameY = (contextH - nameFontH) * 0.5;    CGRect nameRect = CGRectMake(nameX, nameY, nameSize.width, nameSize.height);    [danMu.username drawInRect:nameRect withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName : danMu.type ? [UIColor blackColor] : [UIColor orangeColor]}];    //----------------绘制文本区域 --------------------//    CGFloat textX = nameX + nameSize.width + marginX;    CGFloat textY = (contextH - textFontH) * 0.5;    CGRect textRect = CGRectMake(textX, textY, textSize.width, textSize.height);    [danMu.text drawInRect:textRect withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName : danMu.type ? [UIColor whiteColor] : [UIColor blackColor]}];    //----------------绘制表情图片 --------------------//   __block CGFloat emotionX = textX + textSize.width;    CGFloat emotionY = (contextH - emotionH) * 0.5;    [danMu.emotions enumerateObjectsUsingBlock:^(NSString * _Nonnull emotionName, NSUInteger idx, BOOL * _Nonnull stop) {        //加载表情图片        UIImage * emotion = [UIImage imageNamed:emotionName];        [emotion drawInRect:CGRectMake(emotionX, emotionY, emotioW, emotionH)];        emotionX += emotioW;    }];    //从位图上下文获得绘制好的图片    UIImage * image = UIGraphicsGetImageFromCurrentImageContext();    //根据屏幕比例返回这张图片    return [[DGImage alloc]initWithCGImage:image.CGImage scale:[UIScreen mainScreen].scale orientation:UIImageOrientationUp];}

github demo: BarragePerfectDemo