如何使用线路path来绘制CALayer，如模拟橡皮擦效果？

我想通过触摸事件来模拟橡皮擦效果，以显示顶部背后的图像，例如灰色;

类似的东西：

我已经find了很长时间的解决scheme，但我做不到。

以下是我的自定义视图代码：CustomView.m：

-(id)initWithCoder:(NSCoder *)aDecoder { if (self = [super initWithCoder:aDecoder]) { [self setup]; } return self; } -(id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { [self setup]; } return self; } -(void)setup { [self setMultipleTouchEnabled:NO]; [self setBackgroundColor:[UIColor darkGrayColor]]; self.drawingPath = [UIBezierPath bezierPath]; [self.drawingPath moveToPoint:CGPointZero]; [self.drawingPath setLineWidth:5.0]; self.image = [UIImage imageNamed:@"transformers.jpg"]; self.shapeLayer = [CAShapeLayer layer]; self.caLayer = [CALayer layer]; self.caLayer.frame = self.bounds; self.caLayer.contents = (id)(self.image.CGImage); [self.layer addSublayer:self.caLayer]; } - (void)drawRect:(CGRect)rect { self.shapeLayer.path = [self.drawingPath CGPath]; self.caLayer.mask = self.shapeLayer; self.shapeLayer.lineWidth = 5.0; } -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:self]; [self.drawingPath moveToPoint:location]; lastPt = location; [self setNeedsDisplay]; NSLog(@"Touch Began"); } -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:self]; [self.drawingPath addLineToPoint:location]; [self setNeedsDisplay]; } -(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event { [self touchesMoved:touches withEvent:event]; } -(void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event { [self touchesMoved:touches withEvent:event]; } 

但是它只是模拟后面的图像填充path。 我想像图片一样成为橡皮擦效果。 请帮忙。

Answer 1

你的代码很接近，但是你需要的是一个灰色背景的自定义图层类，并且将path绘制成透明的。 你可以用这样的代码来做到这一点

RevealLayer.h

 @interface RevealLayer : CALayer @property (strong, nonatomic) UIBezierPath *drawingPath; @end 

RevealLayer.m

 @implementation RevealLayer - (UIBezierPath *)drawingPath { if ( !_drawingPath ) { _drawingPath = [UIBezierPath new]; [_drawingPath moveToPoint:CGPointZero]; [_drawingPath setLineWidth:20.0]; [_drawingPath setLineCapStyle:kCGLineCapRound]; } return( _drawingPath ); } - (void)drawInContext:(CGContextRef)context { UIGraphicsPushContext( context ); [[UIColor darkGrayColor] set]; CGContextFillRect( context, self.bounds ); CGContextSetBlendMode( context, kCGBlendModeClear ); [self.drawingPath stroke]; UIGraphicsPopContext(); } @end 

然后，自定义视图类的代码与您已有的代码类似。 但是，设置有点不同，你不需要实现drawRect:方法。

CustomView.m

 @interface CustomView() @property (strong, nonatomic) RevealLayer *revealLayer; @end @implementation CustomView - (void)setup { self.userInteractionEnabled = YES; [self setMultipleTouchEnabled:NO]; self.image = [UIImage imageNamed:@"transformers.jpg"]; self.revealLayer = [RevealLayer new]; self.revealLayer.frame = self.bounds; self.revealLayer.backgroundColor = [[UIColor clearColor] CGColor]; [self.revealLayer setNeedsDisplay]; [self.layer addSublayer:self.revealLayer]; } - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:self]; [self.revealLayer.drawingPath moveToPoint:location]; [self.revealLayer setNeedsDisplay]; } - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; CGPoint location = [touch locationInView:self]; [self.revealLayer.drawingPath addLineToPoint:location]; [self.revealLayer setNeedsDisplay]; }