Draw / draw as sketch color inside bezier path in UIView

Question

I draw a form layer using the UIBezier Path on a UIView:

CAShapeLayer *pathLayer = [CAShapeLayer layer]; pathLayer.frame=CGRectMake(-view.frame.origin.x, -view.frame.origin.y, view.frame.size.width, view.frame.size.height); pathLayer.path = path.CGPath; pathLayer.strokeColor = [[UIColor blackColor] CGColor]; pathLayer.fillColor = [[UIColor clearColor] CGColor]; //pathLayer.fillColor = nil; pathLayer.lineWidth = 6.0; pathLayer.lineJoin = kCALineJoinBevel; [view.layer addSublayer:pathLayer]; 

On touch points, I want to draw this UIView, for this I do:

 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch=[touches anyObject]; CGPoint touchBeganPoint; touchBeganPoint=[touch locationInView:self]; actionString=@ "drawPencil"; previousPoint1 = [touch locationInView:self]; previousPoint2 = [touch locationInView:self]; currentPoint = [touch locationInView:self]; [self touchesMoved:touches withEvent:event]; } -(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { UITouch *touch = [touches anyObject]; previousPoint2 = previousPoint1; previousPoint1 = currentPoint; currentPoint = [touch locationInView:self]; [self calculateMinImageArea:previousPoint1 :previousPoint2 :currentPoint]; } CGPoint midPoint(CGPoint p1, CGPoint p2) //helper function { return CGPointMake((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5); } - (void)calculateMinImageArea:(CGPoint)pp1 :(CGPoint)pp2 :(CGPoint)cp { // calculate mid point CGPoint mid1 = midPoint(pp1, pp2); CGPoint mid2 = midPoint(cp, pp1); CGMutablePathRef path = CGPathCreateMutable(); CGPathMoveToPoint(path, NULL, mid1.x, mid1.y); CGPathAddQuadCurveToPoint(path, NULL, pp1.x, pp1.y, mid2.x, mid2.y); CGRect bounds = CGPathGetBoundingBox(path); CGPathRelease(path); CGRect drawBox = bounds; //Pad our values so the bounding box respects our line width drawBox.origin.x -= 20 * 1.5; drawBox.origin.y -= 20 * 1.5; drawBox.size.width += 20 * 2.5; drawBox.size.height += 20 * 2.5; UIGraphicsBeginImageContextWithOptions(drawBox.size, NO, 0); [self.layer renderInContext:UIGraphicsGetCurrentContext()]; curImage = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); // generate the if conditionover here and than check and draw over paths [self setNeedsDisplayInRect:drawBox]; [[NSRunLoop currentRunLoop] runMode:NSRunLoopCommonModes beforeDate: [NSDate date]]; } -(void)drawRect:(CGRect)rect { CGPoint mid1 = midPoint(previousPoint1, previousPoint2); CGPoint mid2 = midPoint(currentPoint, previousPoint1); [curImage drawAtPoint:CGPointMake(0, 0)]; CGContextRef context = UIGraphicsGetCurrentContext(); CALayer *layer=[self.layer.sublayers objectAtIndex:0]; [self.layer renderInContext:context]; CGContextMoveToPoint(context, mid1.x, mid1.y); CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y); CGContextSetLineCap(context, kCGLineCapRound); CGContextSetBlendMode(context, kCGBlendModeNormal); CGContextSetLineJoin(context, kCGLineJoinRound); CGContextSetLineWidth(context, 20); CGContextSetStrokeColorWithColor(context,[UIColor redColor].CGColor); CGContextSetShouldAntialias(context, YES); CGContextSetAllowsAntialiasing(context, YES); CGContextSetFlatness(context, 1.f); CGContextSetAlpha(context,1.0); CGContextStrokePath(context); [super drawRect:rect]; } 

Now, when I draw self.layer, it still produces the added sublevel (form layer). I want to draw only inside this path, I can’t go with [path containspoint ..], as in draw rect, the image I draw has some width and crosses the path or sometimes breaks its course.

One way to achieve this is to clip the UIView with its sublayer (CAShapelayer) and thus draw it again on uiview (this will clear the background separately from the form layer area). But cannot find how to pin it using CAShapeLayer.

Any suggestions or insights on how to achieve this smoothly can be of great help. Thanks!

Answer 1

I took another image, which is a snapshot of the view with the desired track, filled with the selected color. Then the drawrect called with the same code moves with the taps except for [UIColor colorWithPatternImage: img] as the context color. Drawing in UIView on touch points gives the effect of drawing a fade out at the borders