UIGraphics，制作屏幕截图但避免使用 UI 元素

Question

构建一个功能，类似于 Snapchat 的贴纸。 制作照片，添加贴纸（表情符号），发布图像。 我当前的视图层次结构是：

• 主视图
  • 查看用户照片
  • UI 元素视图（“取消/添加贴纸/发布”）+ 贴纸/表情符号也添加到此视图中。

用户照片的 UIImageView，就像在 snapchat 中一样占据整个屏幕。 UI 元素添加在不同的视图中，但位于用户的 UIImageView 之上。

我的查看截图代码：

    UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.isOpaque, 0.0)
    view.drawHierarchy(in: view.bounds, afterScreenUpdates: true)
    let img = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    if let imageToData = UIImageJPEGRepresentation(img!, 0.2) {
        //saving imageToData to Firebase.    
    }

但这会获取主视图中的所有内容，包括 UI 元素。

一种选择是限制用户的 UIImageView 用于照片，以便 UI 元素不会覆盖它。然后我们可以对有限的视图进行截图。 但这不是应用程序的用户体验应该是什么。

我想到的另一个选项是使用 UIElements 将用户的照片 UIImageView 放置在视图的顶部。然后将所有表情符号添加到其中。但这将涵盖所有 UI 元素。

如何截取用户的 UIImageView 照片 + emoji - UIElements？

Answer 1

根据您对我的评论的回答，您只需按如下方式设置图像层次结构：

• 主视图 (A)
  • 子视图 (B) 设置为图像和表情符号的边到边拉伸
    • 查看 (D) 用户照片
    • 贴纸/表情符号或任何其他设计元素
  • UI 元素的视图 (C)（“取消/添加贴纸/发布”）

我确实注意到您说您需要边对边的图像视图，我不明白为什么这会成为上述层次结构的问题，除非我遗漏了一些东西，因为您可以使子视图 B 拉伸边到主视图的一侧，然后将图像视图 (D) 设置为边到边拉伸。

这里有一些基于您上面的代码的修改代码。在以下代码中，viewB 是对 B 视图的引用。

UIGraphicsBeginImageContextWithOptions(viewB.bounds.size, viewB.isOpaque, 0.0)
viewB.drawHierarchy(in: viewB.bounds, afterScreenUpdates: true)
let img = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

if let imageToData = UIImageJPEGRepresentation(img!, 0.2) {
    //saving imageToData to Firebase.    
}