Dessiner une forme arrondie UIView avec gradient et de l'ombre portée

Afin de créer un arrondi d'angle de vue avec un arrière-plan en dégradé et de l'ombre portée, voici ce qu'il a fait:

La première partie est très similaire à ce qui est prévu dans la question, il crée un arrondi le rectangle tracé à l'aide de CGPathAddArcToPoint comme le décrit très bien dans cet article. Voici une photo pour m'aider à comprendre:

La deuxième partie se déroule comme suit:

Permettre l'ombrage sur le contexte graphique, ajoutez le chemin d'accès a été défini, puis de remplir ce chemin. Vous ne pouvez pas appliquer de l'ombre à juste le chemin lui-même (les chemins ne font pas partie de l'état graphique), de sorte que vous devez remplir la voie de l'ombre à apparaître (je suppose que le chemin d'un contour peut également travailler?). Vous ne pouvez pas il suffit d'appliquer de l'ombre à un gradient puisqu'il n'est pas vraiment un standard de remplissage (voir ce post pour plus d'info).

Une fois que vous avez rempli arrondie rect qui crée de l'ombre, vous avez besoin de tirer le dégradé sur le dessus de cela. Ajoutez le chemin d'accès un deuxième temps, afin de régler la saturation de la zone, puis tracez le dégradé à l'aide de CGContextDrawLinearGradient. Je ne pense pas que vous pouvez facilement "remplir" un chemin avec un dégradé comme vous pourrait avec le plus haut standard-étape de remplissage, de sorte qu'au lieu de vous remplir la zone de dessin avec le dégradé et puis le clip rectangle arrondi de la zone qui vous intéresse.

- (void)drawRect:(CGRect)rect 
{
[super drawRect:rect];
CGGradientRef gradient = [self normalGradient];
CGContextRef ctx = UIGraphicsGetCurrentContext(); 
CGMutablePathRef outlinePath = CGPathCreateMutable(); 
float offset = 5.0;
float w  = [self bounds].size.width; 
float h  = [self bounds].size.height; 
CGPathMoveToPoint(outlinePath, nil, offset*2.0, offset); 
CGPathAddArcToPoint(outlinePath, nil, offset, offset, offset, offset*2, offset); 
CGPathAddLineToPoint(outlinePath, nil, offset, h - offset*2.0); 
CGPathAddArcToPoint(outlinePath, nil, offset, h - offset, offset *2.0, h-offset, offset); 
CGPathAddLineToPoint(outlinePath, nil, w - offset *2.0, h - offset); 
CGPathAddArcToPoint(outlinePath, nil, w - offset, h - offset, w - offset, h - offset * 2.0, offset); 
CGPathAddLineToPoint(outlinePath, nil, w - offset, offset*2.0); 
CGPathAddArcToPoint(outlinePath, nil, w - offset , offset, w - offset*2.0, offset, offset); 
CGPathCloseSubpath(outlinePath); 
CGContextSetShadow(ctx, CGSizeMake(4,4), 3); 
CGContextAddPath(ctx, outlinePath); 
CGContextFillPath(ctx); 
CGContextAddPath(ctx, outlinePath); 
CGContextClip(ctx);
CGPoint start = CGPointMake(rect.origin.x, rect.origin.y);
CGPoint end = CGPointMake(rect.origin.x, rect.size.height);
CGContextDrawLinearGradient(ctx, gradient, start, end, 0);
CGPathRelease(outlinePath);
}
- (CGGradientRef)normalGradient
{
NSMutableArray *normalGradientLocations = [NSMutableArray arrayWithObjects:
[NSNumber numberWithFloat:0.0f],
[NSNumber numberWithFloat:1.0f],
nil];
NSMutableArray *colors = [NSMutableArray arrayWithCapacity:2];
UIColor *color = [UIColor colorWithRed:0.2745 green:0.2745 blue:0.2745 alpha:1.0];
[colors addObject:(id)[color CGColor]];
color = [UIColor colorWithRed:0.2 green:0.2 blue:0.2 alpha:1.0];
[colors addObject:(id)[color CGColor]];
NSMutableArray  *normalGradientColors = colors;
int locCount = [normalGradientLocations count];
CGFloat locations[locCount];
for (int i = 0; i < [normalGradientLocations count]; i++)
{
NSNumber *location = [normalGradientLocations objectAtIndex:i];
locations[i] = [location floatValue];
}
CGColorSpaceRef space = CGColorSpaceCreateDeviceRGB();
CGGradientRef normalGradient = CGGradientCreateWithColors(space, (CFArrayRef)normalGradientColors, locations);
CGColorSpaceRelease(space);
return normalGradient;
}

OriginalL'auteur beno

Pour les ombres, vous pouvez utiliser CGContextSetShadow()

Ce code permet de dessiner quelque chose avec une ombre:

- (void)drawTheRealThingInContext:(CGContextRef)ctx 
{   
//calculate x, y, w, h and inset here...
CGContextMoveToPoint(ctx, x+inset, y);
CGContextAddLineToPoint(ctx, x+w-inset, y);
CGContextAddArcToPoint(ctx, x+w, y, x+w, y+inset, inset);
CGContextAddLineToPoint(ctx, x+w, y+w-inset);
CGContextAddArcToPoint(ctx,x+w, y+w, x+w-inset, y+w, inset);
CGContextAddLineToPoint(ctx, x+inset, y+w);
CGContextAddArcToPoint(ctx,x, y+w, x, y+w-inset, inset);
CGContextAddLineToPoint(ctx, x, y+inset);
CGContextAddArcToPoint(ctx,x, y, x+inset, y, inset);    
}
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat color[4];color[0] = 1.0;color[1] = 1.0;color[2] = 1.0;color[3] = 1.0;
CGFloat scolor[4];scolor[0] = 0.4;scolor[1] = 0.4;scolor[2] = 0.4;scolor[3] = 0.8;
CGContextSetFillColor(ctx, color);
CGContextSaveGState(ctx);
CGSize  myShadowOffset = CGSizeMake (3,  -3);
CGContextSetShadow (ctx, myShadowOffset, 1);
CGContextBeginPath(ctx);
[self drawTheRealThingInContext:ctx];
CGContextFillPath(ctx);
CGContextRestoreGState(ctx);
}

OriginalL'auteur Eiko