Draw/Paint like sketch color inside a bezier path in UIView

问题

I am drawing a shape layer with help of a 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 paint on that UIView, for that I am doing :

-(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 while I am drawing on self.layer ,it is still effecting the added sublayer(shape layer).I want to draw only inside this path , cant go with [path containspoint..] , as in draw rect ,the image i am drawing has some width and it crosses path or disturbs its stroke sometimes.

One way of achieving this is to clip the UIView with its sublayer(CAShapelayer) and thus drawing it again on uiview(this will clear the background apart from the shape layer area).But cant find how to clip it with CAShapeLayer.

Any suggestions or insight on how to achieve this smoothly could be of great help. Thank You !

回答1:

Took another image which is snapshot of view with desired path ,filled with selected color. Than on touches moved called drawrect with same code with a little exception of [UIColor colorWithPatternImage:img] as the color to context. Drawing in UIView on touch points gives blurr drawing effect on boundaries

来源：https://stackoverflow.com/questions/30658974/draw-paint-like-sketch-color-inside-a-bezier-path-in-uiview