The method of realizing the effect of IOS imitation glass _ios

Look at the effect chart first.

Realize the idea

Before starting to think of the idea, that is, using the hen-said graffiti + set layer mask way, this can be said to be very simple. Then it took half the afternoon to write, the effect is basically the same as the great God wrote, and compared the amount of code, I write is really simple and clear ah, with less than half the code of God's code to complete the same function, the mood of pleasure. And then I ran again. The application of the great God looked at CPU utilization (I ran with 5s), about the highest stay in the hundred more than 10, feeling a bit high but also can, and then run my own write, I was a big surprise, casually row a few on the 40 +, so small things consume so much CPU that this is too low ...

Bug Test and resolution

After testing, found that the hen brother said graffiti has performance problems, although the code simple, clear thinking, but as the touch of the screen point of increasing, the entire rendering complexity is also an exponential rise, resulting in the result is a very serious CPU consumption. So about drawing pictures I have to think of other ways to achieve. But I meditated for a day and did not find a good way to reduce the complexity of the drawing (except for the Great God method), of course, the final solution is very simple, yes, is the copy of the Great God method.

The following highlights the great God's solution to the problem of graffiti CPU consumption (here is the focus):

Graphics context: Instead of using layer's default graphics contexts (that is drawRect UIGraphicsGetCurrentContext() , getting them in a method), you create a global bitmap context

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

When you touch the screen ( touchesBegan , and touchesMoved so on, according to the location of the touch, each of the two points between the lines, drawn to the above established graphics context, so that with the touch screen, as the graphics context to draw, will not be drawn before adding to the painting, to solve the problem of excessive performance consumption.

#pragma mark-touch-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event {uitouch* touch = [Touches anyobj 
 ECT];
[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; }

Finally realize

The final set mask is very simple, set the picture we will display (the clear) of the layer mask for the above by drawing the generated image of the layer, so that only the place to be painted to see the picture will be displayed, the function is completed, I feel like using this little trick to do a lot of interesting things (like scraping awards, etc.)

 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;

At last

Don't forget to release the associated memory

-(void) dealloc{
 if (_imagecontext!= NULL) {
  cfrelease (_imagecontext);
 }

 if (_colorspace!= NULL) {
  cfrelease (_colorspace);
 }
}

Demo Address: Https://github.com/yuchuanfeng/CFScratchViewDemo

Summarize

The above is the use of iOS imitation glass effect of all the content, interested friends can do their own operation, so as to more conducive to understanding and learning, I hope this article for your iOS developers can help, if you have questions you can message exchange.