看直播的童鞋们应该会经常看到满屏幕的滚动弹幕，看到密密麻麻的弹幕第一印象就是怎么样高效加载来避免卡顿，弹幕组成部分包含用户头像、用户昵称、弹幕的内容、表情等，本文介绍的实现原理就是把这几部分绘制成一张图片，然后通过定时器移动弹幕图片，当图片不在屏幕范围内即销毁。
先看下效果
下面我会详细介绍下实现原理
1 .获取弹幕数据来源，因为我是模拟生成弹幕，弹幕的数据存放在工程里的plist文件中
emotions存放这条弹幕的表情，type表示是否是自己发的，text表示弹幕内容，userName表示用户昵称。取出plist文件的数据并转换成model。
#pragma mark - 获取数据源
- (void)loadData{
// 获取plist全路径
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"barrage.plist" ofType:nil];
// 从指定的路径中加载数据
NSArray *array = [NSArray arrayWithContentsOfFile:filePath];
// 遍历数组
for (NSDictionary *dict in array) {
// 字典转模型
BAModle *barrageM = [BAModle barrageWithDict:dict];
[self.danMus addObject:barrageM];
}
}
2 .根据模型生成弹幕图片，通过点击屏幕生成模型，根据模型绘制图片。
#pragma mark - 触摸屏幕响应事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
// 获得一个随机整数
NSInteger index = arc4random_uniform((u_int32_t)self.danMus.count);
// 获得一个随机模型
BAModle *danMu = self.danMus[index];
// 根据模型生成图片
BAImage *image = [self.danMuview imageWithBarrage:danMu];
// 调整弹幕加载区域
image.x = self.view.bounds.size.width;
image.y = arc4random_uniform(self.danMuview.bounds.size.height - image.size.height);
// 把图片加到弹幕view上
[self.danMuview addImage:image];
}
下面是具体绘制弹幕图片过程，我先简单介绍下，首先在绘图之前要确定上下文的尺寸，相当于画板的大小，画板的长 = 头像的长 + 昵称的长 + 内容的长 + 表情的长 * 表情个数 + 间距。然后就是分别绘制背景图片，用户昵称，内容和表情，最后返回一张图片。
此处有两点需要注意：
1.由于头像是矩形，想显示成圆形，要先画一个圆，并设置超出圆形的部分要裁剪，再绘制头像。
2.由于上面设置超出圆形的部分要裁剪，那即将要绘制背景岂不是要被裁剪，所以在绘制圆形区域上一句执行了CGContextSaveGState(ctx)表示复制了一份画板（上下文）存到栈里，在绘制背景图片之前执行CGContextRestoreGState(ctx)，表示用之前保存的画板替换当前的，因为之前保存的画板没有设置超出圆形区域要裁剪的需求，当然替换当前的画板，会把当前画板上的绘图也copy过去。
