How to fill color inside UIBezierPath?

LE SANG picture LE SANG · Mar 12, 2013 · Viewed 26.3k times · Source

I draw a shape by UIBezierPath in touchesMoved.

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    secondPoint = firstPoint;
    firstPoint = [touch previousLocationInView:self];
    currentPoint = [touch locationInView:self];

    CGPoint mid1 = midPoint(firstPoint, secondPoint);
    CGPoint mid2 = midPoint(currentPoint, firstPoint);

    [bezierPath moveToPoint:mid1]; 
    [bezierPath addQuadCurveToPoint:mid2 controlPoint:firstPoint];

    [self setNeedsDisplay]; 
}

I want to fill RED color inside it after closePath but can't. Please help!

- (void)drawRect:(CGRect)rect
{
    UIColor *fillColor = [UIColor redColor];
    [fillColor setFill];
    UIColor *strokeColor = [UIColor blueColor];
    [strokeColor setStroke];
    [bezierPath closePath];
    [bezierPath fill];
    [bezierPath stroke]; 
}

Answer

Abizern picture Abizern · Mar 12, 2013

If you have a bezier path stored elsewhere, this should work:

Edit

Looking at your edited code, what is happening is that as you are closing the path that you are drawing is getting closed - so you get a line, not a shape since you have only two points.

One way around this is to create the path as your points move, but stroke and fill a copy of that path. For example this is untested code, I'm writing it straight in

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [touches anyObject];
    secondPoint = firstPoint;
    firstPoint = [touch previousLocationInView:self];
    currentPoint = [touch locationInView:self];

    CGPoint mid1 = midPoint(firstPoint, secondPoint);
    CGPoint mid2 = midPoint(currentPoint, firstPoint);

    [bezierPath moveToPoint:mid1]; 
    [bezierPath addQuadCurveToPoint:mid2 controlPoint:firstPoint];

    // pathToDraw is an UIBezierPath * declared in your class
    pathToDraw = [[UIBezierPath bezierPathWithCGPath:bezierPath.CGPath];

    [self setNeedsDisplay]; 
}

And then your drawing code can:

- (void)drawRect:(CGRect)rect {
    UIColor *fillColor = [UIColor redColor];
    [fillColor setFill];
    UIColor *strokeColor = [UIColor blueColor];
    [strokeColor setStroke];

    // This closes the copy of your drawing path.
    [pathToDraw closePath];

    // Stroke the path after filling it so that you can see the outline
    [pathToDraw fill]; // this will fill a closed path
    [pathToDraw stroke]; // this will stroke the outline of the path.

}

There is some tidying up to do an touchesEnded and this could be made more performant, but you get the idea.