iOS如何实现仿擦玻璃效果

来源:爱站网时间:2020-05-30编辑:网友分享
今天小编在网上看到ios系统的仿擦玻璃效果很不错,但是是不是有很多小伙伴们都不知道iOS如何实现仿擦玻璃效果呢?那么接下来我们就跟随爱站小编的脚步一起去看看吧。

今天小编在网上看到ios系统的仿擦玻璃效果很不错,但是是不是有很多小伙伴们都不知道iOS如何实现仿擦玻璃效果呢?那么接下来我们就跟随爱站小编的脚步一起去看看吧。

照例先看下效果图

实现思路

动手前先想了下思路,就是利用母鸡哥讲的涂鸦 + 设置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);

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

#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  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);
 }
}

以上就是iOS如何实现仿擦玻璃效果的内容,小编在这里将实现的步骤和示例代码分享给大家,有需要的朋友们可以参考借鉴。

上一篇:iOS开发定时器的方法

下一篇:iOS的回调方法

您可能感兴趣的文章

相关阅读

热门软件源码

最新软件源码下载