本文是背景虚化界面设计,在美图秀秀的背景虚化模块主要是图像的模糊处理,可以按照圆形和线性进行模糊处理,并生成选定的形状。

  在开发中遇到的误区

1.模糊形状使用UIImageView,遇到一些麻烦,即使你向UIImageView对象添加手势,当你重载touchesBegan时,UIImageView对象也接收不到触摸事件,而是直接传递给self.view。所以最后使用了UIButton来显示模糊形状图片,这样方便我们接收事件。

2.UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];初始化时用UIButtonTypeCustom才可以显示原图片,否则显示图片时时高亮状态的图片,很是奇怪。

如图

先来几张效果图

  

一、从美化图片首页进入背景虚化

    else if ([text isEqualToString:@"背景虚化"]){FWBlurViewController *vc = [[FWBlurViewController alloc] initWithImage:self.image];[self presentViewController:vc animated:YES completion:^{}];}

二、初始化界面

self.selectedIndex = 0;self.view.backgroundColor = [UIColor blackColor];//显示图片self.imageView = [[UIImageView alloc] initWithImage:self.image];self.imageView.frame = CGRectMake(0, 0, WIDTH, HEIGHT - 115);self.imageView.contentMode = UIViewContentModeScaleAspectFit;[self.view addSubview:self.imageView];//保存与取消按钮的添加UIImage *i1 = [UIImage imageNamed:@"btn_cancel_a@2x.png"];self.btnClose = [UIButton buttonWithType:UIButtonTypeCustom];[self.btnClose setImage:i1 forState:UIControlStateNormal];self.btnClose.frame = CGRectMake(20, HEIGHT - kCancelHeight - 10, kCancelHeight, kCancelHeight);[self.btnClose addTarget:self action:@selector(btnCancelOrSaveClicked:) forControlEvents:UIControlEventTouchUpInside];[self.view addSubview:self.btnClose];UIImage *i2 = [UIImage imageNamed:@"btn_ok_a@2x.png"];self.btnSave = [UIButton buttonWithType:UIButtonTypeCustom];[self.btnSave setImage:i2 forState:UIControlStateNormal];self.btnSave.frame = CGRectMake(WIDTH - kCancelHeight - 20, HEIGHT - kCancelHeight - 10, kCancelHeight, kCancelHeight);[self.view addSubview:self.btnSave];[self.btnSave addTarget:self action:@selector(btnCancelOrSaveClicked:) forControlEvents:UIControlEventTouchUpInside];[self setupSlider];self.styleBar = [[FWEffectBar alloc] initWithFrame:CGRectMake(90, HEIGHT - 55, 180, 55)];NSDictionary *autoDict = [[FWDataManager getDataSourceFromPlist] objectForKey:@"Blur"];NSArray *normalImageArr = [autoDict objectForKey:@"normalImages"];NSArray *hightlightedImageArr = [autoDict objectForKey:@"HighlightedImages"];NSArray *textArr = [autoDict objectForKey:@"Texts"];NSMutableArray *items = [[NSMutableArray alloc] initWithCapacity:0];for (int i = 0; i < [textArr count]; i++){FWEffectBarItem *item = [[FWEffectBarItem alloc] initWithFrame:CGRectZero];[item setFinishedSelectedImage:[UIImage imageNamed:[hightlightedImageArr objectAtIndex:i]] withFinishedUnselectedImage:[UIImage imageNamed:[normalImageArr objectAtIndex:i]] ];item.title = [textArr objectAtIndex:i];[items addObject:item];}self.styleBar.items = items;self.styleBar.effectBarDelegate = self;[self.styleBar setSelectedItem:[self.styleBar.items objectAtIndex:0]];[self effectBar:self.styleBar didSelectItemAtIndex:0];[self.view addSubview:self.styleBar];self.btnBlurType = [UIButton buttonWithType:UIButtonTypeCustom];[self.btnBlurType setImage:[UIImage imageNamed:@"icon_blur_null"] forState:UIControlStateNormal];[self.btnBlurType addTarget:self action:@selector(btnBlurClicked:) forControlEvents:UIControlEventTouchUpInside];self.btnBlurType.frame = CGRectMake(20, HEIGHT - 90, 30, 30);[self.view addSubview:self.btnBlurType];

三、模糊形状视图管理

- (void)btnBlurClicked:(id)sender
{if (self.subView){return;}[self setupSharpView];
}- (void)hideShapeView
{[self.subView removeFromSuperview];self.subView = nil;
}
- (void)setupSharpView
{NSArray *arr = [NSArray arrayWithObjects:@"icon_blur_null", @"icon_blur_center", @"icon_blur_heart", @"icon_blur_star", @"icon_blur_heptagon", nil];self.subView = [[UIView alloc] initWithFrame:CGRectMake(10, HEIGHT - 135, 250, 35)];for (int i = 0; i < [arr count]; i++) {UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];[btn setImage:[UIImage imageNamed:[arr objectAtIndex:i]] forState:UIControlStateNormal];btn.frame = CGRectMake(10 + (35 + 10) * i, 0, 35, 35);[btn addTarget:self action:@selector(tap:) forControlEvents:UIControlEventTouchUpInside];[self.subView addSubview:btn];}[self.view addSubview:self.subView];
}- (void)tap:(id)sender
{[self hideShapeView];[self.btnBlurType setImage:((UIButton *)sender).currentImage forState:UIControlStateNormal];
}- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{[self hideShapeView];
}

小知识

1.[self.slider setThumbImage:[UIImage imageNamed:@"icon_slider_thumb"] forState:UIControlStateNormal];这段代码可以修改UISLIDER的滑块图片,默认的滑块太大~

2.UIImageView拦截事件要弱于UIButton

3.推荐创建UIButton时类型选择UIButtonTypeCustom。

界面做完主攻具体功能实现了,估计还得1个星期左右~

下载项目

为自己加油!

转载于:https://www.cnblogs.com/salam/p/5130668.html

美图秀秀-美化图片之【背景虚化】界面设计相关推荐

  1. 美图秀秀-美化图片之【特效】界面设计

    本文是特效界面设计,在美图秀秀的特效模块主要是实现图片添加滤镜效果,界面挺炫的. 界面包含黑边和虚化按钮,4种类型的滤镜,每种类型又包含许多具体滤镜效果,当我们点击时候开始处理图片 1.加载图片 se ...

  2. 美图秀秀美化图片之【智能优化】模块界面设计

    美图秀秀的智能优化界面十分简单明了,它只包含了一张要进行处理的图片和一个bar,再就是取消操作和保存操作的2个按钮,先附一张界面图 一.点击美化图片首页[智能优化],进入具体操作界面 FWFuncti ...

  3. 美图秀秀美化图片之【边框】界面设计【重大更新】

    在进行写边框前,需要通知大家一声,整个美化图片的界面开发已经完全重写,请大家先下载最新的项目[点击下载] 效果图 在前面的开发方法中由于没有考虑许多因素,造成viewcontroller代码混乱,所以 ...

  4. 仿美图秀秀的图片剪切

    先贴上美图秀秀原作的效果图,右边是我仿的效果图. 刚一眼打量过去,吸引我们的就是那四个大点.就从它开始吧,目前看来这个大点是一个图片,当点击下去的时候有加亮的效果,可能这又是一张图片.我们先不要考虑这 ...

  5. 美图秀秀 如何修改照片背景颜色

    在"美化"的"调色"里可以改变图片颜色.

  6. Android实现仿美图秀秀给图片加框

    // 花色边框  public Bitmap getBitmapHuaSeBianKuang(Bitmap bitmap) {   float frameSize = 0.5f * getFrameS ...

  7. 潇洒郎:GMIP——美图秀秀——两种方法——图片透明化,游戏界面人物,对象需要透明

    今天跟大家分享一下如何将图片处理为透明化.因为做游戏界面的时候我们为了不让界面显得很突兀.看起来不和谐,所以需要将图片该透明的透明. 先说下图片小知识: 将图片划分为4维通道:RGBA.其中RGB代表 ...

  8. 快手、抖音威胁下,美图秀秀转型影像社交的新故事怎么讲?

    近日,美图秀秀发布了8.0版本,不仅启用了全新的品牌标识,而且增加了社交圈功能,美图秀秀至此从图片处理工具转型为影像社交平台.美图的社交梦由来已久,社交布局上已有短视频平台美拍,如今又尝试将美图秀秀打 ...

  9. 怎么把html背景换白色,美图秀秀怎么将图片背景替换成白色?

    美图秀秀是一款优秀的图片处理软件,在美图秀秀软件中,我们可以将图片进行各种各样的美化处理,本篇经验中我将向大家介绍一下,如何将图片的背景替换为白色,好了,我们的教程就正式开始咯,大家速来围观我的经验啦 ...

最新文章

  1. 她是数学奇女子,巴贝奇的好友,却没能等到计算机的辉煌时刻
  2. 理论+实操: linux中firewalld防火墙基础讲解(转载)
  3. 终于有人把文本分类讲明白了!
  4. bootstrap思考一
  5. python中使用if __name__ == '__main__':
  6. 程序员面试金典 - 面试题 17.14. 最小K个数(快排划分O(n))
  7. 听到表扬的飞鸽传书2011
  8. 读取配置文件中的内容演练 20210412_221336.mp4
  9. 【OpenCV学习笔记】【函数学习】四(origin+imageData+cvcopy()函数+CvMemStorage 类型+CvPoint类型)
  10. SpringBoot学习笔记(15):动态数据源切换
  11. 计算机盘中文件夹丢失,电脑装机后原区分f盘内文件夹丢失如何找回
  12. 十一、垃圾回收策略配置
  13. 灵悟礼品网上专卖店——新建数据库
  14. 12306 脱库疑云:410 万用户数据仅售 20 美元!
  15. 2017-2018-1 20155314 20155323 实验二 固件程序设计
  16. h5自定义微信分享链接
  17. 基于内容的垃圾邮件过滤
  18. gin binding方法汇总
  19. 优化无止境,爱奇艺中后台 Web 应用性能优化实践
  20. Arnold Denoise流程

热门文章

  1. 基本类型和封装类型的转换
  2. python游戏倒计时_游戏中的倒计时器
  3. 工控服务器什么作用,工控服务器是什么
  4. linux图像化界面读取u盘,Linux上用的4种USB image程序:Etcher,Unetbootin,DD,MultiWriter
  5. linux dns 泛域名,LINUX DNS轮询+泛域名解析
  6. 野樱桃树下的背叛 读后感
  7. linux acl原理,Linux UGO,ACL简介
  8. 非会员非太阳免费更换任何QQ头像
  9. 硬件电路开发中晶体三极管常用知识
  10. 马克思主义哲学是否只是“抄袭”和断章取义了别人的思想