iOS - 如何为头像创建分层图像

Question

我正在开发一个应用程序，该应用程序允许用户通过从提供的图像列表中选择各种身体/​​头发/服装/眼睛/等样式来创建自己的 2D 头像（类似于 Bitmoji）。到目前为止，我是通过将几个 UIImageView 相互叠加来实现的，每个 UIImageView 代表一个特定的可定制元素。用户可以通过首先从两个集合视图中选择元素类型，然后选择元素图像来选择分配给每个 UIImageView 的图像。例如，如果用户在一个集合视图中单击头发类型类别，则他们可以从另一个集合视图中的数字列表中选择来更改 hairTypeImageView 的照片。

我认为这种方法的问题很明显：它需要大量的 UIImageViews，这似乎大大降低了应用程序的速度。此外，除此之外，我们要求用户能够更改每个元素的基本颜色，而无需更改其阴影或边框。到目前为止，我能够做到这一点的唯一方法是让应用程序为每个元素存储两个图像，一个用于底层填充颜色，另一个用于顶层阴影和边框，然后使用

fillColorImageView.image = [fillColorImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[fillColorImageView setTintColor:color];

更改填充颜色。此解决方案有效，但它使应用程序的效率更低，因为这意味着我现在必须拥有双倍数量的 UIImageView（每个可自定义元素两个），另外我必须创建双倍的艺术品，并且应用程序必须存储双倍的图像.

有没有我想念的更好的方法来做到这一点？

Answer 1

我会看看创建一个 UIImageView 子类，它会覆盖 drawRect: 调用以绘制头像的各个层。这将允许拥有一个能够绘制整个头像的 UIImageView 实例。

第二个选项是使用 Core Graphics 来渲染你的头像。如果您需要更好地控制输出，这是一个不错的选择，因为 Core Graphics 框架提供了一套丰富的渲染工具和功能。

对我来说，决定可能取决于您需要进行多少图像处理。如果只是将各种图像“堆叠”在一起并更改一些颜色，我可能会使用 UIImageView 子类。

对于这些方法中的任何一种，请查看https://developer.apple.com/library/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/HandlingImages/Images.html