当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS仿擦玻璃效果的实现方法

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

照例先看下效果图

实现思路

动手前先想了下思路，就是利用母鸡哥讲的涂鸦 + 设置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开发者们能有所帮助，如果有疑问大家可以留言交流。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网