Search code examples
iosobjective-cuiviewuibezierpathcashapelayer

clip-masking uiview with CAShapeLayer and UIBezierPath


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


Solution

  • 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