带圆角的 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

您可以通过将 wantsLayer 设置为 true 来为您的 NSVisualEffectView 启用层支持视图，然后设置支持层的 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 属性可以用来将视图裁剪成任意形状。

来自header：

/* 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 上定义一个扩展：


<pre><code>extension NSImage {
    static func mask(withCornerRadius radius: CGFloat) -> NSImage {
        let image = NSImage(size: NSSize(width: radius * 2, height: radius * 2), flipped: false) {
            NSBezierPath(roundedRect: [=10=], 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
    }
}

创建视觉效果视图


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

编码愉快 ;)

带圆角的 NSVisualEffectView

NSVisualEffectView with rounded corners

macos

xcode

cocoa

swift

nsvisualeffectview

Swift 5.5