Какао нарисовать изображение с закругленными углами и тени - PullRequest
Новая
       25

Какао нарисовать изображение с закругленными углами и тени

2 голосов
/ 08 января 2011

Я пытаюсь нарисовать изображение с использованием основной графики, чтобы оно имело закругленные углы и тень. Вот фрагмент моего кода: 

CGContextSetShadowWithColor(context, CGSizeMake(0, 1), 2, shadowColor);    
CGContextAddPath(context, path);
CGContextClip(context);
CGContextDrawImage(context, rect, image);

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

Спасибо!

Ответы [ 3 ]

11 голосов
/ 13 апреля 2011

Хорошо, если предположить, что у вас есть подкласс UIView, который имеет переменную экземпляра image, которая является UIImage, тогда вы можете выполнить свою функцию drawRect: следующим образом ... 

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGRect _bounds = [self bounds];
    CGColorRef aColor;
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Create a path
    CGRect insetRect = CGRectInset(_bounds, kBSImageButtonBorder, kBSImageButtonBorder);
    CGRect offsetRect = insetRect; offsetRect.origin = CGPointZero;

    UIGraphicsBeginImageContext(insetRect.size);
    CGContextRef imgContext = UIGraphicsGetCurrentContext();
    CGPathRef clippingPath = [UIBezierPath bezierPathWithRoundedRect:offsetRect cornerRadius:CORNER_RADIUS].CGPath; 
    CGContextAddPath(imgContext, clippingPath);
    CGContextClip(imgContext);  
    // Draw the image
    [image drawInRect:offsetRect];
    // Get the image
    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Setup the shadow
    aColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.5f].CGColor;
    CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 2.0f), 2.0f, aColor);     

    // Draw the clipped image in the context
    [img drawInRect:insetRect];

}

Я сам немного новичок в программировании на Quartz, но это должно дать вам ваше изображение, центрированное в прямоугольнике, за вычетом границы, с угловым радиусом, и 2.f точечная тень 2.f точки под ним. Надеюсь, это поможет.

3 голосов
/ 09 октября 2014

Вот функция для скругления углов изображения, используя ответ Дэниела Торпа, на случай, если вы пришли сюда, как и я, просто ищите способ сделать это. 

+ (UIImage *) roundCornersOfImage:(UIImage *)image toRadius:(float)radius {

    // create image sized context
    UIGraphicsBeginImageContext(image.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    // add rounded rect clipping path to context using radius
    CGRect imageBounds = CGRectMake(0, 0, image.size.width, image.size.height);
    CGPathRef clippingPath = [UIBezierPath bezierPathWithRoundedRect:imageBounds cornerRadius:radius].CGPath;
    CGContextAddPath(context, clippingPath);
    CGContextClip(context);

    // draw the image
    [image drawInRect:imageBounds];

    // get the image
    UIImage *outImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return outImage;
}
0 голосов
/ 11 марта 2013

Вы можете использовать imageView со слоем, слой имеет свойства для установки теней и границ, вот как: 

    self.imageView = [[NSImageView alloc] initWithFrame:NSMakeRect(0,0,60,60)];
    self.imageView.image = [NSImage imageNamed:@"yourImageName"];
    self.imageView.wantsLayer = YES;
    self.imageView.layer.cornerRadius = 10;
    //make the shadow and set it
    NSShadow* shadow = [[NSShadow alloc] init];
    shadow.shadowBlurRadius = 2;
    shadow.shadowOffset = NSMakeSize(2, -2);
    shadow.shadowColor = [NSColor blackColor];
    self.imageView.shadow = shadow;

Надеюсь, это поможет, это также намного быстрее рисовать, чем с помощью переопределений drawRect

...