将 UIView 渲染为 UIImage 时出现图像大小错误

Question

我想通过自定义设计将两张图片转换为一张图片。 预期的图像是我的 UICollectionViewCell 的快照，实际上不是 UIImage。 我从自定义 UICVCell.swift 文件中复制了布局代码，并尝试将视图渲染到 UIImage 中，但结果图像如下所示。

我在 SOF 中搜索了很多问题，但大部分都是关于“如何将 UIView 渲染为 UIImage”。 我也尝试过绘图，但结果同样混乱。

谁能告诉我有什么问题？ 非常感谢您的帮助，这是我在 SOF 中的第一个问题。 我可能会在一两分钟内哭泣，真的......

类视图控制器：UIViewController {

private var imageView: UIImageView = {
    let iv = UIImageView()
    iv.contentMode = .scaleAspectFit
    iv.clipsToBounds = true

    return iv
}()

func createBubbleImage(images: [UIImage?]) -> UIImage? {
    switch images.count {
    case 1:
        return images[0]
    case 2:
        let newView = UIView(frame: .init(x: 0, y: 0, width: 300, height: 300))
        let size = newView.frame.width

        let iv0 = UIImageView(image: images[0])
        iv0.contentMode = .scaleAspectFit
        iv0.clipsToBounds = true

        let iv1 = UIImageView(image: images[1])
        iv1.contentMode = .scaleAspectFit
        iv1.clipsToBounds = true

        newView.addSubview(iv0)
        iv0.anchor(top: newView.topAnchor, left: newView.leftAnchor, paddingTop: size * 0.04, paddingLeft: size * 0.04, width: size * 0.56, height: size * 0.56)
        newView.addSubview(iv1)
        iv1.anchor(bottom: newView.bottomAnchor, right: newView.rightAnchor, paddingBottom: size * 0.04, paddingRight: size * 0.04, width: size * 0.56, height: size * 0.56)
        
        iv0.layer.cornerRadius = size * 0.28
        iv1.layer.cornerRadius = size * 0.28
        
        let renderer = UIGraphicsImageRenderer(bounds: newView.bounds)
        return renderer.image { ctx in
            newView.layer.render(in: ctx.cgContext)
        }
        
    default:
        return UIImage(named: "logo")
    }
}

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.backgroundColor = .white
    
    view.addSubview(imageView)
    imageView.center(inView: view)
    imageView.setDimensions(width: 300, height: 300)

    imageView.image = createBubbleImage(images: [UIImage(named: "0"), UIImage(named: "1")])
}

}

Expected Image Result Image

Answer 1

执行以下操作：

1. 删除具有anchor 方法的代码行。
2. 用UIImageView(frame: ...) 启动iv0 和iv1
3. 添加iv0.image = images[0]和iv1.image = images[1]

我还增加了一点半径，因为在我的测试设备中，图像不是完全圆形的。

代码应如下所示：

func createBubbleImage(images: [UIImage?]) -> UIImage? {
    switch images.count {
    case 1:
        return images[0]
    case 2:
        let newView = UIView(frame: .init(x: 0, y: 0, width: 300, height: 300))
        let size = newView.frame.width

        let iv0 = UIImageView(frame: .init(x: 0, y: 0, width: 200, height: 200))
        iv0.image = images[0]
        iv0.contentMode = .scaleAspectFit
        iv0.clipsToBounds = true

        let iv1 = UIImageView(frame: .init(x: 100, y: 100, width: 200, height: 200))
        iv1.image = images[1]
        iv1.contentMode = .scaleAspectFit
        iv1.clipsToBounds = true

        newView.addSubview(iv0)
        newView.addSubview(iv1)

        iv0.layer.cornerRadius = size * 0.35
        iv1.layer.cornerRadius = size * 0.35

        let renderer = UIGraphicsImageRenderer(bounds: newView.bounds)
        return renderer.image { ctx in
            newView.layer.render(in: ctx.cgContext)
        }

    default:
        return UIImage(named: "logo")
    }
}

有了它，结果如下：

我必须从您的“预期图像”中截取屏幕截图，这就是图像看起来像放大的原因。您可以使用UIImageView(frame: ...) 部分来根据需要调整两个图像（我玩得不够避免在边缘切割，但可以通过正确的措施）。

备注：UIImageView 框架中的x 和y 值分别是从newView 的左上角到UIImageView 的左上角的水平和垂直距离。