码迷,mamicode.com
首页 > 其他好文 > 详细

Coretext实现富文本图文混排及Gif图片播放

时间:2016-08-23 16:28:24      阅读:756      评论:0      收藏:0      [点我收藏+]

标签:

CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果。

CoreText中的几个重要的概念: 

  1. CTFont
  2. CTFontCollection
  3. CTFontDescriptor
  4. CTFrame
  5. CTFramesetter
  6. CTGlyphInfo
  7. CTLine
  8. CTParagraphStyle
  9. CTRun
  10. CTTextTab
  11. CTTypesetter

先来了解一下该框架的整体视窗组合图:

技术分享

 

CTFrame 作为一个整体的画布(Canvas),其中由行(CTLine)组成,而每行可以分为一个或多个小方块(CTRun)。

注意:你不需要自己创建CTRun,Core Text将根据NSAttributedString的属性来自动创建CTRun。每个CTRun对象对应不同的属性,正因此,你可以自由的控制字体、颜色、字间距等等信息。

此外还有一点需要注意:一个CTRun是不能跨行的,若是一段文字拥有相同的属性,且跨行,则会被分在多个CTRun当中,每个CTRun拥有相同属性。

 

首先来看看使用Coretext的基本步骤:

 

第一步:

要有一个NSMutableAttributedString,用一个字符串来初始化NSMutableAttributedString。

NSMutableAttributedString  * _mString = [[NSMutableAttributedString alloc] initWithString:_text];

 

第二步:对NSMutableAttributedString进行属性设置。

   [_mString beginEditing];

        [_mString addAttributes:textAttribute.attributeDic range:attr.range];

        [_mString addAttribute:@"MTText" value:attr.text range:attr.range];

        [_mString endEditing];

在这里有两种方式,一个是设置单个属性,一个是直接批量设置属性。属性的key值可以是自己定义的。

以下是一些常见的属性设置

      1.设置字体属性 

CTFontRef font = CTFontCreateWithName(CFSTR("Georgia"), 40, NULL);  
 [_mString addAttribute:(id)kCTFontAttributeName value:(id)font range:NSMakeRange(0, 4)]; 

 

   2.设置斜体字    

CTFontRef font = CTFontCreateWithName((CFStringRef)[UIFont italicSystemFontOfSize:20].fontName, 14, NULL);  
 [_mString addAttribute:(id)kCTFontAttributeName value:(id)font range:NSMakeRange(0, 4)];  

 

  3.设置连字

long number = 1;  
CFNumberRef num = CFNumberCreate(kCFAllocatorDefault,kCFNumberSInt8Type,&number);  
[mabstring addAttribute:(id)kCTLigatureAttributeName value:(id)num range:NSMakeRange(0, [str length])];  

   

  4.设置下划线

[_mString addAttribute:(id)kCTUnderlineStyleAttributeName value:(id)[NSNumber numberWithInt:kCTUnderlineStyleDouble] range:NSMakeRange(0, 4)];   

  

  5.设置下划线颜色

[_mString addAttribute:(id)kCTUnderlineColorAttributeName value:(id)[UIColor redColor].CGColor range:NSMakeRange(0, 4)];

  

  6.设置字体间隔

long number = 10;  
CFNumberRef num = CFNumberCreate(kCFAllocatorDefault,kCFNumberSInt8Type,&number);  
[_mString addAttribute:(id)kCTKernAttributeName value:(id)num range:NSMakeRange(10, 4)];  

 

最后是画出对应的图像了

  

    CGContextRef context = UIGraphicsGetCurrentContext();

     CGContextTranslateCTM(context , 0 ,self.bounds.size.height);

     CGContextScaleCTM(context, 1.0, -1.0);

  CTFramesetterRef frameSetter = CTFramesetterCreateWithAttributedString(
                                                    (CFAttributedStringRef) _mString);
    
    CGMutablePathRef path = CGPathCreateMutable();
    CGRect rects = CGRectMake(0 , 0 ,self.bounds.size.width , self.bounds.size.height);
    CGPathAddRect(path,
                  NULL ,
                  rects);
    
    CTFrameRef frame = CTFramesetterCreateFrame(frameSetter,
                                                   CFRangeMake(0, 0),
                                                   path,
                                                   NULL);
    _frameRef = frame;

    CTFrameDraw(frame,context);
    
    CGPathRelease(path);
    CFRelease(frameSetter);

 

这里有几点比较需要注意:

  1.坐标转换问题。在使用CGcontext进行绘制时坐标轴圆点在屏幕左下方,而UIKit得坐标系圆点在左上方,需要对此进行转换。此外,在后面的操作中也要用到坐标变换。

  2.文字的绘画区域不是整个context,而是在CTFrameRef中,后面我们还会碰到相关的问题。

CTFrameRef frame = CTFramesetterCreateFrame(frameSetter,
                                                   CFRangeMake(0, 0),
                                                   path,
                                                   NULL);

 

 

现在我们已经能设置文字的基本属性了,但富文本中还有比较重要的一个应用:图文混排

 

我们先来说说实现图文混排的基本思路。

coretext是直接绘制在layer层上的,我们可以在drawRect 方法中直接画一张图片,只要将图片放在适合的位置,就实现了图文混排。

现在的关键是如何计算出图片所在的位置,此外,当图片添加的时候,文字的排版要如何调整问题。

 

为了能插入图片,首先我们要设置一个占位符,正常设置为空格符,因为图片如果没有完全覆盖那个区域,可能显示出占位符。当然你也可以任意设置一个字符并将其

的颜色设置为clearColor。设置占位符后我们要为它设置属性,

记住,要为它设置一个单独的属性,不能与相邻的字符属性一致,因为这样系统可能因此将他们合并在一个CTRun当中。

占位符最好只设置一个,如果占位符是多个的话,有可能占位符处于不同行,会被分成两个CTRun,此时图片就可能超出屏幕边界。

NSMutableAttributedString *replaceStr = [[NSMutableAttributedString alloc] initWithString:@"1"];

UIColor *color = [UIColor clearColor];

NSRange range = NSMakeRange(_mString.length - 1, 1);

[replaceStr addAttribute:(id)color.CGColor value:(id)kCTForegroundColorAttributeName range:range];

[_mString appendAttributedString:replaceStr];

 

设置完占位符基本属性后,我们需要设置占位符对应得CTRun的回调方法来设置CTRun的大小,以适应图片。 CTRunDelegateCallbacks imageCallBacks;

 imageCallBacks.version = kCTRunDelegateVersion1;
 imageCallBacks.dealloc = RunDelegateDeallocCallback;
 imageCallBacks.getAscent = RunDelegateGetAsent;
 imageCallBacks.getDescent = RunDelegateGetDescent;
 imageCallBacks.getWidth = RunDelegateGetWidthCallBack;
//传入的参数attr.text可以在回调方法中使用 CTRunDelegateRef runDelegate
= CTRunDelegateCreate(&imageCallBacks, (__bridge void *)(attr.text)); CTRunDelegateGetRefCon(runDelegate); [_mString addAttribute:(NSString *)kCTRunDelegateAttributeName value:(__bridge id)runDelegate range:attr.range]; [_mString addAttribute:@"imageName" value:attr.text range:attr.range]; CFRelease(runDelegate);



void
RunDelegateDeallocCallback{

}

CGFloat RunDelegateGetAsent(void *refCon) {


    NSString *imageName = (__bridge NSString *)(refCon);

    return [UIImage imageNamed:imageName].size.height;

}

CGFloat RunDelegateGetDescent(void *refCon) {   

  return 0;

}

CGFloat RunDelegateGetWidth(void *refCon) {

   NSString *imageName = (__bridge NSString *)(refCon);

    return [UIImage imageNamed:imageName].size.width;

}

 

 

在设置好属性还有回调方法之后,就可以开始绘制图片了。

基本的思路是获取文本的每一行,再获取每一个CTRun,根据属性来判断是否是绘制图片的点,是的话则获取绘画区域,绘制图片。

    CFArrayRef lines = CTFrameGetLines(_frameRef);
    CGPoint origins[CFArrayGetCount(lines)];
    CTFrameGetLineOrigins(_frameRef, CFRangeMake(0, 0), origins);
    
    NSMutableArray *attrArray = [[NSMutableArray alloc] init];
    for (int i = 0; i < CFArrayGetCount(lines); i ++) {
        
        CTLineRef line = CFArrayGetValueAtIndex(lines, i);
        
        CFArrayRef runs = CTLineGetGlyphRuns(line);
        
        for (int k = 0; k < CFArrayGetCount(runs); k ++) {
            
            CTRunRef run = CFArrayGetValueAtIndex(runs, k);
            NSDictionary *attri = (NSDictionary *)CTRunGetAttributes(run);
            NSString *imageName = [attri objectForKey:@"imageName"];
            
            if (imageName) {
                CGFloat runAsent;
                CGFloat runDescent;
                CGPoint origin = origins[i];
                CGRect runRect;
                
                runRect.size.width = CTRunGetTypographicBounds(run,
                                                               CFRangeMake(0, 0),
                                                               &runAsent,
                                                               &runDescent,
                                                               NULL);
                CGFloat offset = CTLineGetOffsetForStringIndex(line,
                                                               CTRunGetStringRange(run).location,
                                                               NULL);
                runRect = CGRectMake(origin.x + offset,
                                     origin.y - runDescent,
                                     runRect.size.width,
                                     runAsent + runDescent);
                

          UIImage *image = [UIImage imageNamed:imageName];

                  CGContextDrawImage(context, runRect, image.CGImage);


            }
        }
    }

 

 

这里有个需要注意的点,我们取到得位置是相对于整个画布,而不是相对于所在的View的位置

CTFrameRef frame = CTFramesetterCreateFrame(frameSetter,
                                                   CFRangeMake(0, 0),
                                                   path,
                                                   NULL);

因此,如果CTFrameref如果有不在原点,计算时需要加上这部分的偏移量。

 

点击事件和图片绘制差不多,获取点击的点,进行坐标变换

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
    UITouch *touch = touches.anyObject;
    CGPoint point = [touch locationInView:self];
  //坐标变换 CGPoint location
= CGPointMake(point.x, self.bounds.size.height - point.y); MTLabelAttribute *attr = [self getAttributeByLocation:location]; _lastAttr = attr; if (attr) { if ([self.delegate respondsToSelector:@selector(clickWithAttibute:andText:)]) { [self.delegate clickWithAttibute:attr andText:attr.text]; } [self setAttributeWithType:@"hightlight" andAttribute:attr]; } //判断point是否在点击的文字范围内 }

 

先判断在哪一行,然后判断点击的点在哪一个CTRun上。在这里要注意所要实现点击的字符串可能跨行的情况。

 

- (MTLabelAttribute *)getAttributeByLocation:(CGPoint) point{
    
    NSArray *lines = (NSArray *)CTFrameGetLines(_frameRef);
    
    CGPoint origins[lines.count];
    CTFrameGetLineOrigins(_frameRef, CFRangeMake(0, 0), origins);
    CTLineRef ref;
   
    int count = 0;
   
//判断所在的行
if (point.y < origins[lines.count - 1].y) { return nil; } for (int i = 1; i < lines.count ; i ++) { CGFloat minY = origins[i].y; CGFloat maxY = origins[i - 1].y; if (point.y >= minY && point.y <= maxY) { count = i ; break; } } ref = (__bridge CTLineRef)lines[count]; CGPoint origin = origins[count]; NSArray *ctRuns = (NSArray *)CTLineGetGlyphRuns(ref); //判断所在的CTRun for (int k = 0; k < ctRuns.count; k ++) { CTRunRef runTest = (__bridge CTRunRef)([ctRuns objectAtIndex:k]); CGFloat offset = CTLineGetOffsetForStringIndex((CTLineRef)lines[count], CTRunGetStringRange(runTest).location, NULL) + 0.0; CGPoint firstPoint = CGPointMake(origin.x + offset , origin.y); CGFloat ascent; CGFloat descent; CGFloat leading; CGFloat width = CTRunGetTypographicBounds(runTest, CFRangeMake(0, 0), &ascent, &descent, &leading); if ( point.x >= firstPoint.x &&point.x <= firstPoint.x + width &&point.y <= origin.y + ascent &&point.y >= origin.y ) { NSDictionary *dic = (NSDictionary *)CTRunGetAttributes(runTest); NSString *string = [dic objectForKey:@"MTText"]; CFRange cfRange = CTRunGetStringRange(runTest); if ([dic objectForKey:@"imageName"]) { return [self getAttributesWithRange:NSMakeRange(cfRange.location, cfRange.length)]; }
       //跨行情况处理 NSString
*subString = [self.text substringWithRange: NSMakeRange(cfRange.location, cfRange.length)]; NSRange range; NSRange subStringRange = [string rangeOfString:subString]; range = NSMakeRange(cfRange.location - subStringRange.location, string.length); return [self getAttributesWithRange:range]; } } return nil; }

 

 

最后,是Gif的显示

  gif是比较特殊的一种情况,处理起来也比较麻烦。对于gif有两种展示方式,一种是用一个专门的UIView来展示,然后用添加subView的方式使用。用这种方式可以使用

第三方的框架,使用UIWebView播放等,也可以自己写,下面是使用UIImageView的方式:详情可看http://www.cocoachina.com/bbs/read.php?tid=124430

UIImageView *gifImageView = [[UIImageView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    NSArray *gifArray = [NSArray arrayWithObjects:[UIImage imageNamed:@"1"],
                                                  [UIImage imageNamed:@"2"],
                                                  [UIImage imageNamed:@"3"],
                                                  [UIImage imageNamed:@"4"],
                                                  [UIImage imageNamed:@"5"],
                                                  [UIImage imageNamed:@"6"],
                                                  [UIImage imageNamed:@"7"],
                                                  [UIImage imageNamed:@"8"],
                                                  [UIImage imageNamed:@"9"],
                                                  [UIImage imageNamed:@"10"],
                                                  [UIImage imageNamed:@"11"],
                                                  [UIImage imageNamed:@"12"],
                                                  [UIImage imageNamed:@"13"],
                                                  [UIImage imageNamed:@"14"],
                                                  [UIImage imageNamed:@"15"],
                                                  [UIImage imageNamed:@"16"],
                                                  [UIImage imageNamed:@"17"],
                                                  [UIImage imageNamed:@"18"],
                                                  [UIImage imageNamed:@"19"],
                                                  [UIImage imageNamed:@"20"],
                                                  [UIImage imageNamed:@"21"],
                                                  [UIImage imageNamed:@"22"],nil];
    gifImageView.animationImages = gifArray; //动画图片数组
    gifImageView.animationDuration = 5; //执行一次完整动画所需的时长
    gifImageView.animationRepeatCount = 1;  //动画重复次数
    [gifImageView startAnimating];
    [self.view addSubview:gifImageView];
    [gifImageView release]; 

 

使用UIImageView的方式是固定的时间间隔,但gif并非每一帧的间隔都一样,因此有些情况可能达不到最好的播放效果。

在IOS7之后可以使用TextKit中的attachment,直接添加UIWebView播放Gif图片,YYTextKit中也有类似的实现。

 

如果我们要手动实现的话,那就只好一帧一帧的往屏幕上画了。我们首先来看看继承UIView的实现方式,记住不能继承自caLayer,虽然最后是在layer层绘画,

但直接继承calyer,然后用addsublayer方法显示,图像会有重影,大概UIView中有对其进行处理。 

 

首先用一个类对Gif图片进行解析

@interface MTGifAttribute : NSObject

@property (nonatomic, strong, readonly) NSArray *imageFrames;
@property (nonatomic, strong, readonly) NSArray *properties;
@property (nonatomic, strong, readonly) NSArray *delayTimes;

@property (nonatomic, assign, readwrite) UIView<MTGifProtocol> * delegate;
@property (nonatomic, assign, readwrite) CGRect frame;
//@property (nonatomic, copy) NSString *path;
@property (nonatomic, assign, readonly) NSInteger index;

- (void)setImageInfoWithFilePath:(NSString *)path;
- (void)startAnitation;

@end

 

解析方法

@implementation MTGifAttribute

- (instancetype)init{
    
    self = [super init];
    if (self) {
        _index = 0;
    }
    return self;
}

- (void)setImageInfoWithFilePath:(NSString *)path {
    
    NSMutableArray *imageFrames = [[NSMutableArray alloc] init];
    NSMutableArray *delayTimes = [[NSMutableArray alloc] init];
    
    NSURL *filrUrl = [NSURL fileURLWithPath:path];
    CFURLRef cfUrl = (__bridge CFURLRef)filrUrl;
    
    CGImageSourceRef gifSource = CGImageSourceCreateWithURL(cfUrl, NULL);
    NSInteger count = CGImageSourceGetCount(gifSource);
    
    for (int i = 0; i < count; i++){
        CGImageRef frame = CGImageSourceCreateImageAtIndex(gifSource,
                                                           i,
                                                           NULL);
        
        [imageFrames addObject:(__bridge id)frame];
        CGImageRelease(frame);
        
        NSDictionary *dic = CFBridgingRelease(CGImageSourceCopyPropertiesAtIndex(gifSource,
                                                                                 i,
                                                                                 NULL));
        
        NSDictionary *gifDic =[dic valueForKey:(NSString *)kCGImagePropertyGIFDictionary];
        [delayTimes addObject:[gifDic objectForKey:(NSString *)kCGImagePropertyGIFDelayTime]];
        
    }
    
    NSDictionary *dic = CFBridgingRelease(CGImageSourceCopyPropertiesAtIndex(gifSource,
                                                                             0,
                                                                             NULL));
    
    CGFloat gifWidth = (CGFloat)[[dic valueForKey:(NSString*)kCGImagePropertyPixelWidth]
                                 floatValue];
    
    CGFloat gifHeight = (CGFloat)[[dic valueForKey:(NSString*)kCGImagePropertyPixelHeight]
                                  floatValue];
    
    _frame = CGRectMake(0, 0, gifWidth, gifHeight);
    _imageFrames = imageFrames;
    _delayTimes = delayTimes;
}

- (void)startAnitation {
    [self changeImage];
}


- (void)changeImage {
      
  //代理方法,调用setNeeddisplay
if ([self.delegate respondsToSelector:@selector(disPlayInRect:)]) { [self.delegate disPlayInRect:self.frame]; }else{ return; } _index ++; _index = _index % self.imageFrames.count; CGFloat delay = [[self.delayTimes objectAtIndex:_index] floatValue]; dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(delay * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{ [self changeImage]; }); }


 

图片索引切换方法

- (void)startAnitation {
    [self changeImage];
}


- (void)changeImage {
    
    if ([self.delegate respondsToSelector:@selector(disPlayInRect:)]) {
        [self.delegate disPlayInRect:self.frame];
    }else{
    
        return;
    }

    _index ++;
    _index = _index % self.imageFrames.count;
    CGFloat delay = [[self.delayTimes objectAtIndex:_index] floatValue];
    
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW,
                       (int64_t)(delay * NSEC_PER_SEC)),
                       dispatch_get_main_queue(), ^{
    
                           [self changeImage];
    
                       });
}

 

继承UIView,重写drawRect方法。

 

- (void)drawRect:(CGRect)rect{
    
    
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    CGContextTranslateCTM(ctx , 0 ,self.frame.size.height);
    CGContextScaleCTM(ctx, 1.0, -1.0); 
    
    UIImage *image = [_gifImage.imageFrames objectAtIndex:_index];
    CGImageRef cgimage = image.CGImage;
    UIGraphicsBeginImageContext(CGSizeMake(self.frame.size.width, self.frame.size.height));
    CGContextDrawImage(ctx, _gifImage.frame, cgimage);
    

}

 

至此Gif的显示已经完成,但有些时候我们不想单独用一个view来显示。而是想用coretext图文混排的方式来显示,将gif和文字显示在同一个view。

 此时的方式和用一个单独的view显示一样,只是绘画的对象不同而已。

比较需要注意的一个点是,在每次重绘的时候,因为gif不断地重绘,如果每次都刷新整个View的话有可能会造成性能问题。因此可以使用

[self setNeedsDisplayInRect:rect];方法,只刷新gif所在区域。

当然,在这种情况下也要万分注意左边变换问题,如果刷新的区域,与变换坐标后的绘画区域不对应,图片会消失或者只显示部分。

 

Coretext实现富文本图文混排及Gif图片播放

标签:

原文地址:http://www.cnblogs.com/bigly/p/5796684.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!