美图秀秀-美化图片之【背景虚化】界面设计
本文是背景虚化界面设计,在美图秀秀的背景虚化模块主要是图像的模糊处理,可以按照圆形和线性进行模糊处理,并生成选定的形状。
在开发中遇到的误区
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
美图秀秀-美化图片之【背景虚化】界面设计相关推荐
- 美图秀秀-美化图片之【特效】界面设计
本文是特效界面设计,在美图秀秀的特效模块主要是实现图片添加滤镜效果,界面挺炫的. 界面包含黑边和虚化按钮,4种类型的滤镜,每种类型又包含许多具体滤镜效果,当我们点击时候开始处理图片 1.加载图片 se ...
- 美图秀秀美化图片之【智能优化】模块界面设计
美图秀秀的智能优化界面十分简单明了,它只包含了一张要进行处理的图片和一个bar,再就是取消操作和保存操作的2个按钮,先附一张界面图 一.点击美化图片首页[智能优化],进入具体操作界面 FWFuncti ...
- 美图秀秀美化图片之【边框】界面设计【重大更新】
在进行写边框前,需要通知大家一声,整个美化图片的界面开发已经完全重写,请大家先下载最新的项目[点击下载] 效果图 在前面的开发方法中由于没有考虑许多因素,造成viewcontroller代码混乱,所以 ...
- 仿美图秀秀的图片剪切
先贴上美图秀秀原作的效果图,右边是我仿的效果图. 刚一眼打量过去,吸引我们的就是那四个大点.就从它开始吧,目前看来这个大点是一个图片,当点击下去的时候有加亮的效果,可能这又是一张图片.我们先不要考虑这 ...
- 美图秀秀 如何修改照片背景颜色
在"美化"的"调色"里可以改变图片颜色.
- Android实现仿美图秀秀给图片加框
// 花色边框 public Bitmap getBitmapHuaSeBianKuang(Bitmap bitmap) { float frameSize = 0.5f * getFrameS ...
- 潇洒郎:GMIP——美图秀秀——两种方法——图片透明化,游戏界面人物,对象需要透明
今天跟大家分享一下如何将图片处理为透明化.因为做游戏界面的时候我们为了不让界面显得很突兀.看起来不和谐,所以需要将图片该透明的透明. 先说下图片小知识: 将图片划分为4维通道:RGBA.其中RGB代表 ...
- 快手、抖音威胁下,美图秀秀转型影像社交的新故事怎么讲?
近日,美图秀秀发布了8.0版本,不仅启用了全新的品牌标识,而且增加了社交圈功能,美图秀秀至此从图片处理工具转型为影像社交平台.美图的社交梦由来已久,社交布局上已有短视频平台美拍,如今又尝试将美图秀秀打 ...
- 怎么把html背景换白色,美图秀秀怎么将图片背景替换成白色?
美图秀秀是一款优秀的图片处理软件,在美图秀秀软件中,我们可以将图片进行各种各样的美化处理,本篇经验中我将向大家介绍一下,如何将图片的背景替换为白色,好了,我们的教程就正式开始咯,大家速来围观我的经验啦 ...
最新文章
- Wireshark数据包分析之TCP协议包解读
- 用python绘制柱状图标题-Python笔记:用Python绘制炫酷的柱形图
- sqlserver安装检测不通过 (重新启动失败)
- [LeetCode] Find Largest Value in Each Tree Row 找树每行最大的结点值
- esp8266接收到的数据如何存放到数组中_Java中HashMap的实现原理
- 用java统计任一书名次数_Java入门第三季 借书系统源代码 加入了限制重输次数 欢迎指教交流...
- Swift - 键盘弹出样式
- Linux与Ubuntu上SQL Server 2019
- Web常用字體-Font-Family
- 详述 PROCEDURES_ICD 患者手术情况表 (七)
- 程序员面试被问“你的缺点是什么”,该怎么回答?
- 一步步教你Windows配置ISCSI共享存储
- flask中ajax的使用,jquery – 使用ajax时,Flask flash消息不再有效
- JAVA实现Excel照相机功能_Excel如何将工作表转换为图片,并随着数据的变化自动更新?...
- SEDA源码解读(二)
- 找回孩子丢失的阅读时光(转自中国文明网)
- 三轮全向移动机器人的控制方法
- java读取并修改xml文件
- ET框架-16 ET框架登录账号请求逻辑编写(1)
- 计算机毕业设计node+vue基于微信小程序的西餐外卖系统