ARKit 3D空间中UIView作为SCNMaterial内容不显示子视图及圆角

看起来你遇到的问题是因为视图未完成布局就生成图片，加上渲染方式没有正确捕获子视图和圆角效果导致的。我来帮你一步步解决：

问题根源分析 #

1. 当你调用view.asImage()时，自定义的PlayerView可能还没完成子视图的布局计算，导致转成图片时子视图还没被绘制出来。
2. 你设置了cornerRadius但没有开启masksToBounds，这会导致圆角不会裁剪视图内容，直接渲染layer的时候圆角效果不生效。
3. layer.render(in:)方法更适合单独渲染layer本身，对于包含子视图的视图层级，drawHierarchy能更准确地捕获整个视图的视觉效果。

解决方案代码修改 #

1. 修复UIView的asImage扩展

改用drawHierarchy来生成图片，同时确保视图完成布局：

extension UIView {
    func asImage() -> UIImage {
        // 强制完成当前视图的布局，确保子视图都已就位
        layoutIfNeeded()
        
        let renderer = UIGraphicsImageRenderer(bounds: bounds)
        return renderer.image { rendererContext in
            // 使用drawHierarchy捕获完整的视图层级，包括子视图
            drawHierarchy(in: bounds, afterScreenUpdates: true)
        }
    }
}

2. 调整setupBillBoard中的视图配置

开启masksToBounds让圆角生效，同时确保自定义视图的初始化正确（如果是Xib加载的话，要正确初始化Xib）：

func setupBillBoard() {
    // 注意：如果PlayerView是用Xib创建的，要正确加载Xib，而不是直接init(frame:)
    // 比如替换成：
    // let view = PlayerView.fromXib() // 你需要自己实现这个类方法
    let view = PlayerView(frame: CGRect(x: 0, y: 0, width: 70, height: 40))
    view.backgroundColor = .red
    view.layer.cornerRadius = 14
    // 开启masksToBounds，让圆角裁剪视图内容
    view.layer.masksToBounds = true
    
    let material = SCNMaterial()
    material.diffuse.contents = view.asImage()
    material.isDoubleSided = true
    
    let plane = SCNPlane(width: 1, height: 1)
    plane.materials = [material]
    
    let node = SCNNode()
    node.geometry = plane
    node.position = SCNVector3(box.x, box.y + 0.3, box.z - 0.4)
    node.scale = SCNVector3(0.4, 0.4, 0.4)
    self.billBoardNode = node
}

3. 补充：Xib加载的正确方式

如果你的PlayerView是用Xib创建的，直接init(frame:)不会加载Xib内容，所以子视图自然不会显示。你需要给PlayerView添加一个类方法来加载Xib：

class PlayerView: UIView {
    // 假设Xib文件名和类名一致
    class func fromXib() -> PlayerView {
        let nib = UINib(nibName: String(describing: self), bundle: nil)
        return nib.instantiate(withOwner: nil, options: nil).first as! PlayerView
    }
    
    // 其他自定义代码...
}

然后在setupBillBoard中用let view = PlayerView.fromXib()来初始化视图，记得设置frame或者用AutoLayout来确定尺寸。

验证修改后的效果 #

这样修改后，你的PlayerView会先完成布局，然后正确捕获包括子视图、圆角在内的完整视觉效果，再作为材质应用到SCNPlane上，就能在ARKit场景中看到预期的内容了。

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