IOS CoreText系列四：图文混排之点击事件

最新推荐文章于 2021-06-10 16:03:28 发布
最新推荐文章于 2021-06-10 16:03:28 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： IOS开发 文章标签： IOS 图文混排 CoreText
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011154007/article/details/53224191
版权

主要思路：基于-(void)touchesBegan:(NSSet<UITouch *> )touches withEvent:(UIEvent )event这个方法拿到当前点击到的点，然后通过坐标判断这个点是否在某段文字上，如果在则触发对应事件。

1、首先需要执行touchesBegan这个方法来做相应的判断

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [self systemPointFromScreenPoint:[touch locationInView:self]];
    //判断点击的是图片还是文字
    if ([self checkIsClickOnImgWithPoint:location]) {
        return;
    }
    [self clickOnStringWithPoint:location];
}

2、点击的是图片做相应的处理，图片的位置我们在图文混排的时候会获取到，这边直接拿过来用，如果图片有很多张的话，需要搞个循环来做判断。 

#pragma mark 点击图片
- (BOOL)checkIsClickOnImgWithPoint:(CGPoint)location
{
    if ([self isFrame:_imgFrm containsPoint:location]) {
        NSLog(@"你点击到了图片");
        return YES;
    }
    return NO;
}

- (BOOL)isFrame:(CGRect)frame containsPoint:(CGPoint)point
{
    return CGRectContainsPoint(frame, point);
}
3、点击的是字符串，步骤如下： 

/*
 点击文字判断的大致步骤：
 1.根据Frame拿到所有Line
 2.计算每个Line中在全文的range
 3.计算每个字对应line原点的X值
 4.比对对应line的origin求得字对应起点坐标
 5.求得下一个字的横坐标和上一行的origin，结合起点坐标得出字的坐标范围
 6.屏幕坐标与drawRect坐标转换，判断是否在范围内
 */
#pragma mark 点击字符串
- (void)clickOnStringWithPoint:(CGPoint)point
{
    //获取所有CTLine
    NSArray *lines = (NSArray *)CTFrameGetLines(self.ctFrm);
    //初始化范围数组
    CFRange ranges[lines.count];
    //初始化原点数组
    CGPoint origins[lines.count];
    //获取所有CTLine的原点
    CTFrameGetLineOrigins(self.ctFrm, CFRangeMake(0, 0), origins);
    
    //获取每个CTLine中包含的富文本在整串富文本中的范围。将所有CTLine中字符串的范围保存下来放入数组中。
    for (int i = 0; i < lines.count; i ++) {
        CTLineRef line = (__bridge CTLineRef)(lines[i]);
        CFRange range = CTLineGetStringRange(line);
        ranges[i] = range;
    }
    
    for (int i = 0;i < self.strLength; i ++) {
        long maxLoc;
        int lineNum;
        for (int j = 0; j < lines.count; j ++) {
            CFRange range = ranges[j];
            maxLoc = range.location + range.length - 1;
            if (i <= maxLoc) {
                lineNum = j;
                break;
            }
        }
        
        CTLineRef line = (__bridge CTLineRef)(lines[lineNum]);
        CGPoint origin = origins[lineNum];
        CGRect ctRunFrame = [self frameForCTRunWithIndex:i ctLine:line origin:origin];
        if ([self isFrame:ctRunFrame containsPoint:point]) {
            NSLog(@"您点击到了第 %d 个字符，位于第 %d 行，然而他没有响应事件。",i,lineNum + 1);
            
            return;
        }
    }
    NSLog(@"您没有点击到文字");
}

/**
 字符Frame计算

 @param index  索引
 @param line   索引字符所在CTLine
 @param origin line的起点

 @return 返回Frame
 */
- (CGRect)frameForCTRunWithIndex:(NSInteger)index ctLine:(CTLineRef)line origin:(CGPoint)origin
{
    //获取字符起点相对于CTLine的原点的偏移量
    CGFloat offsetX = CTLineGetOffsetForStringIndex(line, index, NULL);
    //获取下一个字符的偏移量，两者之间即为字符X范围
    CGFloat offsetX2 = CTLineGetOffsetForStringIndex(line, index + 1, NULL);
    offsetX += origin.x;
    offsetX2 += origin.x;
    CGFloat offsetY = origin.y;
    CGFloat lineAscent,lineDescent;
    //获取当前点击的CTRun
    NSArray *runs = (NSArray *)CTLineGetGlyphRuns(line);
    CTRunRef runCurrent;
    for (int k = 0; k < runs.count; k ++) {
        CTRunRef run = (__bridge CTRunRef)(runs[k]);
        CFRange range = CTRunGetStringRange(run);
        NSRange rangeOC = NSMakeRange(range.location, range.length);
        if ([self isIndex:index inRange:rangeOC]) {
            runCurrent = run;
            break;
        }
    }
    //获得对应CTRun的尺寸信息
    CTRunGetTypographicBounds(runCurrent, CFRangeMake(0, 0), &lineAscent, &lineDescent, NULL);
    //计算当前点击的CTRun高度
    CGFloat height = lineAscent + lineDescent;
    return CGRectMake(offsetX, offsetY, offsetX2 - offsetX, height);
}


/**
 范围检测

 @param index 索引
 @param range 范围

 @return 范围内返回yes，否则返回no
 */
- (BOOL)isIndex:(NSInteger)index inRange:(NSRange)range
{
    if ((index <= (range.location + range.length - 1)) && (index >= range.location)) {
        return YES;
    }
    return NO;
}

完整代码如下:

.h文件

#import <UIKit/UIKit.h>

@interface HSCoreTextView : UIView

@end

.m文件 

#import "HSCoreTextView.h"
#import <CoreText/CoreText.h>

@interface HSCoreTextView ()

@property (nonatomic,assign) CGRect imgFrm;

@property (nonatomic,assign) CTFrameRef ctFrm;

@property (nonatomic,assign) NSInteger strLength;

@end

@implementation HSCoreTextView


//图片回调函数
static CGFloat ascentCallBacks(void *ref)
{
    //__bridge既是C的结构体转换成OC对象时需要的一个修饰词
    return [[(__bridge NSDictionary *)ref valueForKey:@"height"] floatValue];
}

static CGFloat descentCallBacks(void *ref)
{
    return 0;
}

static CGFloat widthCallBacks(void *ref)
{
    return [[(__bridge NSDictionary *)ref valueForKey:@"width"] floatValue];
}

- (void)drawRect:(CGRect)rect
{
    [super drawRect:rect];
    
    //1.绘制上下文
    //1.1获取绘制上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    //1.2.coreText 起初是为OSX设计的，而OSX得坐标原点是左下角，y轴正方向朝上。iOS中坐标原点是左上角，y轴正方向向下。若不进行坐标转换，则文字从下开始，还是倒着的,因此需要设置以下属性
    设置字形的变换矩阵为不做图形变换
    CGContextSetTextMatrix(context, CGAffineTransformIdentity);
    //平移方法，将画布向上平移一个屏幕高
    CGContextTranslateCTM(context, 0, self.bounds.size.height);
    //缩放方法，x轴缩放系数为1，则不变，y轴缩放系数为-1，则相当于以x轴为轴旋转180度
    CGContextScaleCTM(context, 1.0, -1.0);
    
    //2.设置图片回调函数
    //2.1创建一个回调结构体，设置相关参数
    CTRunDelegateCallbacks callBacks;
    //memset将已开辟内存空间 callbacks 的首 n 个字节的值设为值 0, 相当于对CTRunDelegateCallbacks内存空间初始化
    memset(&callBacks, 0, sizeof(CTRunDelegateCallbacks));
    //2.2设置回调版本，默认这个
    callBacks.version = kCTRunDelegateVersion1;
    //2.3设置图片顶部距离基线的距离
    callBacks.getAscent = ascentCallBacks;
    //2.4设置图片底部距离基线的距离
    callBacks.getDescent = descentCallBacks;
    //2.5设置图片宽度
    callBacks.getWidth = widthCallBacks;
    //2.6创建一个代理
    NSDictionary *dicPic = @{@"height":@"60",@"width":@"60"};
    CTRunDelegateRef delegate = CTRunDelegateCreate(&callBacks, (__bridge void * _Nullable)(dicPic));

    //3.插入图片
    //创建空白字符
    unichar placeHolder = 0xFFFC;
    NSString *placeHolderStr = [NSString stringWithCharacters:&placeHolder length:1];
    NSMutableAttributedString *placeHolderMabString = [[NSMutableAttributedString alloc] initWithString:placeHolderStr];
    //给字符串中的范围中字符串设置代理
    CFAttributedStringSetAttribute((CFMutableAttributedStringRef)placeHolderMabString, CFRangeMake(0, 1), kCTRunDelegateAttributeName, delegate);
    
    //4.设置要显示的文字
    NSMutableAttributedString *mabString = [[NSMutableAttributedString alloc] initWithString:@"\n这里在测试图文混排,\n我是富文本"];
    [mabString insertAttributedString:placeHolderMabString atIndex:12];
    
    //5.绘制文本
    //5.1.创建CTFramesetterRef
    CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((CFAttributedStringRef)mabString);
    
    //5.2.创建路径
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddRect(path, NULL, self.bounds);
    
    //5.3.创建CTFrame
    NSInteger length = mabString.length;
    self.strLength = length;
    CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, length), path, NULL);
    self.ctFrm = frame;
    CTFrameDraw(frame, context);
    
    //6.添加图片并绘制
    UIImage *image = [UIImage imageNamed:@"icon-60"];
    CGRect imgFrm = [self calculateImageRectWithFrame:frame];
    self.imgFrm = imgFrm;
    CGContextDrawImage(context, imgFrm, image.CGImage);
    
    //7.释放
    CFRelease(delegate);
//    CFRelease(frame);
    CFRelease(path);
    CFRelease(framesetter);
}

#pragma mark 计算图片Frame
- (CGRect)calculateImageRectWithFrame:(CTFrameRef)frame
{
    //根据frame获取需要绘制的线的数组
    NSArray *arrLines = (NSArray *)CTFrameGetLines(frame);
    NSInteger count = arrLines.count;
    CGPoint points[count];
    //获取起始点位置
    CTFrameGetLineOrigins(frame, CFRangeMake(0, 0), points);
    
    for (int i = 0; i < count; i ++) {
        CTLineRef line = (__bridge CTLineRef)(arrLines[i]);
        //CTRun 或者叫做 Glyph Run，是一组共享想相同attributes（属性）的字形的集合体
        NSArray *arrGlyphRun = (NSArray *)CTLineGetGlyphRuns(line);
        for (int j = 0; j < arrGlyphRun.count; j ++) {
            CTRunRef run = (__bridge CTRunRef)(arrGlyphRun[j]);
            //获取CTRun的属性
            NSDictionary *attributes = (NSDictionary *)CTRunGetAttributes(run);
            CTRunDelegateRef delegate = (__bridge CTRunDelegateRef)[attributes valueForKey:(id)kCTRunDelegateAttributeName];
            if (delegate == nil) {
                continue;
            }
            
            NSDictionary *dic = CTRunDelegateGetRefCon(delegate);
            if (![dic isKindOfClass:[NSDictionary class]]) {
                continue;
            }
            
            //获取一个起点
            CGPoint point = points[i];
            //获取上下距
            CGFloat ascent,desecent;
            //创建一个Frame
            CGRect boundsRun;
            boundsRun.size.width = CTRunGetTypographicBounds(run, CFRangeMake(0, 0), &ascent, &desecent, NULL);
            boundsRun.size.height = ascent + desecent;
            //获取偏移量
            CGFloat xOffset = CTLineGetOffsetForStringIndex(line, CTRunGetStringRange(run).location, NULL);
            boundsRun.origin.x = point.x + xOffset;
            boundsRun.origin.y = point.y - desecent;
            //获取绘制路径
            CGPathRef path = CTFrameGetPath(frame);
            //获取剪裁区域边框
            CGRect colRect = CGPathGetBoundingBox(path);
            CGRect imageBounds = CGRectOffset(boundsRun, colRect.origin.x, colRect.origin.y);
            
            return imageBounds;
        }
    }
    return CGRectZero;
}

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    CGPoint location = [self systemPointFromScreenPoint:[touch locationInView:self]];
    //判断点击的是图片还是文字
    if ([self checkIsClickOnImgWithPoint:location]) {
        return;
    }
    [self clickOnStringWithPoint:location];
}

#pragma mark 转化成屏幕坐标
- (CGPoint)systemPointFromScreenPoint:(CGPoint)origin
{
    return CGPointMake(origin.x, self.bounds.size.height - origin.y);
}

#pragma mark 点击图片
- (BOOL)checkIsClickOnImgWithPoint:(CGPoint)location
{
    if ([self isFrame:_imgFrm containsPoint:location]) {
        NSLog(@"你点击到了图片");
        return YES;
    }
    return NO;
}

- (BOOL)isFrame:(CGRect)frame containsPoint:(CGPoint)point
{
    return CGRectContainsPoint(frame, point);
}

/*
 点击文字判断的大致步骤：
 1.根据Frame拿到所有Line
 2.计算每个Line中在全文的range
 3.计算每个字对应line原点的X值
 4.比对对应line的origin求得字对应起点坐标
 5.求得下一个字的横坐标和上一行的origin，结合起点坐标得出字的坐标范围
 6.屏幕坐标与drawRect坐标转换，判断是否在范围内
 */
#pragma mark 点击字符串
- (void)clickOnStringWithPoint:(CGPoint)point
{
    //获取所有CTLine
    NSArray *lines = (NSArray *)CTFrameGetLines(self.ctFrm);
    //初始化范围数组
    CFRange ranges[lines.count];
    //初始化原点数组
    CGPoint origins[lines.count];
    //获取所有CTLine的原点
    CTFrameGetLineOrigins(self.ctFrm, CFRangeMake(0, 0), origins);
    
    //获取每个CTLine中包含的富文本在整串富文本中的范围。将所有CTLine中字符串的范围保存下来放入数组中。
    for (int i = 0; i < lines.count; i ++) {
        CTLineRef line = (__bridge CTLineRef)(lines[i]);
        CFRange range = CTLineGetStringRange(line);
        ranges[i] = range;
    }
    
    for (int i = 0;i < self.strLength; i ++) {
        long maxLoc;
        int lineNum;
        for (int j = 0; j < lines.count; j ++) {
            CFRange range = ranges[j];
            maxLoc = range.location + range.length - 1;
            if (i <= maxLoc) {
                lineNum = j;
                break;
            }
        }
        
        CTLineRef line = (__bridge CTLineRef)(lines[lineNum]);
        CGPoint origin = origins[lineNum];
        CGRect ctRunFrame = [self frameForCTRunWithIndex:i ctLine:line origin:origin];
        if ([self isFrame:ctRunFrame containsPoint:point]) {
            NSLog(@"您点击到了第 %d 个字符，位于第 %d 行，然而他没有响应事件。",i,lineNum + 1);
            
            return;
        }
    }
    NSLog(@"您没有点击到文字");
}

/**
 字符Frame计算

 @param index  索引
 @param line   索引字符所在CTLine
 @param origin line的起点

 @return 返回Frame
 */
- (CGRect)frameForCTRunWithIndex:(NSInteger)index ctLine:(CTLineRef)line origin:(CGPoint)origin
{
    //获取字符起点相对于CTLine的原点的偏移量
    CGFloat offsetX = CTLineGetOffsetForStringIndex(line, index, NULL);
    //获取下一个字符的偏移量，两者之间即为字符X范围
    CGFloat offsetX2 = CTLineGetOffsetForStringIndex(line, index + 1, NULL);
    offsetX += origin.x;
    offsetX2 += origin.x;
    CGFloat offsetY = origin.y;
    CGFloat lineAscent,lineDescent;
    //获取当前点击的CTRun
    NSArray *runs = (NSArray *)CTLineGetGlyphRuns(line);
    CTRunRef runCurrent;
    for (int k = 0; k < runs.count; k ++) {
        CTRunRef run = (__bridge CTRunRef)(runs[k]);
        CFRange range = CTRunGetStringRange(run);
        NSRange rangeOC = NSMakeRange(range.location, range.length);
        if ([self isIndex:index inRange:rangeOC]) {
            runCurrent = run;
            break;
        }
    }
    //获得对应CTRun的尺寸信息
    CTRunGetTypographicBounds(runCurrent, CFRangeMake(0, 0), &lineAscent, &lineDescent, NULL);
    //计算当前点击的CTRun高度
    CGFloat height = lineAscent + lineDescent;
    return CGRectMake(offsetX, offsetY, offsetX2 - offsetX, height);
}


/**
 范围检测

 @param index 索引
 @param range 范围

 @return 范围内返回yes，否则返回no
 */
- (BOOL)isIndex:(NSInteger)index inRange:(NSRange)range
{
    if ((index <= (range.location + range.length - 1)) && (index >= range.location)) {
        return YES;
    }
    return NO;
}

- (void)dealloc
{
    CFRelease(_ctFrm);
}

@end






秋渐变
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IOS CoreText系列三：图文混排
AFun_day的博客
11-18 463
IOS CoreText系列三：图文混排
ios CoreText实现图文混排和点击事件
洛阳如是
05-27 736
来源:www.chengxuyuans.com 本例子是实现类似于微博的富文本效果，可以实现图文混排和处理点击事件触发。使用CoreText进行图文混排的核心思想是把需要摆放图片的位置用空字符替换原来的字符，并且实现CTRunDelegate，用于动态设置空字符的高度和宽度（代表图片的大小），并且对这些空字符设置一个属性名来区别于其他CTRun，之后进行图片渲染的时候就能通过该属性来区分哪些
IOS CoreText --- 图文混排之代码封装
秋恨雪
05-31 2565
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。上一节中，我详细的讲解了用面向对象的思想将Core Text的纯C语言的代码进行了封装。这一节，我将对“图文混排”的效果也进行封装工作。不过，这一节的代码是基于上一节的，所以，如果你没有浏览过上一节的内容，请点击这里。先看看最终的效果图：现在，我们就来对上一节的代码，继续扩充。1. 添加了图片信息...
iOS coreText 图文混排
Chen_Xianghong的专栏
12-01 421
本例子是实现类似于微博的富文本效果，可以实现图文混排和处理点击事件触发。使用CoreText进行图文混排的核心思想是把需要摆放图片的位置用空字符替换原来的字符，并且实现CTRunDelegate，用于动态设置空字符的高度和宽度（代表图片的大小），并且对这些空字符设置一个属性名来区别于其他CTRun，之后进行图片渲染的时候就能通过该属性来区分哪些空字符是代表图片的占位符，哪些是普通的空字符。使用Co
IOS CoreText --- 图文混排
秋恨雪
05-29 1294
本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。利用CORETEXT进行图文混排。实现代码：[cpp] view plaincopyvoid RunDelegateDeallocCallback( void* refCon ){        }    CGFloat RunDelegateGetAscentCallback( void *re...
IOS 开发—CoreText实现图文混排和点击事件
cemingyue的专栏
09-30 752
CoreText实现图文混排和点击事件 本例子是实现类似于微博的富文本效果，可以实现图文混排和处理点击事件触发。使用CoreText进行图文混排的核心思想是把需要摆放图片的位置用空字符替换原来的字符，并且实现CTRunDelegate，用于动态设置空字符的高度和宽度（代表图片的大小），并且对这些空字符设置一个属性名来区别于其他CTRun，之后进行图片渲染的时候就能通过该属性来区分哪些
ios 解析html图文混排,iOS 之 图文混排（富文本）
weixin_36210213的博客
06-10 492
学习自MJ，分享给大家！分类// 富文本技术：// 1.图文混排// 2.随意修改文字样式与CoreText,textKit的区别/**iOS 6之前：CoreText,纯C语言,极其蛋疼iOS 6开始：NSAttributedString,简单易用iOS 7开始：TextKit,功能强大,简单易用*/代码示例及注释讲解- (void)setupTextView{// 富文本技术：// 1.图文混...
iOS coretext图文混排
diantong7843的博客
05-16 106
需要引入CoreText框架 然后引入头文件 至于用这个框架排出来的版就是自定义cell决定的了，在这里我们可以引用一个第三方的自定义的cell 给从接口里申请下来的数据创建一个Model接收 初始化在字典里 在需要图文混排的页面 定义一个数组的属性，在viewDodLoad里创建一个个字典并把字典都加到数组里去， 在给字典格式的时候可以把字体的大小和颜色设置好，...
ios android 图文混排,019-谈谈iOS 图文混排
weixin_36129381的博客
05-29 157
一句话：画path，用Textkit；或者Core Text留位置。iOS开发中要实现图文混排，简单从API层面看，有两种方法：(1)用TextKit，设置一个path，然后文字会围绕这个path来布局，值得一提的是，这个path可以不是规则的，可以画成心形，蝴蝶型，只要你画得出，任何path都可以。(2)用CoreText，给要放图片的位置先用一个文字或者其他特殊字符占位，我们先来看看官方文档怎...
IOS 利用AFN上传图片，支持多张、单张上传
热门推荐
AFun_day的博客
10-24 1万+
多张 单张 图片 上传
IOS 调用支付宝收不到支付回调
AFun_day的博客
10-27 7482
IOS 支付宝 支付回调问题
IOS Xcode8 日志打印不全及屏蔽系统日志解决方法
AFun_day的博客
10-27 7083
IOS Xcode8 打印不全 屏蔽系统日志
IOS 打开预览pdf、ppt、excel、word、tet、rtf、csv格式的文件，微信文件分享
AFun_day的博客
06-21 6515
IOS 打开预览pdf、ppt、excel、word、tet、rtf、csv格式的文件，微信文件分享
iOS WKWebView 远端h5优先加载本地资源
AFun_day的博客
03-29 6101
iOS WKWebView 远端h5优先加载本地资源
IOS UITableViewCell常用几种动画效果
AFun_day的博客
10-24 4467
动画 UITableViewCell
IOS 利用麦克风声音来实现吹裙子的动画效果
AFun_day的博客
11-03 4458
iOS AVAudioRecorder 录音 动画
iOS14 画中画(PictureInPicture)
AFun_day的博客
07-08 4394
简介 早在iOS9的时候，画中画功能已存在，只是只适用在ipad上，iOS14在iphone新增画中画功能。画中画功能可拖动到屏幕之外，但保持播放状态。 基本使用 1. 开启后台模式2. #import <AVKit/AVKit.h>创建AVPictureInPictureController 3. 开启/关闭画中画 ...
iOS webView 远端h5优先加载本地资源
AFun_day的博客
03-29 3380
iOS UIWebView 远端h5优先加载本地资源，实现方法为通过对请求进行拦截
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值