Wie Maske ein quadratisches Bild in ein Bild mit Runden Ecken in iOS?

Können Sie verwenden, CoreGraphics, um einen Weg für ein abgerundetes Rechteck, das mit diesem code-snippet:

static void addRoundedRectToPath(CGContextRef context, CGRect rect, float ovalWidth, float ovalHeight)
{
    float fw, fh;
    if (ovalWidth == 0 || ovalHeight == 0) {
        CGContextAddRect(context, rect);
        return;
    }
    CGContextSaveGState(context);
    CGContextTranslateCTM (context, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGContextScaleCTM (context, ovalWidth, ovalHeight);
    fw = CGRectGetWidth (rect) / ovalWidth;
    fh = CGRectGetHeight (rect) / ovalHeight;
    CGContextMoveToPoint(context, fw, fh/2);
    CGContextAddArcToPoint(context, fw, fh, fw/2, fh, 1);
    CGContextAddArcToPoint(context, 0, fh, 0, fh/2, 1);
    CGContextAddArcToPoint(context, 0, 0, fw/2, 0, 1);
    CGContextAddArcToPoint(context, fw, 0, fw, fh/2, 1);
    CGContextClosePath(context);
    CGContextRestoreGState(context);
}

Dann rufen Sie CGContextClip(context); clip es auf das Rechteck Weg. Jetzt eine Zeichnung gemacht, einschließlich der Zeichnung ein Bild wird abgeschnitten, um das Runde Rechteck-Form.

Als ein Beispiel, davon ausgehend, "Bild" ist ein UIImage, und dies ist in drawRect: - Methode:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
addRoundedRectToPath(context, self.frame, 10, 10);
CGContextClip(context);
[image drawInRect:self.frame];
CGContextRestoreGState(context);

Ich weiß, dies ist eine alte Nachricht, aber nur, um zu Kochen es ein wenig nach unten:

Gibt es zwei mögliche Fragen hier: (1) wie bewerbe ich mich abgerundeten Ecken, um eine UIView (wie ein UIImageView), die auf dem Bildschirm angezeigt werden, und (2) wie kann ich die Maske ein quadratisches Bild (das heißt, dass ein UIImage) zu erzeugen, um ein neues Bild mit abgerundeten Ecken.

Für (1), der einfachste Weg ist die Verwendung von CoreAnimation und legen Sie die Ansicht.Schicht.cornerRadius-Eigenschaft

 //Because we're using CoreAnimation, we must include QuartzCore.h
 //and link QuartzCore.framework in a build phases 
 #import <QuartzCore/QuartzCore.h> 

 //start with an image 
 UIImage * fooImage = [UIImage imageNamed:@"foo.png"];
 //put it in a UIImageView
 UIView * view = [UIImageView alloc] initWithImage:fooImage];
 //round its corners. This mask now applies to the view's layer's *background*
 view.layer.cornerRadius = 10.f
 //enable masksToBounds, so the mask applies to its foreground, the image
 view.layer.masksToBounds = YES;

For (2), der beste Weg ist die Nutzung der UIKit-Grafik-Operationen:

//start with an image 
UIImage * fooImage = [UIImage imageNamed:@"foo.png"];
CGRect imageRect = CGRectMake(0, 0, fooImage.size.width, fooImage.size.height);
//set the implicit graphics context ("canvas") to a bitmap context for images
UIGraphicsBeginImageContextWithOptions(imageRect.size,NO,0.0);
//create a bezier path defining rounded corners
UIBezierPath * path = [UIBezierPath bezierPathWithRoundedRect:imageRect cornerRadius:10.f];
//use this path for clipping in the implicit context
[path addClip];
//draw the image into the implicit context
[fooImage drawInRect:imageRect];
//save the clipped image from the implicit context into an image 
UIImage *maskedImage = UIGraphicsGetImageFromCurrentImageContext();
//cleanup
UIGraphicsEndImageContext();

Was ist schwierig zu problem (2) ist, dass Sie vielleicht denken, Sie könnten die ganze operation mit der Ansicht.Schicht.mask-Eigenschaft in CoreAnimation. Aber Sie können nicht, weil die CALayer renderInContext: Methode, die Sie verwenden würden, um erzeugen ein UIImage von der maskierten Ebene, scheint zu ignorieren, die Maske. Schlimmer ist, dass die Dokumentation für renderInContext: nicht erwähnen, und nur eine Anspielung auf das Verhalten für OSX 10.5.

Einige weitere Kontext: die obigen Ansatz (2) ist mit UIKit ist Wrapper um mehr basic CoreGraphics Funktionalität. Sie können das gleiche tun mit der CoreGraphics Aufrufe direkt – das ist das, was die gewählte Antwort zu tun-aber dann müssen Sie bauen das abgerundete Rechteck Bézier-Pfad manuell aus Kurven und Linien, und Sie müssen auch einen Ausgleich für die Tatsache, dass CoreGraphics verwendet eine Zeichnung, Koordinatensystem, welches gespiegelt wird, mit Bezug auf UIKit ist.

Sehr einfach.
selbst.profileImageView.Schicht.cornerRadius = selbst.profileImageView.frame.Größe.- Breite /2;
selbst.profileImageView.clipsToBounds = JA;

Für jede Ansicht gibt es eine gebündelte layer-Eigenschaft. Also die erste Zeile der oben ist um die Ecke-radius um das layer-Objekt (d.h. eine Instanz der Klasse CALayer). Um ein rundes Bild von einem quadratischen Bild, das den radius festgelegt ist, um die Hälfte der Breite des UIImageView. Zum Beispiel, wenn die Breite der quadrierten Bild ist 100 Pixel. Der radius ist 50 Pixel. Zweitens, müssen Sie die clipsToBounds-Eigenschaft auf JA, um die Schicht funktioniert.

Ich diese Methode verwenden.

+ (UIImage *)imageWithColor:(UIColor *)color andSize:(CGSize)size;
    {
      UIImage *img = nil;


        CGRect rect = CGRectMake(0, 0, size.width, size.height);
        UIGraphicsBeginImageContext(rect.size);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextSetFillColorWithColor(context,
                                     color.CGColor);
        CGContextFillRect(context, rect);
        img = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();


      return img;
    }