Creating a transparent hole on UIVisualEffect view

Question

I'm trying to create a transparent hole kind of view on the UIVisualEffectView. I was following the solution given here. I have attached my sample code which I worked on here. I'm trying to create a transparent view whose frame is taken from the image view behind the blurry view. Anyone could tell me what is that I'm doing wrong here?

cnotethegr8 · Answer 1 · 2015-11-10T10:03:37.260

14

You can use a UIBezierPath to create the mask you want.

blurView.layer.mask = ({
    CGRect roundedRect = self.bounds;
    roundedRect.origin.x = roundedRect.size.width / 4.0f;
    roundedRect.origin.y = roundedRect.size.height / 4.0f;
    roundedRect.size.width /= 2.0f;
    roundedRect.size.height /= 2.0f;

    CGFloat cornerRadius = roundedRect.size.height / 2.0f;

    UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.bounds];
    UIBezierPath *croppedPath = [UIBezierPath bezierPathWithRoundedRect:roundedRect cornerRadius:cornerRadius];
    [path appendPath:croppedPath];
    [path setUsesEvenOddFillRule:YES];

    CAShapeLayer *mask = [CAShapeLayer layer];
    mask.path = path.CGPath;
    mask.fillRule = kCAFillRuleEvenOdd;
    mask;
});

edited Nov 10 '15 at 10:03

answered Nov 10 '15 at 09:34

cnotethegr8

7,342
8
68
104

How to set that rounded clear view only clickable means user interaction enable only on that portion @cnotethegr8 – Yogendra Patel Jan 01 '18 at 12:39
note that `[path setUsesEvenOddFillRule:YES];` is unnecessary as `mask.fillRule = kCAFillRuleEvenOdd;` takes the effect. – Honghao Z Jul 11 '22 at 08:51

score 2 · Answer 2 · answered May 22 '19 at 07:21

Swift 5 version of the solution for lazy ones :)

    var roundedRect = visualEffectsView.bounds
    roundedRect.origin.x = roundedRect.size.width / 4
    roundedRect.origin.y = roundedRect.size.height / 4
    roundedRect.size.width = roundedRect.size.width / 2
    roundedRect.size.height = roundedRect.size.height / 2

    let cornerRadius = roundedRect.size.height / 2

    let path = UIBezierPath(rect: visualEffectsView.bounds)
    let croppedPath = UIBezierPath(roundedRect: roundedRect, cornerRadius: cornerRadius)
    path.append(croppedPath)
    path.usesEvenOddFillRule = true

    let mask = CAShapeLayer()
    mask.path = path.cgPath
    mask.fillRule = .evenOdd
    visualEffectsView.layer.mask = mask

Creating a transparent hole on UIVisualEffect view

2 Answers2