Kakao zeichnen Bild mit abgerundeten Ecken und Schatten

Question

Ich versuche, ein Bild mit Core-Grafiken zu zeichnen, so dass es abgerundete Ecken und einen Schlagschatten hat. Hier ist ein Ausschnitt meines Codes:

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

Das Problem, das ich habe, ist, dass der Ausschnitt, um die abgerundeten Ecken zu schaffen, auch den Schatten beschneidet. Da das Bild in Bereichen transparent sein kann, kann ich das abgerundete Rechteck nicht einfach mit einem Schatten unter dem Bild zeichnen. Ich denke, ich muss zuerst die abgerundete Form auf das Bild anwenden und dann das resultierende Bild auf den Bildschirm zeichnen und den Schatten hinzufügen. Weiß jemand, wie man das macht?

Danke!

Answer 1

Okay, so unter der Annahme, dass Sie eine UIView Unterklasse haben, die eine Instanzvariable, Bild hat, das ein UIImage ist, dann können Sie Ihre drawRect tun: Funktion wie so ...

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

} 

I‘ Ich bin ein wenig neu in Quartz, wenn ich mich selbst programmieren soll, aber das sollte dir dein Bild geben, zentriert im Rechteck, minus einem Rand, mit einem Eckenradius und einem 2.f Punkt Schatten 2.f Punkte darunter. Ich hoffe, das hilft.

Answer 2

Sie eine Imageview mit einer Schicht verwenden können, hat die Schicht Eigenschaften für Schatten und Grenzen einstellen, das ist, wie:

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; 

hoffe, das hilft, diese auch dann zu ziehen, ist viel schneller mit drawRect überschreibt

Answer 3

Hier ist eine Funktion, um die Ecken eines Bildes mit Daniel Thorpe's Antwort zu runden, falls Sie hierher kommen, wie ich, nur auf der Suche nach einem Weg, dies zu tun.

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