xcode - 带有圆角的 NSVisualEffectView

Question

如何在 OS X 中显示带有圆角的 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支持层的来为您启用支持层的视图：

    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带圆角的 a 并将其设置capInsets为圆角半径并将其resizingMode设置为.stretch。

Answer 3

斯威夫特 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
}()

快乐编码；）