实现文字环绕图片

OS中有时候需要实现文字环绕图片的效果,用一般的控件很难实现,因为根本就没有支持该属性的控件,折衷的做法就是用UIWebView,在其加载html语言,实现文字的环绕效果。

实现要求:在webView上实现文字环绕图片,点击图片可实现图片放大。

关于点击图片放大有两种方法:1.用javascript脚本实现,可笔者已经3年不做web开发了,这种方式可能需要较长时间。2.在webView中添加一个占位图(必须是透明的),在

web.scrollView上相应位置,添加UIImageView,并实现点击效果。

以下时部分代码:

newsTitle=@"标题";

       newsTime=[NSString stringWithFormat:@"%@                     %@",@"2012-08-09",@"网易"];

       NSString *file1 = [[NSBundle mainBundle] pathForResource:@"占位图" ofType:@"png"];//设置占位图片

       NSString *file2 = [[NSBundle mainBundle] pathForResource:@"透明" ofType:@"png"];//设置占位图片

       NSString *imgstr=[NSString stringWithFormat:@"<img src='file://%@' style=\"FLOAT: right; MARGIN-TOP: 10px; MARGIN-RIGHT: 10px\" alt=\"\">",nil,nil];//红色的就是占位图的属性设置:居右,距离上边 10px,距离右边10px

       web.backgroundColor = [UIColor clearColor];  

       web.opaque = NO;

       //这行能在模拟器下明下加快 loadHTMLString后显示的速度,其实在真机上没有下句也感觉不到加载过程

       web.dataDetectorTypes = UIDataDetectorTypeNone;

       if (!news) {

           news=@"要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字要添加的文字";

       }

       NSString *webviewText = [NSString stringWithFormat:@"<style>body{margin:10;align:center;background-color:lightgray;font-color:black;font:17px/20px Custom-Font-Name}</style><h2 align=\"center\">%@</h2><h5 style='text-align:center;'>%@</h5><hr></br>%@<font>%@</font>",newsTitle,newsTime,imgstr,news];//红色部分将文字图片连接在一起


       [web loadHTMLString:webviewText baseURL:nil]; // WebView中显示本地的字符串

       //在于占位图同样的添加图片

       UIView *firstView=[self addImageViewWithFrame:CGRectMake(203, 125, 100, 97) andPic:pic1];

       [firstView setTag:9];

       [web.scrollView  addSubview:firstView];

       [web.scrollView addSubview:[self addImageViewWithFrame:CGRectMake(203, 226, 100, 97) andPic:pic2]];

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现文字环绕图片的关键是要利用CSS来控制图片的位置和样式。具体实现方法如下: 1. 在HTML中,将图片文字包裹在同一个容器中,例如一个div元素。 2. 给图片设置一个`float`属性,使其脱离文档流,并且向左或向右浮动。 3. 使用CSS属性`shape-outside`来控制文字环绕图片的形状。该属性可以设置图片的形状,例如圆形、矩形、多边形等。通常使用`circle()`函数来设置圆形形状。 4. 给文字设置一个`margin`属性,使其与图片产生一定的间距,以避免文字图片重叠。 下面是实现文字环绕图片的示例代码: HTML代码: ``` <div class="image-container"> <img src="image.jpg" alt="图片"> <p>这是一段文字,用于演示文字环绕图片的效果。</p> </div> ``` CSS代码: ``` .image-container { width: 500px; /* 容器宽度 */ height: auto; /* 容器高度自适应 */ margin-bottom: 20px; /* 与下一个容器产生一定的间距 */ } img { float: left; /* 向左浮动 */ shape-outside: circle(50%); /* 设置圆形形状 */ margin-right: 20px; /* 图片文字产生一定的间距 */ } p { margin: 0; /* 去除段落的默认外边距 */ text-align: justify; /* 文字两端对齐 */ } ``` 在上面的代码中,我们通过设置图片的`float`属性为`left`,使其向左浮动。然后通过设置`shape-outside`属性为`circle(50%)`,使图片的形状为圆形,并且文字可以环绕图片周围。最后,我们给段落设置了`margin: 0`,以去除默认的外边距,并且使用`text-align: justify`属性来实现文字两端对齐的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值