UIImagePickerController编辑视图圆叠加

时间：2013-12-27 03:08:40

标签： ios objective-c ios7 uiimagepickercontroller cashapelayer

我已经能够完成我想要完成的任务，这就是为内置的联系人应用程序复制iOS内置的圆形照片裁剪器。但是，我一直试图让CAShapeLayers正确制作。我正在尝试制作一个透明的320像素直径圆圈，其余部分则填充0.9 alpha黑色背景。圆形和矩形位于正确的位置，但是，圆形并不像我需要的那样完全透明。

我迷失了如何解决这个问题。我感谢您的帮助！代码和截图：

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

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

        plCropOverlay.hidden = YES;

        CAShapeLayer *circleLayer = [CAShapeLayer layer];

        if (screenHeight == 568)
        {
            [circleLayer setPosition:CGPointMake(0.0f,124.0f)];
        }    
        else
        {
            [circleLayer setPosition:CGPointMake(0.0f,80.0f)];
        }

        UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:
                          CGRectMake(0.0f, 0.0f, 320.0f, 320.0f)];

        [circleLayer setPath:[path CGPath]];

        [circleLayer setFillColor:[[UIColor whiteColor] CGColor]];
        circleLayer.opacity = 0.7f;

        // Set to 0.7f to show for screenshot purposes; setting to 0.0 would make it invisible and blend in with the below rectangleLayer.

        CAShapeLayer *rectangleLayer = [CAShapeLayer layer];

        UIBezierPath *path2 = [UIBezierPath bezierPathWithRect:CGRectMake(0.0f, 0.0f, 320.0f, screenHeight - 72)];
        [rectangleLayer setPath:[path2 CGPath]];

        [rectangleLayer setFillColor:[[UIColor blackColor] CGColor]];
        [rectangleLayer setOpacity:0.9f];
        [rectangleLayer addSublayer:circleLayer];
        [[viewController.view layer] addSublayer:rectangleLayer];

        UILabel *moveLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, 320, 50)];
        [moveLabel setText:@"Move and Scale"];
        [moveLabel setTextAlignment:NSTextAlignmentCenter];
        [moveLabel setTextColor:[UIColor whiteColor]];

        [viewController.view addSubview:moveLabel];
    }
}

enter image description here

5 个答案:

答案 0 :(得分：14)

已解决的代码：

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

        UILabel *moveLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, 320, 50)];
        [moveLabel setText:@"Move and Scale"];
        [moveLabel setTextAlignment:NSTextAlignmentCenter];
        [moveLabel setTextColor:[UIColor whiteColor]];

        [viewController.view addSubview:moveLabel];
    }
}

答案 1 :(得分：3)

我已经更改了@ aviatorken89的代码，因为它不适用于iPhone 6/6 +和iPad。现在它应该适用于任何iPhone的屏幕尺寸以及iPad！在iOS 7和iOS 8上测试。

所有这些方法都不可靠，因为它们基于Image Picker子视图层次结构，当然Apple可以更改它。我尽可能地保护代码，以防止未来的iOS版本崩溃。

我会尝试按照要求更新我的解决方案：https://gist.github.com/andreacipriani/74ea67db8f17673f1b8b

以下是代码：

- (void)navigationController:(UINavigationController *)navigationController didShowViewController:(UIViewController *)viewController animated:(BOOL)animated
{
    if ([navigationController.viewControllers count] == 3 && ([[[[navigationController.viewControllers objectAtIndex:2] class] description] isEqualToString:@"PUUIImageViewController"] || [[[[navigationController.viewControllers objectAtIndex:2] class] description] isEqualToString:@"PLUIImageViewController"]))

        [self addCircleOverlayToImagePicker:viewController];
    }
}

-(void)addCircleOverlayToImagePicker:(UIViewController*)viewController
{
    UIColor *circleColor = [UIColor clearColor];
    UIColor *maskColor = [[UIColor blackColor] colorWithAlphaComponent:0.8];

    CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
    CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;

    UIView *plCropOverlayCropView; //The default crop overlay view, we wan't to hide it and show our circular one
    UIView *plCropOverlayBottomBar; //On iPhone this is the bar with "cancel" and "choose" buttons, on Ipad it's an Image View with a label saying "Scale and move"

    //Subviews hirearchy is different in iPad/iPhone:
    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad){

        plCropOverlayCropView = [viewController.view.subviews objectAtIndex:1];
        plCropOverlayBottomBar = [[[[viewController.view subviews] objectAtIndex:1] subviews] objectAtIndex:1];

        //Protect against iOS changes...
        if (! [[[plCropOverlayCropView class] description] isEqualToString:@"PLCropOverlay"]){
            DLog(@"Warning - Image Picker with circle overlay: PLCropOverlay not found");
            return;
        }
        if (! [[[plCropOverlayBottomBar class] description] isEqualToString:@"UIImageView"]){
            DLog(@"Warning - Image Picker with circle overlay: BottomBar not found");
            return;
        }
    }
    else{
        plCropOverlayCropView = [[[viewController.view.subviews objectAtIndex:1] subviews] firstObject];
        plCropOverlayBottomBar = [[[[viewController.view subviews] objectAtIndex:1] subviews] objectAtIndex:1];

        //Protect against iOS changes...
        if (! [[[plCropOverlayCropView class] description] isEqualToString:@"PLCropOverlayCropView"]){
            DDLogWarn(@"Image Picker with circle overlay: PLCropOverlayCropView not found");
            return;
        }
        if (! [[[plCropOverlayBottomBar class] description] isEqualToString:@"PLCropOverlayBottomBar"]){
            DDLogWarn(@"Image Picker with circle overlay: PLCropOverlayBottomBar not found");
            return;
        }
    }

    //It seems that everything is ok, we found the CropOverlayCropView and the CropOverlayBottomBar

    plCropOverlayCropView.hidden = YES; //Hide default CropView

    CAShapeLayer *circleLayer = [CAShapeLayer layer];
    //Center the circleLayer frame:
    UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0.0f, screenHeight/2 - screenWidth/2, screenWidth, screenWidth)];
    circlePath.usesEvenOddFillRule = YES;
    circleLayer.path = [circlePath CGPath];
    circleLayer.fillColor = circleColor.CGColor;
    //Mask layer frame: it begins on y=0 and ends on y = plCropOverlayBottomBar.origin.y
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, screenWidth, screenHeight- plCropOverlayBottomBar.frame.size.height) cornerRadius:0];
    [maskPath appendPath:circlePath];
    maskPath.usesEvenOddFillRule = YES;

    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.path = maskPath.CGPath;
    maskLayer.fillRule = kCAFillRuleEvenOdd;
    maskLayer.fillColor = maskColor.CGColor;
    [viewController.view.layer addSublayer:maskLayer];

    if (UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPhone){
        //On iPhone add an hint label on top saying "scale and move" or whatever you want
        UILabel *cropLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, screenWidth, 50)];
        [cropLabel setText:@"Scale and move"]; //You should localize it
        [cropLabel setTextAlignment:NSTextAlignmentCenter];
        [cropLabel setTextColor:[UIColor whiteColor]];
        [viewController.view addSubview:cropLabel];
    }
    else{ //On iPad re-add the overlayBottomBar with the label "scale and move" because we set its parent to hidden (it's a subview of PLCropOverlay)
        [viewController.view addSubview:plCropOverlayBottomBar];
    }
}

答案 2 :(得分：1)

Swift 3版本（也为相机拍摄的照片提供圆角编辑层）：

// Insert this code to your view controller
private var editLayer: CAShapeLayer!
private var label: UILabel!


override func viewDidLoad()
{
    super.viewDidLoad()

    // Rounded edit layer
    navigationController?.delegate = self
    NotificationCenter.default.addObserver(self, selector: #selector(pictureCaptured), name: NSNotification.Name(rawValue: "_UIImagePickerControllerUserDidCaptureItem"), object: nil)
    NotificationCenter.default.addObserver(self, selector: #selector(pictureRejected), name: NSNotification.Name(rawValue: "_UIImagePickerControllerUserDidRejectItem"), object: nil)
}


@objc private func pictureCaptured()
{
    addRoundedEditLayer(to: ...your UIImagePickerController..., forCamera: true)
}


@objc private func pictureRejected()
{
    editLayer.removeFromSuperlayer()
    label.removeFromSuperview()
}


deinit
{
    NotificationCenter.default.removeObserver(self)
}    



// MARK: Navigation controller delegate

func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool)
{
    // Image picker in edit mode
    if let imageVC = NSClassFromString("PUUIImageViewController")
    {
        if viewController.isKind(of: imageVC) {
            addRoundedEditLayer(to: viewController, forCamera: false)
        }
    }
}


private func addRoundedEditLayer(to viewController: UIViewController, forCamera: Bool)
{
    hideDefaultEditOverlay(view: viewController.view)

    // Circle in edit layer - y position
    let bottomBarHeight: CGFloat = 72.0
    let position = (forCamera) ? viewController.view.center.y - viewController.view.center.x - bottomBarHeight/2 : viewController.view.center.y - viewController.view.center.x

    let viewWidth = viewController.view.frame.width
    let viewHeight = viewController.view.frame.height

    let emptyShapePath = UIBezierPath(ovalIn: CGRect(x: 0, y: position, width: viewWidth, height: viewWidth))
    emptyShapePath.usesEvenOddFillRule = true

    let filledShapePath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: viewWidth, height: viewHeight - bottomBarHeight), cornerRadius: 0)
    filledShapePath.append(emptyShapePath)
    filledShapePath.usesEvenOddFillRule = true

    editLayer = CAShapeLayer()
    editLayer.path = filledShapePath.cgPath
    editLayer.fillRule = kCAFillRuleEvenOdd
    editLayer.fillColor = UIColor.black.cgColor
    editLayer.opacity = 0.5
    viewController.view.layer.addSublayer(editLayer)

    // Move and Scale label
    label = UILabel(frame: CGRect(x: 0, y: 10, width: viewWidth, height: 50))
    label.text = "Move and Scale"
    label.textAlignment = .center
    label.textColor = UIColor.white
    viewController.view.addSubview(label)
}


private func hideDefaultEditOverlay(view: UIView)
{
    for subview in view.subviews
    {
        if let cropOverlay = NSClassFromString("PLCropOverlayCropView")
        {
            if subview.isKind(of: cropOverlay) {
                subview.isHidden = true
                break
            }
            else {
                hideDefaultEditOverlay(view: subview)
            }
        }
    }
}

答案 3 :(得分：0)

要从相机执行此操作，请尝试使用cameraOverlayView并设置您自己的视图。这只适用于从相机中挑选而不是照片库。

答案 4 :(得分：0)

在Jakub Marek的代码中，如果您第二次打开相机，则存在持久圆形层的问题。

要解决此问题，请在您的openCamera函数中添加

： 
editLayer?.removeFromSuperlayer()
label?.removeFromSuperview()

并替换为私有函数hideDefaultEditOverlay（view：UIView）

subview.isHidden = true

作者

subview.removeFromSuperview()

代码：

func openCamera(){
    if(UIImagePickerController .isSourceTypeAvailable(UIImagePickerController.SourceType.camera)){
        imagePicker.sourceType = UIImagePickerController.SourceType.camera
        //If you dont want to edit the photo then you can set allowsEditing to false
        imagePicker.allowsEditing = true
        imagePicker.cameraDevice = .rear
        imagePicker.showsCameraControls = true
        imagePicker.cameraCaptureMode = .photo

        imagePicker.delegate = self
        editLayer?.removeFromSuperlayer()
        label?.removeFromSuperview()
        self.present(imagePicker, animated: true, completion: nil)

    }
    else{
        let alert  = UIAlertController(title: NSLocalizedString("Attention",comment:""), message: NSLocalizedString("You don't have any camera",comment:""), preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: NSLocalizedString("OK",comment:""), style: .default, handler: nil))
        self.present(alert, animated: true, completion: nil)
    }
}

private func hideDefaultEditOverlay(view: UIView)
{
    for subview in view.subviews
    {
        if let cropOverlay = NSClassFromString("PLCropOverlayCropView")
        {
            if subview.isKind(of: cropOverlay) {
                subview.removeFromSuperview()
                //subview.isHidden = true
                break
            }
            else {
                hideDefaultEditOverlay(view: subview)
            }
        }
    }
}
相关问题
最新问题