沿弧线变换路径答案

【问题标题】：transform a path along an arc沿弧线变换路径
【发布时间】：2012-12-18 13:58:54
【问题描述】：

我正在尝试沿弧线变换路径。

我的项目在 osX 10.8.2 上运行，绘画是通过 CALayers 中的 CoreAnimation 完成的。

我的项目中有一个波形，它将由路径绘制。大约有 200 个采样点镜像到底部。这些每秒绘制 60 次并更新为歌曲位置。

请忽略白线，它只是一个旋转指示器。

我想要实现的是沿着弧线绘制波形。 “上”应该指向中间。它不需要一路走来。波形应沿绿色圆圈绘制。请看下面提供的草图。

我不确定如何以高效的方式实现这一目标。每秒有很多点需要坐标校正。

我尝试提出自己的一些想法：

1) 可以向路径添加线性变换，我认为这对我没有帮助。我唯一能想到的就是添加一个点，通过变换旋转路径，添加另一个点，旋转等等。但我认为这会很慢

2) 将路径绘制成图像并弯曲它肯定会导致图像伪影。

3) 也许最好的办法是预先计算弧上的样本点，然后将向量保存到中心。取波形的 y 坐标，将它们放在样本点上，然后沿着向量移动到中心。

但也许我只是没有看到某种简单的解决方案来解决这个问题。非常感谢您的帮助，非常欢迎新的想法。提前谢谢！

【问题讨论】：

所以你用你的蓝色直线，把它变成一个圆圈，然后画出相对于它的波形？（想象蓝线位于绿色和灰色圆圈之间）。换句话说，您正在转换相对于绘制波形的线？是否存在永远无法超过的最大和最小峰值？
现在我不这样做，但我希望波形保持在绿色圆圈（我刚刚在 Photoshop 中绘制）。结果应该看起来像我绘制的深蓝色波形（也在 Photoshop 中）。波形的高度是可缩放的，所以我可以编辑它的大小。蓝线是波形的一部分，但 y 坐标。只是 0。我希望我能把事情弄清楚。
我知道它应该坚持绿色圆圈...我只是想知道蓝色线是否变成了一个圆圈，它是否会穿过圆形波形的中间。只是试图根据你所拥有的概念来概念化问题。
感谢您的耐心等待，请多多包涵。蓝线实际上是波形的一部分。它是波形的路径。该部分中没有数据，这将导致 y 坐标为 0。因此，如果您将蓝线变成一个圆圈，就不会看到任何波形，只有一个蓝色圆圈。我试图解决您的问题：D
好的，我明白了。再仔细看，我可以看到它是“0值”波形。我想我只是想考虑将这个“0值”映射到圆的点上是否可行，这样每个波形点都会相对于它绘制出来，但你还需要控制波形方向。 ..

标签： objective-c xcode path core-animation transformation

【解决方案1】：

恕我直言，最有效的方法（就 CPU 使用而言）是使用某种形式的预先计算的方法，该方法会考虑到显示器的分辨率。

巧妙的预计算值

我会进行数学转换（从线性到极坐标）并结合两个事实：

无需进行广泛的数学计算
无需渲染距离太近的两个点

我没有现成的算法给你，但你可以使用预先计算好的 sin 或 cos 表，并将数据范围与显示大小相匹配，以便使用整数。

例如，假设我们有一些从 0 到 1E6 的数据，我们需要在一个 100 像素高度的矩形中显示每个点的 sin 值。我们可以使用预先计算的 sin 表并使用整数。这样显示一个点的 sin 值会快得多。可以改进这个概念以获得更好的结果。此外，还有一些方法可以只保留曲线的重要点，以便显示的曲线实际上看起来像原始曲线（请参阅维基百科上的 Ramer–Douglas–Peucker 算法）。但我发现快速显示不断变化的数据效率低下。

使用多核渲染

您可以使用多个核心计算曲线的不同区域（可能很棘手）
或者您可以使用预计算，使用多个内核和一个内核来完成工作。

【讨论】：

我所做的如下：每次重新缩放窗口时，我都会对圆进行采样（保存 x 和 y 位置）并将向量保存到中心。每当我重新渲染图像时，我都会将路径中的一个点沿矢量移动到中心，并对所有样本重复此操作。这是令人惊讶的强大。我可以以大约 60 fps 的速度每帧完成 2000 个点。因为所有样本都可以预先计算，所以不需要仅仅为了显示而进行多核渲染。感谢您花时间如此详细地解释它。
您是否使用贝塞尔路径（即使是做有角度的、非弯曲的、渲染）？我问这个问题是因为如果您使用贝塞尔路径，您可以通过将路径分成几部分来提高速度（在下一条路径中重复上一点以避免在路径中出现可见的切割）。但你可能已经在这样做了——我只是觉得值得一提。就我个人而言，我发现 500 点路径对于我的目的来说是一个很好的折衷方案。
我目前正在使用 CGPaths 进行渲染。我没有看到任何使用贝塞尔曲线的理由，因为所有线都是笔直的，从一个点直接到下一个点。