代码生成NSView转PNG失败：设置bounds后仍为空如何解决？

你的代码存在几个关键问题，导致生成的PNG文件为空，以下是具体分析和修复方案：

问题原因 #

1. 视图未完成布局与绘制触发
   你仅创建了MyView并添加到父视图，但未设置frame或自动布局约束，视图没有明确的尺寸与位置，系统不会触发它的draw(_:)绘制方法。即便手动修改了bounds，也无法让绘制逻辑执行，最终缓存的内容为空。

2. 缓存前未确保视图已完成绘制
   调用cacheDisplay(in:to:)时，视图可能从未执行过绘制操作，自然无法捕获到任何内容。

3. 绘制坐标的潜在问题
   Cocoa视图坐标原点在左下角，你绘制的椭圆位置(100,100)在200x200的视图内是有效的，但前提是视图已完成布局和绘制。

修复后的代码 #

1. 修正ViewController的视图初始化逻辑 #

给MyView设置明确的frame或自动布局约束，确保视图能被正确布局并触发绘制：

class ViewController: NSViewController {
    var myView: MyView?

    override func viewDidLoad() {
        super.viewDidLoad()

        self.myView = MyView()
        guard let myView = self.myView else { return }
        // 设置明确的frame，确保视图有尺寸和位置
        myView.frame = NSRect(x: 50, y: 50, width: 200, height: 200)
        self.view.addSubview(myView)
    }

    @IBAction func buttonClicked(_ sender: Any) {
        self.myView?.makeImage()
    }
}

2. 修正NSView的makeImage扩展 #

在缓存绘制内容前，强制视图完成绘制：

extension NSView {
    func makeImage() {
        // 强制视图完成一次绘制
        self.displayIfNeeded()
        
        guard let rep = bitmapImageRepForCachingDisplay(in: bounds) else { return }
        rep.size = bounds.size
        cacheDisplay(in: bounds, to: rep)
        
        guard let pngData = rep.representation(using: .png, properties: [:]) else { return }
        let saveURL = URL(fileURLWithPath: NSHomeDirectory()).appendingPathComponent("test.png")
        do {
            try pngData.write(to: saveURL)
            print("图片已保存至：\(saveURL)")
        } catch {
            print("保存失败：\(error)")
        }
    }
}

3. 可选：调整MyView的绘制位置（方便查看） #

将椭圆绘制在视图中心，避免因坐标问题导致看不到内容：

class MyView: NSView {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        
        let context = NSGraphicsContext.current!.cgContext
        context.saveGState()
        
        context.setStrokeColor(NSColor.red.cgColor)
        // 绘制在视图中心位置
        let ellipseRect = NSRect(x: bounds.midX - 25, y: bounds.midY - 25, width: 50, height: 50)
        context.strokeEllipse(in: ellipseRect)
        
        context.restoreGState()
    }
}

关键要点总结 #

• 代码创建的NSView必须设置frame或自动布局约束，确保视图有明确的尺寸，触发系统的绘制流程。
• 在缓存视图内容前，调用displayIfNeeded()强制视图完成绘制。
• 牢记Cocoa的坐标系统（原点在左下角），避免绘制内容超出视图可视范围。

内容的提问来源于stack exchange，提问作者Yuji Ogata