圆角NSVisualEffectView

Question

如何在OS中显示带有圆角的NSVisualEffectView？

添加我的NSVisualEffectView的代码：

let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 300, 300))
visualEffectView.material = NSVisualEffectMaterial.Dark
visualEffectView.blendingMode = NSVisualEffectBlendingMode.BehindWindow
self.addSubview(visualEffectView)

Answer 1

您可以通过将NSVisualEffectView的wantsLayer设置为true，然后设置支持层的cornerRadius，从而为您的true启用层支持视图：

    let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 300, 300))
    visualEffectView.material = NSVisualEffectMaterial.Dark
    visualEffectView.blendingMode = NSVisualEffectBlendingMode.BehindWindow
    visualEffectView.wantsLayer = true
    visualEffectView.layer?.cornerRadius = 15.0
    self.view.addSubview(visualEffectView)

这样就形成了一个圆角好的效果视图：

​

​

Answer 2

NSVisualEffectView具有一个maskImage属性，您可以使用该属性将视图剪辑成任意形状。

从标题中：

/* The mask image masks this view. It is best to set this to the
   smallest mask image possible and properly set the image.capInsets to
   inform the image on how to stretch the contents when it is used as a
   mask. Setting the maskImage on an NSVisualEffectView that is the
   window.contentView will correctly set the window's shadow.
 */
public var maskImage: NSImage?

例如，您可以使用带有圆角的NSImage，并将其capInsets设置为角半径，将resizingMode设置为.stretch。

Answer 3

Swift 5.5

对于我的一个应用程序，我做的正是@sam所说的。其结果是：

​

​

你需要做的是：

• 在NSImage上定义一个扩展：

extension NSImage {
    static func mask(withCornerRadius radius: CGFloat) -> NSImage {
        let image = NSImage(size: NSSize(width: radius * 2, height: radius * 2), flipped: false) {
            NSBezierPath(roundedRect: $0, xRadius: radius, yRadius: radius).fill()
            NSColor.black.set()
            return true
        }
        
        image.capInsets = NSEdgeInsets(top: radius, left: radius, bottom: radius, right: radius)
        image.resizingMode = .stretch
        
        return image
    }
}

• 创建视觉效果视图

private lazy var visualEffectView: NSVisualEffectView = {
    let visualEffectView = NSVisualEffectView()
    visualEffectView.blendingMode = .behindWindow
    visualEffectView.material = .popover
    visualEffectView.state = .active
    visualEffectView.maskImage = .mask(withCornerRadius: 25)
    return visualEffectView
}()

(愉快的编码;)