clip-masking uiview with CAShapeLayer and UIBezierPath
Asked Answered
M

3

11

I have a problem clipping a view using CAShapeLayer-UIBezierPath , I want to clip the content but I end up getting a stroke (frame) with that UIBezierPath , This is my code

UIBezierPath *path2Path = [UIBezierPath bezierPath];
[path2Path moveToPoint:CGPointMake(206.745, 0)];
[path2Path addLineToPoint:CGPointMake(206.745, 97.613)];
[path2Path addLineToPoint:CGPointMake(0, 97.613)];
[path2Path addLineToPoint:CGPointMake(0, 0)];
[path2Path addLineToPoint:CGPointMake(87.28, 0)];
[path2Path addCurveToPoint:CGPointMake(103.808, 12.118) controlPoint1:CGPointMake(87.28, 0) controlPoint2:CGPointMake(86.555, 12.118)];
[path2Path addCurveToPoint:CGPointMake(119.466, 0) controlPoint1:CGPointMake(121.061, 12.118) controlPoint2:CGPointMake(119.466, 0)];
[path2Path addLineToPoint:CGPointMake(206.745, 0)];
[path2Path closePath];

[path2Path addClip];

CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame=MYVIEW.bounds;
pathLayer.path = path2Path.CGPath;

pathLayer.strokeColor = [[UIColor blackColor] CGColor];
pathLayer.fillColor = [[UIColor clearColor] CGColor];

pathLayer.fillRule=kCAFillRuleEvenOdd;
[MYVIEW.layer setMask:pathLayer];
[MYVIEW.layer setMasksToBounds:YES];

MYVIEW.backgroundColor=[UIColor greenColor];

The result of this code is just a green stroke line ,the bounds is empty , like this https://i.sstatic.net/aehdo.png

However , I want to make the bounds green , clipped by that stroke

Mertens answered 19/6, 2015 at 12:27 Comment(6)
You want to show the only part of image inside bezier path. Right?Weakling
yes exactly . @RajeshMauryaMertens
May i know? where you write the code? In Viewcontroller or created UIView subclass.Weakling
Do you added image into MYVIEW?Weakling
@RajeshMaurya nope , its normal view with subviews inside (but for now it just has background color ) , I want to clip subviews or the background color for this view . the main problem is that the mask applies as a stroke not as a content inside the viewMertens
possible duplicate of Use Bezier Path as Clipping MaskDagostino
P
25

as rob mayoff said You can do this easily by setting your view's layer mask to a CAShapeLayer.

UIBezierPath *myClippingPath = ...
CAShapeLayer *mask           = [CAShapeLayer layer];
mask.path                    = myClippingPath.CGPath;
myView.layer.mask            = mask;

In Swift

let myClippingPath = UIBezierPath( ... )
let mask           = CAShapeLayer()
mask.path          = myClippingPath.CGPath
myView.layer.mask         = mask
Packing answered 1/7, 2015 at 13:14 Comment(0)
B
7

Thanks for answers guys.

In case someone can't find suitable answer on SO for this question for hours, like i just did, i've assembled a working gist in Swift 2.2 for masking/clipping UIView with CGRect/UIBezierPath:

https://gist.github.com/Flar49/7e977e81f1d2827f5fcd5c6c6a3c3d94

extension UIView {
    func mask(withRect rect: CGRect, inverse: Bool = false) {
        let path = UIBezierPath(rect: rect)
        let maskLayer = CAShapeLayer()

        if inverse {
            path.appendPath(UIBezierPath(rect: self.bounds))
            maskLayer.fillRule = kCAFillRuleEvenOdd
        }

        maskLayer.path = path.CGPath

        self.layer.mask = maskLayer
    }

    func mask(withPath path: UIBezierPath, inverse: Bool = false) {
        let path = path
        let maskLayer = CAShapeLayer()

        if inverse {
            path.appendPath(UIBezierPath(rect: self.bounds))
            maskLayer.fillRule = kCAFillRuleEvenOdd
        }

        maskLayer.path = path.CGPath

        self.layer.mask = maskLayer
    }
}

Usage:

let viewSize = targetView.bounds.size
let rect = CGRect(x: 20, y: 20, width: viewSize.width - 20*2, height: viewSize.height - 20*2)

// Cuts rectangle inside view, leaving 20pt borders around
targetView.mask(withRect: rect, inverse: true)

// Cuts 20pt borders around the view, keeping part inside rect intact
targetView.mask(withRect: rect)

Hope it will save someone some time in the future :)

Bradford answered 7/10, 2016 at 12:26 Comment(0)
D
0

You can even improve @Eugene's response (greate work, mate!) with corner radius

  extension UIView {  
    func mask(withRect rect: CGRect, cornerRadius: CGFloat = 0, inverse: Bool = false) {
        let path = cornerRadius > 0 ?
            UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius) :
            UIBezierPath(rect: rect)
        let maskLayer = CAShapeLayer()

        if inverse {
            path.append(UIBezierPath(rect: bounds))
            maskLayer.fillRule = kCAFillRuleEvenOdd
        }

        maskLayer.path = path.cgPath

        self.layer.mask = maskLayer
    }
}
Dowsabel answered 3/9, 2020 at 8:23 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.