2014-09-09 8 views
8

Ich füge das Overlay mit PickerControllers Ansicht und dem uinavigationcontrollerdelegate hinzu, wie unten gezeigt.Ein Bild auf die Form eines Overlays zuschneiden - iOS

-(void)navigationController:(UINavigationController *)navigationController didShowViewController: (UIViewController *)viewController animated:(BOOL)animated{ 
    if ([navigationController.viewControllers count] == 3) 
    { 
     CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height; 

     UIView *plCropOverlay = [[[viewController.view.subviews objectAtIndex:1]subviews] objectAtIndex:0]; 

     plCropOverlay.hidden = YES; 

     int position = 0; 

     if (screenHeight == 568) 
     { 
      position = 124; 
     } 
     else 
     { 
      position = 80; 
     } 

     CAShapeLayer *circleLayer = [CAShapeLayer layer]; 

     UIBezierPath *path2 = [UIBezierPath bezierPathWithOvalInRect: 
          CGRectMake(0.0f, position, 320.0f, 320.0f)]; 
     [path2 setUsesEvenOddFillRule:YES]; 

     [circleLayer setPath:[path2 CGPath]]; 

     [circleLayer setFillColor:[[UIColor clearColor] CGColor]]; 
     UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 320, screenHeight-72) cornerRadius:0]; 

     [path appendPath:path2]; 
     [path setUsesEvenOddFillRule:YES]; 

     CAShapeLayer *fillLayer = [CAShapeLayer layer]; 
     fillLayer.path = path.CGPath; 
     fillLayer.fillRule = kCAFillRuleEvenOdd; 
     fillLayer.fillColor = [UIColor blackColor].CGColor; 
     fillLayer.opacity = 0.8; 
     [viewController.view.layer addSublayer:fillLayer]; 

    } 
} 

Wenn das Overlay oben hinzugefügt wird definiert, neige ich dazu, diese Ansicht zu erhalten:

enter image description here

ich das Bild zuschneiden kann genau auf ein Quadrat mit einer definierten CGRect verwenden.

Wie wäre es mit diesem Problem, wo es eine kreisförmige Überlagerung gibt und imagePickers Bearbeitungseigenschaft JA ist? Ich kann das Bild vergrößern und verkleinern. Wie kann ich hier den BezierPath nutzen?

+0

Was genau ist das Ziel? Sie können nicht mit einem kreisförmigen Bild enden, also möchten Sie nur das Bild unter dem Overlay auf Weiß abwischen? Und wie hängt das Zoomen mit dem Overlay zusammen? Kannst du schon alleine mit dem Zoomen umgehen? – Wain

+0

Das UIImage-Objekt befindet sich oben auf einem Bildlauf mit einem Zoomskalenwert von 2,0. Wenn das Bild gezoomt ist und das Zuschneiden erwartet wird, sollte das gezoomte Bild innerhalb dieses Overlay-Freiraums abgeschnitten werden. – DesperateLearner

+0

Yup, es ist sehr sehr schwer, den Zoom richtig zu bekommen. Ich habe dir den ganzen Code gegeben, den du unten brauchst! – Fattie

Antwort

7

die kurze Antwort auf Ihre Frage addClip, aber Sie erwähnen, dass Sie ein Anfänger sind, also hier sind alle Schritte von A bis Z !!

Erstens, versuchen Sie diese Kategorie, sehen Sie, ob es hilft. (Wenn Sie nicht vertraut sind w/Kategorien haben eine Google oder fragen Sie einfach hier in einem Kommentar.)

-(UIImage *)doMask 
    { 
    UIImage *maskImage = [UIImage imageNamed:@"yourMask.png"]; 

    CGImageRef maskRef = maskImage.CGImage; 

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), 
     CGImageGetHeight(maskRef), 
     CGImageGetBitsPerComponent(maskRef), 
     CGImageGetBitsPerPixel(maskRef), 
     CGImageGetBytesPerRow(maskRef), 
     CGImageGetDataProvider(maskRef), NULL, false); 

    CGImageRef maskedImageRef = CGImageCreateWithMask([self CGImage], mask); 
    UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef]; 

    CGImageRelease(mask); 
    CGImageRelease(maskedImageRef); 

    return maskedImage; 
    } 

schaffen nur (ich meine in Photoshop) eine PNG-Maske, und mit diesem Prozess vertraut machen.

Ich möchte Sie ermutigen, diesen Prozess zu meistern erste ...

Hier sind kritische Kategorien, die helfen ...

-(UIImage *)becomeSquare 
    { 
    CGSize imageSize = self.size; 
    CGFloat width = imageSize.width; 
    CGFloat height = imageSize.height; 

    UIImage *result = self; 

    if (width != height) 
     { 
     CGFloat newDimension = MIN(width, height); 
     CGFloat widthOffset = (width - newDimension)/2; 
     CGFloat heightOffset = (height - newDimension)/2; 

     UIGraphicsBeginImageContextWithOptions(
      CGSizeMake(newDimension, newDimension), NO, 0.); 

     [result drawAtPoint:CGPointMake(-widthOffset, -heightOffset) 
      blendMode:kCGBlendModeCopy alpha:1. ]; 
     result = UIGraphicsGetImageFromCurrentImageContext(); 
     UIGraphicsEndImageContext(); 
     } 

    return result; 
    } 

und ein paar mehr ...

-(UIImage *)doScale 
    { 
    UIImage *result = self; 

    CGSize size = CGSizeMake(320,320); 
    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f); 
    [result drawInRect:CGRectMake(0.0f, 0.0f, size.width, size.height)]; 
    result = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return result; 
    } 

-(UIImage *)scaled640AnyShape 
    { 
    if (self.size.height < 5.0) return nil; 
    if (self.size.width < 5.0) return nil; 

    UIImage *result = self; 

    float widthShouldBe = 640.0; 
    float heightShouldBe = widthShouldBe * (self.size.height/self.size.width); 

    CGSize size = CGSizeMake(widthShouldBe ,heightShouldBe); 

    UIGraphicsBeginImageContextWithOptions(size, NO, 0.0f); 
    [result drawInRect:CGRectMake(0.0f, 0.0f, size.width, size.height)]; 
    result = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return result; 
    } 

(Ändern Sie natürlich die hartcodierten Ausgabegrößen wie gewünscht.)

Beachten Sie, dass Ihr endgültiges Ergebnis t, wird erreicht durch eine Kombination in der richtigen Reihenfolge, wie zum Beispiel:

yourImage = [yourImage doSquare]; 
yourImage = [yourImage doMask]; 

sobald Sie, dass die Arbeit hat ...

Dann ....

für BUCHSTäBLICH was Sie fragen, gibt es viele Beispiel-Codes über .. zB was https://stackoverflow.com/a/13870097/294884

Wie Sie Sie grundsätzlich sehen können, ...

UIGraphicsBeginImageContextWithOptions(...); 
UIBezierPath * path = [UIBezierPath 
    bezierPathWithRoundedRect:imageRect cornerRadius:10.f]; 
[path addClip]; 
[yourImage drawInRect:imageRect]; 
... then ... UIGraphicsGetImageFromCurrentImageContext(); 
.. see the extensive code above for how to save it and so on. 

Sie müssen nur mit den obigen Skalierungsbeispielen den Zoom vergrößern.

Auch dies beachten, wenn Sie den ... https://stackoverflow.com/a/17884863/294884

„Bereich abgeschnitten“ verändern

hier ist ein Beispiel für diese kritische Technik ...

-(UIImage *)squareAndSmall 
    { 
    // genius credits: https://stackoverflow.com/a/17884863/294884 

    CGSize finalsize = CGSizeMake(640,640); 

    CGFloat scale = MAX(
     finalsize.width/self.size.width, 
     finalsize.height/self.size.height); 
    CGFloat width = self.size.width * scale; 
    CGFloat height = self.size.height * scale; 

    // for example, the central area.... 
    CGRect imageRect = CGRectMake(
        (finalsize.width - width)/2.0f, 
        (finalsize.height - height)/2.0f, 
        width, height); 

    // or, the top area... CGRect imageRect = CGRectMake(0, 0, width, height); 

    UIGraphicsBeginImageContextWithOptions(finalsize, NO, 0); 
    [self drawInRect:imageRect]; 
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();  
    UIGraphicsEndImageContext(); 
    return newImage; 
    } 

Hoffen, dass es alles hilft!

0

Ich habe genau das gleiche Bild Picker Controller wie Ihre. Hier ist mein Code von Delegierten. Ich glaube nicht, alles was Sie brauchen, aber Sie können einige nützliche Informationen hier

-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info 
{ 
    NSString *mediaType = info[UIImagePickerControllerMediaType]; 

    if([mediaType isEqualToString:(NSString *) kUTTypeImage]) { 

     UIImage *image = info[UIImagePickerControllerOriginalImage]; 
     UIImage *editedImage = (UIImage *) [info objectForKey:UIImagePickerControllerEditedImage]; 
     CGRect croppingRect = [info[UIImagePickerControllerCropRect] CGRectValue]; 

     if (editedImage) { 
      image = editedImage; 
     } else { 
      CGFloat smaller = 1; 
      if (SYSTEM_VERSION_GREATER_THAN_OR_EQUAL_TO(@"7.0")) { 
       smaller = 0.9; 
      } 

      CGFloat width = MIN(image.size.width * smaller, image.size.height * (smaller * 0.95)); 
      croppingRect = CGRectMake(0 + (image.size.width - width)/2, 
             0 + (image.size.height - width)/2, 
             width, width); 
     } 

     UIImage *finalImage = nil; 
     if (editedImage) { 
      finalImage = [UIImage image:editedImage byScalingAndCroppingForSize:kCroppedImageSize]; 
     } else { 
      finalImage = [UIImage image:image byScalingAndCroppingForSize:kCroppedImageSize]; 
     } 

     if ([self.imagePickerDelegate respondsToSelector:@selector(profileImagePicker:didSelectImage:)]) { 
      [self.imagePickerDelegate profileImagePicker:self didSelectImage:finalImage]; 
     } else { 
      NSAssert(nil, @"Delegate should confirm ProfileImagePickerControllerDelegate protocol"); 
     } 

    } else if ([mediaType isEqualToString:(NSString *) kUTTypeVideo]) { 
     NSAssert(nil, @"Movie is not supported"); 
    } 
} 
2

Fand dieses blog post Eintrag sehr interessant, sauber und einfach zu folgen, indem Nimit Parekh finden.

Code Es folgt Kopieren/Einfügen in Ihre „viewcontroller.h“ file:

#import &lt;UIKit/UIKit.h&gt; 

@interface UIImagePickerDemoViewController : UIViewController&lt; UIImagePickerControllerDelegate, UINavigationControllerDelegate&gt; 

@property(nonatomic,retain) UIImagePickerController *imgPicker; 
@property(nonatomic,retain) IBOutlet UIImageView *image_view; 

//- (UIImage*)imageByCropping:(UIImage *)imageToCrop toRect:(CGRect)rect; 
- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage; 
@end 

folgenden Code kopieren/einfügen in „viewcontroller.m“ file:

// Following method is use for the mask the image. 

- (UIImage*) maskImage:(UIImage *)image withMask:(UIImage *)maskImage { 

    CGImageRef maskRef = maskImage.CGImage; 

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), 
             CGImageGetHeight(maskRef), 
             CGImageGetBitsPerComponent(maskRef), 
             CGImageGetBitsPerPixel(maskRef), 
             CGImageGetBytesPerRow(maskRef), 
             CGImageGetDataProvider(maskRef), NULL, false); 

    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask); 
    return [UIImage imageWithCGImage:masked]; 
} 

// Following method is use for Cropping the image for a perticular size. 

- (UIImage*)imageByCropping:(UIImage *)imageToCrop toRect:(CGRect)rect 
{ 
    UIGraphicsBeginImageContext(rect.size); 
    CGContextRef currentContext = UIGraphicsGetCurrentContext(); 

    CGContextTranslateCTM(currentContext, 0.0, rect.size.height); 
    CGContextScaleCTM(currentContext, 1.0, -1.0); 

    CGRect clippedRect = CGRectMake(0, 0, rect.size.width, rect.size.height); 
    CGContextClipToRect(currentContext, clippedRect); 
    CGRect drawRect = CGRectMake(rect.origin.x * -1,rect.origin.y * -1,imageToCrop.size.width,imageToCrop.size.height); 
    CGContextDrawImage(currentContext, drawRect, imageToCrop.CGImage); 
    CGContextScaleCTM(currentContext, 1.0, -1.0); 

    UIImage *cropped = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return cropped; 
} 

// Calling the method of maskimage. 

//=============================Camera Enable(display)============================================ 
-(IBAction)next:(id)sender{ 

    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) { 
     self.imgPicker.sourceType = UIImagePickerControllerSourceTypeCamera; 
    } 
    [self presentModalViewController:self.imgPicker animated:YES]; 
} 

-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{ 
    [picker dismissModalViewControllerAnimated:YES]; 
} 

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { 
    [picker dismissModalViewControllerAnimated:YES]; 
    UIImage *img = [info objectForKey:@"UIImagePickerControllerOriginalImage"]; 
     self.image_view.image=[self maskImage:img withMask:[UIImage imageNamed:@"frame.png"]]; 
} 
//=============================================================================================== 

// Calling the method of cropping the image. 

//=============================Camera Enable(display)============================================ 
-(IBAction)next:(id)sender{ 

    if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]) { 
     self.imgPicker.sourceType = UIImagePickerControllerSourceTypeCamera; 
    } 
    [self presentModalViewController:self.imgPicker animated:YES]; 
} 

-(void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{ 
    [picker dismissModalViewControllerAnimated:YES]; 
} 

- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info { 
    [picker dismissModalViewControllerAnimated:YES]; 
    UIImage *img = [info objectForKey:@"UIImagePickerControllerOriginalImage"]; 
    self.image_view.image = [self imageByCropping:img toRect:CGRectMake(0, 0, 420, 40)]; 
} 
//=============================================================================================== 

Ausgang:

iPhone output

Grab the source code here.

Verwandte Themen