在基于图层的绘图中，我们如何减少绘制或缩放 UIView 时的延迟？

Question

我正在开发一个绘图应用程序，其中每个贝塞尔路径都是 CAShapelayer 并且我在超级层 UIView（CALayer）上添加这些子层，一旦点/线超过某个阈值，例如：1000 CAShapelayer 然后绘图，缩放，和滚动滞后，他们是优化这一点的方法吗？

Answer 1

尝试使用数千层的几个选项......

首先，我在第三代 iPad Pro 上进行了测试，生成了 8100 个形状层。 虽然在缩小以查看完整视图时有一点“滞后” ，但它肯定不会使其无法使用......而且我注意到放大时几乎没有滞后。

其次，您可以定义自己的“层”结构，而不是使用形状图层 - 跟踪路径、填充、边框等。然后覆盖draw()并仅绘制其边界框与绘制矩形相交的路径。

第三，不要在滚动视图中使用数千层视图，而是使用图像视图。 每次添加新图层时，将该图层绘制到图像视图中的图像上。 当你缩放它会变得模糊......所以每次用户结束缩放时，以新的比例更新图像。 当模糊图像变得清晰时，您会注意到轻微的延迟，但这只会在缩放结束时发生。 您甚至可以通过使用“阶梯式”缩放来缓解这种情况——例如 100%、200%、400%、800%。

---

编辑

我整理了一个示例应用程序：

• 使用字符“！”的字形生成 95 条路径通过 Times New Roman 字体中的“~”
• 路径最少 4 分，最多 115 分； 最少 0 条曲线，最多 55 条曲线
• 我们使用 6 种填充/描边颜色组合将33,805 CAShapeLayer （不是文本）图层添加到滚动视图中的3508 x 2480视图中

在运行 iOS 13.3 的旧 iPhone 7 上......当然，它有一个“小”滞后，但不是我所说的不可用。

在 1.0 缩放比例下看起来像这样：

您可能想看一下它，看看它是否具有您正在经历的相同“滞后” - https://github.com/DonMag/ShapeLayersWork

---

使用您手绘的“a”路径编辑 2 - 8137 层：

---

编辑 3

• “粉笔”字体
• 生成一个“网格”来填充3508 x 2480视图
• 循环路径
• 将所有相同颜色的路径放在同一层（所以 6 层）

这是输出：

视图变得可见需要 20 多秒，而且，正如我们所料，它完全无法使用。

“点：/曲线：”行列出了每层的点和曲线的数量——400万个点和近200 万条曲线。 我真的认为你需要重新考虑你的整个方法。

作为旁注...您熟悉 Mac 版 Sketch 应用程序吗？ 我在某些图层上放置了一些文本，使用粉笔灰...将图层转换为轮廓（路径而不是文本）...即使图层数量很少，草图性能也会变差。