Draw CAShapeLayer LAYER without the fillColor

Question

Hi I draw a line and detect when the line is touched on "touches moved". This works ok, but the yellow part is is taken as a part of the line

I need to delete the yellow part of the image..... This is a property called fillColor of the component, i assign this property to nil, but still is taken as a part of the line

This is the code i'm working on:

    self.path                = [UIBezierPath bezierPath];
    [self.path moveToPoint:CGPointMake(10, 150)];
    [self.path addCurveToPoint:CGPointMake(110, 150) controlPoint1:CGPointMake(40,  100)    controlPoint2:CGPointMake(80,  100)];
    [self.path addCurveToPoint:CGPointMake(210, 150) controlPoint1:CGPointMake(140, 200) controlPoint2:CGPointMake(170, 200)];
    [self.path addCurveToPoint:CGPointMake(310, 150) controlPoint1:CGPointMake(250, 100) controlPoint2:CGPointMake(280, 100)];
    //[self.path addCurveToPoint:CGPointMake(310, 150) controlPoint1:CGPointMake(250, 100) controlPoint2:CGPointMake(280, 100)];

     self.layer               = [CAShapeLayer layer];
     self.layer.lineWidth     = 10;
     self.layer.strokeColor   = [UIColor redColor].CGColor;
     self.layer.fillColor     = [UIColor yellowColor].CGColor;
     self.layer.path          = self.path.CGPath;
     self.layer.shadowOffset  = CGSizeZero;
     self.layer.lineCap       = kCALineCapRound;
     self.layer.fillRule      = @"non-zero";
     [self.view.layer addSublayer: self.layer];

This property:

         self.layer.fillColor     = [UIColor yellowColor].CGColor; 

The touch event:

-(void)DetectTouchedDraw :(NSSet *)touches withEvent:(UIEvent *)event
{
     for (UITouch *touch in touches)
     {
         CGPoint touchLocation = [touch locationInView:self.view];

         if ([self.path containsPoint:touchLocation]) {

             NSLog(@": %@",@"Touched");
         }
     }
}

I already tried to set to nil, the color and nothing is shown, only the red line, this is correct, but the touched moved returns true where would be the yellow part.... Is it possible to delete or initialize the line.. without this section of the figure? Thanks in advance

Answer 1

The way you are drawing the path has nothing to do with the way it is being hit-tested. When you check if the path contains a point it will check if the point is inside of the fill area, even if you don't have a fill color when you are drawing the path.

Instead what you need to do is to generate a new path, where the fill area is the stroked path. You can do this in Core Graphics (CGPath instead of UIBezierPath) by calling CGPathCreateCopyByStrokingPath():

// Create a new path by stroking the Bézier path
// Note: since you are drawing the path using a shape layer you should get the appearance from there 
CGPathRef tapTargetPath = 
    CGPathCreateCopyByStrokingPath(yourUIBezierPath.CGPath,
                                   NULL, // don't transform the path
                                   fmaxf(35.0, yourShapeLayer.lineWidth), // if the path is thin you probably want a thicker stroke (like 35 points) for hit testing
                                   yourShapeLayer.lineCap,
                                   yourShapeLayer.lineJoin, 
                                   yourShapeLayer.miterLimit);

You can read more about all of this in Ole Begemman's CGPath Hit Testing post