Question

I like to draw a glass with a few Elements
– Top Ellipse
– Bottom Ellipse
– and the Lines Inbetween

Next, it should be filled with a Gradient. The Elements work, but at the point, where the middle of the glass comes in touch with the top or bottom ellipse the area get’s clipped.

- (void)drawRect:(CGRect)rect
{
    CGPoint c = self.center;    
    // Drawing code
    CGContextRef cx = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(cx, 1.0);
    [[UIColor whiteColor] setStroke];

    //  DrawTheShapeOfTheGlass
    CGContextBeginPath(cx);
    //  Top and Bottom Ellipse
    CGContextAddEllipseInRect(cx, CGRectMake(0, 0, 100, 20));
    CGContextAddEllipseInRect(cx, CGRectMake(10, 90, 80, 20));
    //  Define the points for the Area inbetween
    CGPoint points[] = { {0.0,10.0},{10.0,100.0},{90.0,100.0},{100.0,10.0} };
    CGContextAddLines(cx, points, 4);
    CGContextClosePath(cx);
    //  Clip, that's only the Clipped-Area wil be filled with the Gradient
    CGContextClip(cx);

    //  CreateAndDraw the Gradient
    CGColorSpaceRef rgbColorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat colorSpace[] = {1.0f, 1.0f, 1.0f, 0.0f,
                        0.0f, 0.0f, 1.0f, 1.0f };
    CGFloat locations[] = { 0.0, 1.0 };

    CGGradientRef myGradient = CGGradientCreateWithColorComponents(rgbColorSpace, colorSpace, locations, 2);

    CGPoint s = CGPointMake(0, 0);
    CGPoint e = CGPointMake(100, 100);
    CGContextDrawLinearGradient(cx, myGradient, s, e, kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);

    CGColorSpaceRelease(rgbColorSpace);
    CGGradientRelease(myGradient);
}

Here how it looks like:

Is there any possibility to “fill” the whole ellipse? I played around with BlendModes but it didn’t help.

Thanks

Answer 1

Try replacing the points[] initialization code with the following…

CGPoint points[] = {{0.0,10.0},{100.0,10.0},{90.0,100.0},{10.0,100.0}};

CoreGraphics uses the non-zero winding count rule to determine how to fill a path. Since ellipses are drawn clockwise and your trapezoid was drawn counter clockwise, the overlapping regions were not filled. Changing the drawing order of the trapezoid to clockwise will result in an object that is completely filled.