如何移除NSVisualEffectView产生的多余边框?
移除NSVisualEffectView的多余边框
你的问题主要源于两个细节:设置圆角后未开启Layer裁剪导致视觉边缘残留,以及.popover类型的material默认自带边框样式。可以通过以下方法解决:
1. 开启Layer裁剪并关闭默认背景绘制
给NSVisualEffectView添加masksToBounds = true配合圆角完成裁剪,同时设置drawsBackground = false关闭material自带的边框绘制:
let blurView: NSVisualEffectView = NSVisualEffectView() blurView.wantsLayer = true blurView.blendingMode = .behindWindow blurView.material = .popover blurView.drawsBackground = false // 关闭默认边框绘制 blurView.layer?.cornerRadius = 50 blurView.layer?.masksToBounds = true // 开启圆角裁剪,消除边缘残留 blurView.state = .active
2. 补全窗口透明设置
给窗口添加isOpaque = false,确保背景完全透明,避免额外视觉干扰:
window.styleMask = [.borderless] window.backingType = .buffered window.isOpaque = false // 确保窗口透明 window.backgroundColor = .clear
备选方案:更换Material类型
如果不需要.popover的视觉风格,换成.windowBackground这类无默认边框的material,也能直接解决问题:
blurView.material = .windowBackground
修改后的完整代码:
class AppDelegate: NSObject, NSApplicationDelegate { private lazy var window: NSWindow = NSWindow() func applicationDidFinishLaunching(_ aNotification: Notification) { window.styleMask = [.borderless] window.backingType = .buffered window.isOpaque = false window.backgroundColor = .clear let blurView: NSVisualEffectView = NSVisualEffectView() blurView.wantsLayer = true blurView.blendingMode = .behindWindow blurView.material = .popover blurView.drawsBackground = false blurView.layer?.cornerRadius = 50 blurView.layer?.masksToBounds = true blurView.state = .active window.contentView = blurView window.setContentSize(CGSize(width: 250, height: 250)) window.setFrameAutosaveName("Main Window") window.isMovableByWindowBackground = true window.makeKeyAndOrderFront(window) } }
内容的提问来源于stack exchange,提问作者swiftPunk
相关产品推荐
相关产品推荐

