Нарисуйте округленный UIView с градиентом и тень

Ответ 1

Чтобы создать закругленный угловой вид с фоном градиента и тени, вот что:

Первая часть очень похожа на то, что было предоставлено в вопросе, она создает округленный прямой путь, используя CGPathAddArcToPoint, как описано очень хорошо в этой статье. Вот картина, которая поможет мне понять это:

Вторая часть работает следующим образом:

Включить затенение графического контекста, добавить только что определенный путь, затем заполнить этот путь. Вы не можете применять тень только к самому пути (пути не являются частью состояния графики), поэтому вам нужно заполнить путь, чтобы тень появилась (я полагаю, что путь с гладкими тоже может работать?). Вы не можете просто применить тень к градиенту, так как это не стандартная заливка (см. этот пост для получения дополнительной информации).

Как только у вас есть заполненный закругленный прямоугольник, который создает тень, вам нужно нарисовать градиент над этим. Поэтому добавьте путь во второй раз, чтобы установить область отсечения, затем нарисуйте градиент с помощью CGContextDrawLinearGradient. Я не думаю, что вы можете легко "заполнить" путь с помощью градиента, как вы могли бы, с более раннего этапа заполнения стандартного заполнения, поэтому вместо этого вы заполняете область рисования градиентом, а затем клип в область округленного прямоугольника, которая вам интересна в.

- (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;
}

Ответ 2

У меня есть решение, которое не нуждается в предварительном заполнении пути. Преимущество (?) Заключается в том, что тень может использовать эффекты прозрачности градиента (т.е. Если градиент от непрозрачного до прозрачного, тень также будет частично прозрачна) и проще.

Это более или менее похоже:

CGContextSetShadowWithColor();
CGContextBeginTransparencyLayer();

CGContextSaveGState();
CGContextClip();
CGGradientCreateWithColorComponents();
CGContextRestoreGState();

CGContextEndTransparencyLayer();
CGContextSetShadowWithColor(..., NULL);

Я предполагаю, что это beacuse CGContextBeginTransparencyLayer/CGContextEndTransparencyLayer находится за клипом, и тень применяется к этому слою (который содержит путь, заполненный градиентом). По крайней мере, это работает для меня.

Ответ 3

Для теней вы можете использовать CGContextSetShadow()

Этот код будет рисовать что-то с тенью:

- (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);
}

Ответ 4

Ваша (оригинальная) проблема заключалась в том, что вы снова рисовали тень, когда рисовали градиент. Эта тень имела (0,0) смещение и немного размытия, которое только светит на углах. В строке перед CGContextDrawLinearGradient (...) добавьте следующее:

CGContextSetShadowWithColor(context, CGSizeMake(0, 0), 0, NULL);

Значение значения NULL отключает затенение и удаляет угловой эффект.