·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> iOS开发--图片美化

iOS开发--图片美化

作者:佚名      IOS开发编辑:admin      更新时间:2022-07-23

  上一次讨论了图片拉伸的问题,只给出了一种拉伸方式,查文档(iOS 8.3)的时候,没有给出任何版本提示,不过看到有其他大神说,iOS 5.0 以后就被禁用了,不知道是怎么回事.

  这次来讨论一下美化图片,最基本的是大家在玩QQ,微博等app时,都会发现,用户头像做的很漂亮,圆形的,四个角有一定弧度的矩形等等,看着让人舒服.

  接下来讨论一下如何做出这样的效果:

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()
 4 
 5 @end
 6 
 7 @implementation ViewController
 8 
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11     
12     // 美化图片的边框
13     [self beautyPhoto];    
14 }
15 
16 // 美化图片的边框
17 - (void)beautyPhoto
18 {
19     UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(120, 180, 80, 80)];
20     imageView.image = [UIImage imageNamed:@"6.png"];    // 80 * 80
21     [self.view addSubview:imageView];
22 }

  

  上面的代码是加载一张本地图片,没有做任何处理,效果如下:

 

  因为没有做任何处理,所以四个角是尖锐的,接下来为其处理一下边角,代码如下:

 1 #import "ViewController.h"
 2 
 3 @interface ViewController ()
 4 
 5 @end
 6 
 7 @implementation ViewController
 8 
 9 - (void)viewDidLoad {
10     [super viewDidLoad];
11     
12     // 美化图片的边框
13     [self beautyPhoto];
14 }
15 
16 // 美化图片的边框
17 - (void)beautyPhoto
18 {
19     UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(120, 180, 80, 80)];
20     imageView.image = [UIImage imageNamed:@"6.png"];    // 80 * 80
21     [self.view addSubview:imageView];
22     
23     // 美化图片
24     // 设置图片的边框宽度
25     imageView.layer.borderWidth = 4;
26     // 设置图片的边框颜色
27     imageView.layer.borderColor = [UIColor lightGrayColor].CGColor;
28     // 设置图片的拐角的弧度的大小(此处不使用弧度)
29     imageView.layer.cornerRadius = 10;
30     // 截取超出边框外的部分
31     imageView.layer.masksToBounds = YES;
32 }

 

在上面的代码中,设置了图片的边框宽度,颜色以及边角的弧度等,为了让设置的内容显示比较清晰,故将边框的宽度设置的比较大,其运行效果如下:

  可以看到,图片的四个角已不再尖锐.

  想做出QQ用户头像那种圆形头像,也很简单,只要设置图片拐角的弧度大小为矩形图片宽度的一半就行了,如果是正方形,则图片显示为一个圆形,如果是长方形,则图片显示为一个椭圆形.

  上面的图片设置拐角的弧度为40后的效果如下:    // imageView.layer.cornerRadius = 40;

  这样,我们就做出QQ用户头像那种圆形的图片了.