How to blur the border of the mask for an NSImage?

Question

I am trying to blur the border of the mask for an NSImage in swift and I can't figure out, how to do this. The mask is supposed to be created from a CGMutablePath, so that it can be changed programmatically. This is what it looks like at the moment: Sharp edges This is what it is supposed to look like: Blurred edges

The code for creating the mask with sharp edges is the following:

class MyView: NSView {
    
    override func draw(_ dirtyRect: NSRect) {
        
        let bottomLayer = CALayer()
        bottomLayer.bounds = self.bounds
        bottomLayer.position = CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2)
        bottomLayer.contents = NSImage(named: "bottom.jpg")
        bottomLayer.contentsGravity = .resize
        self.layer?.addSublayer(bottomLayer)
        
        let path = CGMutablePath()
        path.move(to: CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2))
        path.addCurve(to: CGPoint(x: 0.5*self.bounds.size.width, y: self.bounds.size.height), control1: CGPoint(x: 0.4*self.bounds.size.width, y: 0), control2: CGPoint(x: 0, y: self.bounds.size.height))
        path.addCurve(to: CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2), control1: CGPoint(x: self.bounds.size.width, y: self.bounds.size.height), control2: CGPoint(x: 0.8*self.bounds.size.width, y: 0))
        path.closeSubpath()
        
        let maskLayer = CAShapeLayer()
        maskLayer.path = path
        maskLayer.fillRule = .evenOdd
        maskLayer.borderWidth = 20
        
        let topLayer = CALayer()
        topLayer.bounds = self.bounds
        topLayer.position = CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2)
        topLayer.contents = NSImage(named: "top.jpg")
        topLayer.contentsGravity = .resize
        topLayer.masksToBounds = true
        topLayer.mask = maskLayer
        
        self.layer?.addSublayer(topLayer)
    }
}

I hope there is a nice solution to this :)

Frederik

score 1 · Accepted Answer · answered Jan 22 '22 at 12:35

Try adding CAGradientLayer instead of CAShapeLayer:

Sample Source:

class MyView: NSView {
    
    override func draw(_ dirtyRect: NSRect) {
        
        let bottomLayer = CALayer()
        bottomLayer.bounds = self.bounds
        bottomLayer.position = CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2)
        bottomLayer.contents = NSImage(named: "bottom")
        bottomLayer.contentsGravity = .resize
        self.layer?.addSublayer(bottomLayer)
        
        let path = CGMutablePath()
        path.move(to: CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2))
        path.addCurve(to: CGPoint(x: 0.5*self.bounds.size.width, y: self.bounds.size.height), control1: CGPoint(x: 0.4*self.bounds.size.width, y: 0), control2: CGPoint(x: 0, y: self.bounds.size.height))
        path.addCurve(to: CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2), control1: CGPoint(x: self.bounds.size.width, y: self.bounds.size.height), control2: CGPoint(x: 0.8*self.bounds.size.width, y: 0))
        path.closeSubpath()
        
        let maskLayer = CAGradientLayer()
        maskLayer.shadowRadius = 4
        maskLayer.shadowPath = path
        maskLayer.shadowOpacity = 1
        maskLayer.shadowOffset = CGSize.zero
        maskLayer.shadowColor = NSColor.green.cgColor
        
        let topLayer = CALayer()
        topLayer.bounds = self.bounds
        topLayer.position = CGPoint(x: self.bounds.size.width/2, y: self.bounds.size.height/2)
        topLayer.contents = NSImage(named: "top")
        topLayer.contentsGravity = .resize
        topLayer.masksToBounds = true
        topLayer.mask = maskLayer
        
        self.layer?.addSublayer(topLayer)
    }
}

How to blur the border of the mask for an NSImage?

1 Answers1

Sample Source:

Output