脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS仿擦玻璃效果的实现

iOS仿擦玻璃效果的实现方法

 更新时间：2016年10月13日 11:19:11   作者：萌小菜  
最近在网上看到一个博客分享的这个效果很不错，就拿下来看看，结果看了好几遍也没完全看懂，再结合自己之前学的东西感觉不用这么复杂也能实现同样的效果，于是就开始动手了。现在将实现的步骤和示例代码分享给大家，有需要的朋友们可以参考借鉴。

照例先看下效果图

实现思路

动手前先想了下思路，就是利用母鸡哥讲的涂鸦 + 设置layer的mask的方式，这样做可以说是非常简单了。然后就用了半下午的时间写完了，效果基本和大神写得那个一样，而且对比了下代码量，我写得真是简单明了呀，用了不到大神代码量一半的代码就完成了同样的功能，心情愉悦。然后我又跑了大神的应用看了看cpu利用率（我用5s跑的），大约最高保持在百分这十几，感觉有点高但也可以，再跑我自己写得，令我大吃了一惊，随便划几下就百分之40+了，这么个小东西耗这么多cpu那这也太low了。。。

bug测试及解决

经过测试，发现是母鸡哥讲的涂鸦有性能问题，虽然代码简单，思路清晰，但是随着触摸屏幕的点不断增加，整个绘制复杂度也是呈指数上升，导致的结果就是耗cpu非常严重。所以关于绘制图片我不得不再想其它的方法实现。但是我冥想了一天时间也没有找到好的方法降低绘制的复杂度（除了大神的那个方法），当然最后的解决方法也非常简单了，没错，就是copy大神的方法。

下面着重介绍下大神的解决涂鸦cpu消耗问题方法(这里是重点)：

图形上下文：不再用layer的默认的图形上下文了（也就是在drawRect方法里面用UIGraphicsGetCurrentContext()获取的），而是自己创建一个全局的bitmap上下文

 self.imageContext = CGBitmapContextCreate(0, frame.size.width, frame.size.height, 8, frame.size.width * 4, self.colorSpace, kCGImageAlphaPremultipliedLast);
 CGContextSetStrokeColorWithColor(self.imageContext,[UIColor redColor].CGColor);
 CGContextSetFillColorWithColor(self.imageContext, [UIColor redColor].CGColor);
 CGContextTranslateCTM(self.imageContext, 0.0f, self.bounds.size.height);
 CGContextScaleCTM(self.imageContext, 1.0f, -1.0f);

在触摸屏幕的时候（touchesBegan、touchesMoved等方法），根据触摸的位置，每两个点之间连线，绘制到上面建立的图形上下文当中，这样就是随着触摸屏幕，随着往图形上下文绘制，不会把之前已经绘制的再重新添加绘制，解决了性能消耗过高的问题。

#pragma mark - touch
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
 UITouch* touch = [touches anyObject]; 
 [self reCreateImageWithTouchDict:@{@"touch":touch, @"lineWidth":@(touch.majorRadius)}];
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
 UITouch* touch = [touches anyObject]; 
 [self reCreateImageWithTouchDict:@{@"touch":touch, @"lineWidth":@(touch.majorRadius)}];
}

- (UIImage *)reCreateImageWithTouchDict:(NSDictionary *)touchDict{
 UITouch* touch = touchDict[@"touch"];
 CGFloat lineWidth = [touchDict[@"lineWidth"] floatValue] * 0.5;
 if (lineWidth < 1.0) {
  lineWidth = 10;
 } 
 if (touch) { 
  CGPoint point = [touch locationInView:touch.view];
  if (touch.phase == UITouchPhaseBegan) {
   CGRect rect = CGRectMake(point.x - lineWidth, point.y - lineWidth, lineWidth*2, lineWidth*2);
   CGContextAddEllipseInRect(self.imageContext, rect);
   CGContextFillPath(self.imageContext);
   [self.points removeAllObjects];
   [self.points addObject:[NSValue valueWithCGPoint:point]]; 
  }else if (touch.phase == UITouchPhaseMoved){
   [self.points addObject:[NSValue valueWithCGPoint:point]];
   if (self.points.count > 2) {
    CGContextSetLineCap(self.imageContext, kCGLineCapRound);
    CGContextSetLineWidth(self.imageContext, 2 * lineWidth);
    do{
     CGPoint point0 = [(NSValue *)self.points[0] CGPointValue];
     CGPoint point1 = [(NSValue *)self.points[1] CGPointValue];
     CGContextMoveToPoint(self.imageContext, point0.x, point0.y);
     CGContextAddLineToPoint(self.imageContext, point1.x, point1.y);
     [self.points removeObjectAtIndex:0];
    }while (self.points.count > 2);  
   }
  }  
  CGContextStrokePath(self.imageContext);
 } 
 CGImageRef cgImage = CGBitmapContextCreateImage(self.imageContext);
 UIImage *image = [UIImage imageWithCGImage:cgImage];
 CGImageRelease(cgImage);
 return image;
}

最后实现

最后设置mask就非常简单了，设置我们将要显示的图片（那张清晰的）的layer的mask为上面通过绘制生成的image的layer，这样只有绘制过的位置才能看到将要显示的图片，功能就完成了，我感觉利用这个小技巧可以做很多有趣的东西（类似刮奖等）

 CALayer *mask = [CALayer layer];
 mask.contents = (id)image.CGImage;
 mask.anchorPoint = CGPointZero;
 mask.frame = self.bounds;
 self.imageView.layer.mask = mask;
 self.imageView.layer.masksToBounds = YES;

最后

别忘记释放相关内存

- (void)dealloc{
 if (_imageContext != NULL) {
  CFRelease(_imageContext);
 }

 if (_colorSpace != NULL) {
  CFRelease(_colorSpace);
 }
}

demo地址：https://github.com/yuchuanfeng/CFScratchViewDemo

总结

以上就是利用iOS模仿擦玻璃效果的全部内容，感兴趣的朋友们可以自己动手操作下，这样才能更利于理解和学习，希望这篇文章对各位iOS开发者们能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

相关文章

  • iOS 正则表达式判断手机号码、固话

    iOS 正则表达式判断手机号码、固话

    本文主要介绍了iOS 正则表达式判断手机号码、固话，以及匹配是否是移动/联通/电信手机号的方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • iOS 增加右侧按钮功能实例代码

    iOS 增加右侧按钮功能实例代码

    这篇文章主要介绍了iOS 增加右侧按钮功能实例代码,需要的朋友可以参考下
    2017-07-07
  • iOS长按UIlabel实现可复制功能

    iOS长按UIlabel实现可复制功能

    在我们日常的开发中经常会遇到一些小需求，比如需要长按控件来拷贝控件中得内容，所以这篇文章跟大家分享下iOS中长按UIlabel实现可复制功能的方法，有需要的朋友们可以参考借鉴。
    2016-09-09
  • 浅谈iOS关于头文件的导入问题

    浅谈iOS关于头文件的导入问题

    本篇文章主要介绍了浅谈iOS关于头文件的导入问题，具有一定的参考价值，有兴趣的可以了解一下。
    2017-04-04
  • IOS自带Email的两种方法实例详解

    IOS自带Email的两种方法实例详解

    这篇文章主要介绍了IOS自带Email的两种方法实例详解的相关资料,需要的朋友可以参考下
    2017-06-06
  • iOS Label实现文字渐变色效果

    iOS Label实现文字渐变色效果

    文字渐变色可以使整体的效果更上一个档次，最近在开发中就遇到了这个需求，所以整理出来，下面这篇文章主要给大家介绍了关于iOS Label实现文字渐变色效果的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-05-05
  • Flutter GetPageRoute实现嵌套导航学习

    Flutter GetPageRoute实现嵌套导航学习

    这篇文章主要为大家介绍了Flutter GetPageRoute实现嵌套导航的示例学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • iOS使用UIScrollView实现无限循环轮播图效果

    iOS使用UIScrollView实现无限循环轮播图效果

    这篇文章主要介绍了iOS使用UIScrollView实现无限循环轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • iOS开发之UIScrollView控件详解

    iOS开发之UIScrollView控件详解

    UIScrollView是一个非常重要的控件,其可以展示比设备屏幕更大区域的内容,我们可以通过手指滑动来查看内容视图的每一部分内容,也可以通过手指捏合来对内容视图进行缩放操作，我们每天开发中都不断显式或隐式地与UIScrollView打交道，下面给大家详细介绍UIScrollView控件。
    2016-09-09
  • iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

    iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

    在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式，需要的朋友参考下吧
    2016-11-11

最新评论