美文网首页
实现触摸文字View

实现触摸文字View

作者: 逗比小骷髅 | 来源:发表于2016-12-12 18:27 被阅读59次

    之前看到TTS(文字转语音)的文章,使用了iOS系统的AVFoundation框架,将文字合成语音,然后是siri的声音读出来,我试了一下,感觉蛮好玩的。晚上睡觉时灵光乍现,想到小孩子在看古诗的时候有时候会碰到不认识的字不会读,如果能将古诗展示在手机上,用手指触摸一下就可以听到这个字怎么读,用手指划一下某几个字可以读出这几个字。。。还不错。。。(哈哈哈) 然后就自己鼓捣出一个用手指触摸文字的View,将触摸到的文字合成语音就可以实现了。
    以上是本人YY的。不要在意。。
    我的实现思路是将一段古诗里的每个字装到label上,创建一个model保存此label的坐标,文字,和label本身。然后实现view的 touchesBegan ,touchesMoved ,touchesEnd 方法,记录手指触摸过得点,判断触摸的点是否在某一个label里面(通过label的frame判断),如果在label上,将该label的字保存到一个数组里,之后将数组里的字组成字符串OK了。

    这里是实现的主要代码:

    这是CharactorModel

    @interface CharactorModel : NSObject
    @property (nonatomic, assign) CGFloat x;
    @property (nonatomic, assign) CGFloat y;
    @property (nonatomic, assign) CGFloat font;
    @property (nonatomic, copy) NSString *string;
    @property (nonatomic, strong) UILabel *lab;
    

    这是计算好坐标,将label布局

    /**
    将要显示的文字排列展示到界面上,将字符串拆成单个文字然后单个文字转成charactorModel对象,装到数组里返回
    
    @param str 要显示的一段文字
    @param width 展示的宽度
    @param font 单个字的大小
    @param interX 两个字间的间隔
    @param leadingY 行间距
    
    */
    -(void)showTouchTextWithString:(NSString *)str width:(CGFloat)width font:(CGFloat)font interX:(CGFloat)interX leadingY:(CGFloat)leadingY{
       NSArray *strArr = [NSArray array];
       NSMutableArray *charModelMuArr = [NSMutableArray array];
       if ([str containsString:@"\n"]) {
           strArr = [str componentsSeparatedByString:@"\n"];
       }else{
           strArr = @[str];
       }
       int m = (int)((width+interX)/(font+interX));
       int a=0,b=0;
       for (int t=0; t<strArr.count; t++) {
           NSString *string = strArr[t];
           
           for (int i=0; i<string.length; i++) {
               CharactorModel *charModel = [[CharactorModel alloc]init];
               charModel.string = [string substringWithRange:NSMakeRange(i, 1)];
               b=i/m;
               
               charModel.x = i*(font + interX) - b*(m*(font+interX)) ;//((int)(WIDTH/font)*(font+interX)-(WIDTH-font))
               charModel.y = (t+a+b) * (font + leadingY);
               charModel.font = font;
               [charModelMuArr addObject:charModel];
           }
           a=a+b;
       }
       for (CharactorModel *charM in charModelMuArr) {
           UILabel *lab = [[UILabel alloc]initWithFrame:CGRectMake(charM.x, charM.y, charM.font, charM.font)];
           lab.textAlignment = NSTextAlignmentCenter;
           lab.font = [UIFont systemFontOfSize:15];
           //        lab.backgroundColor = [UIColor colorWithRed:charM.selectRGBColor.r green:charM.selectRGBColor.g blue:charM.selectRGBColor.b alpha:1];
           charM.lab = lab;
           lab.backgroundColor = [UIColor orangeColor];
           lab.text = charM.string;
           [self addSubview:lab];
       }
       self.charactorModelArr = charModelMuArr;
       
       //    return [NSArray arrayWithArray:charModelMuArr];
    }
    
    //判断一个点的位置是否在该charM上
    -(BOOL)selectText:(CGPoint)point :(CharactorModel *)charM{
        
        CGFloat X =point.x ;
        CGFloat Y =point.y;
        //    NSLog(@"%f--%f  %f-%f",X,Y ,oneM.x,oneM.y);
        if ((X>charM.x && X<charM.x+charM.font) && (Y>charM.y && Y<charM.y+charM.font)) {
            return YES;
        }else{
            return NO;
        }  
    }```
    调用方法
     
    

    //此处使用block,在block里获得到触摸的文字,对文字的处理可以在block块里进行
    +(instancetype)touchTextWithString:(NSString *)str origin:(CGFloat)x :(CGFloat)y width:(CGFloat)width font:(CGFloat)font interX:(CGFloat)interX leadingY:(CGFloat)leadingY completed:(TouchesBlock)block;

    ####写完的Demo  连接:https://pan.baidu.com/s/1dEIxOC5 密码:sq2e
    
    关于TTS技术看这篇文章:[http://www.jianshu.com/p/caaabfad0cc3](http://www.jianshu.com/p/caaabfad0cc3)
    有什么好的想法、建议,欢迎留言!有什么错误,欢迎指正!

    相关文章

      网友评论

          本文标题:实现触摸文字View

          本文链接:https://www.haomeiwen.com/subject/jhwmmttx.html