【问题标题】：NSVisualEffectView with rounded corners带有圆角的 NSVisualEffectView
【发布时间】：2015-11-09 14:49:31
【问题描述】：

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

添加我的 NSVisualEffectView 的代码：

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

【问题讨论】：

试试maskImage。
你有例子吗？我试过了，但我不能

标签： xcode macos swift cocoa nsvisualeffectview

【解决方案1】：

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

    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)

这会产生带有漂亮圆角的效果视图：

【讨论】：

感谢它的工作！但是我有一个问题，因为我希望我的 visualEffectView (Dark) 高于其他 visualEffectView0 （材质：Match Appearance）并且cornerRadius 不起作用，你知道如何修理它？ --> screenshot
还不知道如何解决它，但是here is an issue，也许有人会帮忙?
这对我不起作用 - 它坚持用黑色绘制角落的“外部”。

【解决方案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。

【讨论】：

【解决方案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
}()

编码愉快 ;)

【讨论】：