文字环绕

#import "ViewController.h"
//coretext
@interface ViewController ()
{
    //指定文本的区域,默认为矩形
    NSTextContainer *_textContainer;
    //用于存储文本和文本相关的属性
    NSTextStorage *_textSorage;
}
@end

@implementation ViewController

- (void)viewDidLoad {
/* 这端代码是让文字以特定要求排版*/
    [super viewDidLoad];
    //x方向缩小10,y方向缩小20.
    CGRect textViewRect = CGRectInset(self.view.bounds,10,20);
    //存储文字的对象
    NSTextStorage *textStorage = [[NSTextStorage alloc] initWithString:_myTextView.text];
    //排版对象
    NSLayoutManager *layoutManager = [[NSLayoutManager alloc] init];
    //指定排版对象
    [textStorage addLayoutManager:layoutManager];
    //容器对象,设定文字的显示区域,默认为矩形
    _textContainer = [[NSTextContainer alloc] initWithSize:textViewRect.size];
    //指定容器对象
    [layoutManager addTextContainer:_textContainer];
    [_myTextView removeFromSuperview];
    _myTextView = (UITextView *)[[UITextView alloc] initWithFrame:textViewRect textContainer:_textContainer];
    _myTextView.editable = NO;
    [self.view insertSubview:_myTextView belowSubview:_myImageView];
    [textStorage beginEditing];
    //设置凸版印刷效果
    NSDictionary *dic = @{NSTextEffectAttributeName:NSTextEffectLetterpressStyle,NSFontAttributeName:[UIFont fontWithName:@"Helvetica" size:20]};
    NSMutableAttributedString *attString = [[NSMutableAttributedString alloc] initWithString:_myTextView.text attributes:dic];
    [textStorage setAttributedString:attString];
    [self createWord:@"北京时间" inStorage:textStorage];
    [self createWord:@"Lorem" inStorage:textStorage];
    [textStorage endEditing];
/*上面是让文字进行排版*/
    //指定环绕路径
    _myTextView.textContainer.exclusionPaths = @[[self translatedBezierPath]];/*****///这句话是让图文混排
    // Do any additional setup after loading the view, typically from a nib.
}

//获取贝塞尔曲线的路径(两个端点和端点的切线确定的图形)
- (UIBezierPath *)translatedBezierPath{
    CGRect  imageRect = [_myTextView convertRect:_myImageView.frame fromView:self.view];
    //拿到图片的贝塞尔曲线
    UIBezierPath *newPath = [UIBezierPath bezierPathWithRect:imageRect];
    return newPath;
}

//将指定的文字放入文本存储对象中
- (void)createWord:(NSString *)word inStorage:(NSTextStorage *)storage{
    //正则表达式
    NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:word options:0 error:nil];
    //通过正则表达式,筛选出指定的文字,并设置颜色
    NSArray *matches = [regex matchesInString:_myTextView.text options:0 range:NSMakeRange(0,[_myTextView.text length])];
    for (NSTextCheckingResult *match in matches) {
        NSRange matchRange = [match range];
        [storage addAttribute:NSForegroundColorAttributeName value:[UIColor redColor] range:matchRange];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end
时间: 2024-10-25 11:52:56

文字环绕的相关文章

(转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: left;padding: 10px;border: 1px solid red;} 5 #big span {font-size: 24px;font-weight: bold; margin: 0 auto;} 6 </style> 7 <div id="big">

css文字环绕图片--遇到的问题及解决方法

一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:300px; } .img-left img { float:left; /* 对图片进行浮动就可以实现了 */ width:150px; } </style> <div class="img-left"> <img src="https://ss0.

CSS文字环绕图片 图文混排效果

CSS实现文字环绕图片效果,也就是大家常见到的文中图效果,比如文字会自动围绕一个方块状的图片广告,这一切都是自动的,不需要另外排版,对此有需要有网页,可借鉴本代码,主要是利用CSS的clear属性实现. <html> <head> <title>CSS文字环绕图片 图文混排效果丨石家庄电缆附件</title> </head> <body> <div style="float:left;"> <di

CSS文字环绕图片,文中图效果

<html> <head> <title>CSS文字环绕图片</title> </head> <body> <div style="float:left;"> <div style="float:left;height:100px;width:1px;"> </div> <div style="float:left;height:230px;w

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的2张图片把主体内容挤到了右侧. 那么,我们如何处理新加的2张图片呢?--我们不太可能用container,因为它是页面布局层面的类名.但我们可以把这2张图片放在class名为row的div中. 我们还可以加更多的图片. 现在的图片还没有居中.考虑到总共有12个单元格,而4张图片只占了8个单元格,还空

文字环绕和两栏自适应以及区域滚动插件iscroll.js

一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文

HTML/CSS实现文字环绕图片布局

原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办法:1.利用图片属性实现代码如下: <p style="width:400px;"> <img src="images/bkjj.jpg" align="right" width="120" hspace=&qu

为什么浮动能实现文字环绕图片而不会重叠

今天看图解CSS的章节,虽然主要讲的是nth-of-type选择器的使用,但是本人却关注到了页面的排版方式,如下: HTML <body> <div class="article"> <img src="http://img.ujian.cc/nice/35.jpg" /> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada f

文字环绕模式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .circular path { fill: none;} .circular { width:250px; height:250px; border:1px solid #ff0000; font-size: 25px; padding:10px;