ios - UIGraphics，制作屏幕截图但避免 UI 元素

Question

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

• 主视图
  • 查看用户照片
  • ui 元素 View (“取消/添加贴纸/帖子”)+ 贴纸/表情符号也添加到此 View 中。

用于用户照片的 UIImageView 占据整个屏幕，就像在 snapchat 中一样。UI 元素添加到不同的 View 中，但位于用户的 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 元素不会覆盖它。然后我们可以截取该有限 View 的屏幕截图。但这不是应用程序的用户体验应该是的。

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

如何制作用户的 UIImageView 照片 + 表情符号的屏幕截图 - UIElements？

Answer 1

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

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

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

这是根据您的上述代码修改的代码。在以下代码中，viewB 是对 B View 的引用。

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.    
}