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

  在开发中遇到的误区

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. Wireshark数据包分析之TCP协议包解读
  2. 用python绘制柱状图标题-Python笔记:用Python绘制炫酷的柱形图
  3. sqlserver安装检测不通过 (重新启动失败)
  4. [LeetCode] Find Largest Value in Each Tree Row 找树每行最大的结点值
  5. esp8266接收到的数据如何存放到数组中_Java中HashMap的实现原理
  6. 用java统计任一书名次数_Java入门第三季 借书系统源代码 加入了限制重输次数 欢迎指教交流...
  7. Swift - 键盘弹出样式
  8. Linux与Ubuntu上SQL Server 2019
  9. Web常用字體-Font-Family
  10. 详述 PROCEDURES_ICD 患者手术情况表 (七)
  11. 程序员面试被问“你的缺点是什么”,该怎么回答?
  12. 一步步教你Windows配置ISCSI共享存储
  13. flask中ajax的使用,jquery – 使用ajax时,Flask flash消息不再有效
  14. JAVA实现Excel照相机功能_Excel如何将工作表转换为图片,并随着数据的变化自动更新?...
  15. SEDA源码解读(二)
  16. 找回孩子丢失的阅读时光(转自中国文明网)
  17. 三轮全向移动机器人的控制方法
  18. java读取并修改xml文件
  19. ET框架-16 ET框架登录账号请求逻辑编写(1)
  20. 计算机毕业设计node+vue基于微信小程序的西餐外卖系统

热门文章

  1. 2005年我研读了的书籍
  2. [BZOJ]3670 [NOI]2014 动物园 KMP好题
  3. html textarea 插件,在TextArea中呈现HTML
  4. 玩游戏上瘾的感觉变化路线
  5. 思维导图-Hive初步入门
  6. scrapy爬取美女图片
  7. 三极管基极和发射极并联电阻的作用(转载)
  8. Java面试含答案(最全版)
  9. 1-3魔法篇章 出现的一些咒语
  10. 学生成绩管理系统升序排序c语言,学生成绩管理系统(查询、排序、增加)急!!!!!...