如何阻止贝塞尔样条超出坐标轴？

Question

在我的 iOS 应用程序中，我使用一种算法通过一组 2D 点绘制贝塞尔样条曲线，该算法为连接两个连续点的每条贝塞尔曲线计算一组第一和第二控制点。 该算法运行良好，但我的问题是现在我将这条曲线显示在带有 X 和 Y 轴的图表上。

只要有几个点或在轴上，其余的都在里面，曲线似乎会掉头并越过轴，然后分成两部分返回，穿过点和里面的点.

从算法的角度来看，这并没有错。这种情况下的控制点将在坐标轴之外生成。

有没有一种方法可以让我穿过这些点，看看它们中的一些是否在轴上，然后修改控制点，使曲线而不是超出曲线之外，而是作为直线穿过轴上的两个点与坐标轴重合的线。

Answer 1

检测到屏幕外的曲线

贝塞尔曲线实际上只是多项式方程。有multiple types of Bezier curves，对应曲线的不同度数。

所以，只取生成的方程（一个代表x，一个代表y），然后找到根（它们通过0的点）时间>。如果根存在，则曲线通过轴。

例如，对于二次（度数=2）贝塞尔曲线，给定我们的三个点（x₀, y₀），（x_{1, y1), (x2, y2) equations 是}

x(t) = (x₀ - 2x₁ + x₂)t² - 2(x0 + x₁)t + x₀ y(t) = (y₀ - 2y₁ + y₂)t² - 2(y0 + y₁)t + y₀ 0

---

此时，我们可以使用quadratic formula 来解决t，并检查解决方案是否不存在或者在[0,1] 的域之外以解决t。但是，还有另一种方法可以推广三次贝塞尔曲线，而无需触及复杂的 cubic formula - 只需检查极值点即可。这些是导数 = 0 的点。因为导数是

x'(t) = 2(x₀ - 2x₁ + x₂)t - 2(x₀ + x₁) y'(t) = 2(y₀ - 2y₁ + y₂)t - 2(y₀ + y₁)

这意味着极值在

t_extrema-x = (x₀ + x₁) / (x₀ - 2x₁ + x₂) t_extrema-y = (y₀ + y₁) / (y₀ - 2y₁ + y₂)

因此，只需检查 x(t_extrema-x) > 0 和 y(t_extrema-y) > 0 （我们假设端点x₀ 和 x₂ 已知在屏幕上，即 > 0)。对于三次贝塞尔曲线，做同样的事情，但使用二次公式求解极值（在这种情况下，x 和 y 各有两个极值）。 p>

---

防止曲线离开屏幕

如果我们通过将上面的方程用于 t_extrema-x 并将其代入 x(t) 来求解 x(t_extrema-x) > 0，我们经过一些代数后发现，为了防止越过 x 轴，我们需要

-4x₀x₁ + x₀x₂ - x₁² > 0 if (x₀ + x₂) > 2x₁ -4x₀x₁ + x₀x₂ - x₁²0 + x₂) 1

(if (x₀ + x₂) = 2x₁，我们从 x_{0 线性移动} 到 x₂ 所以，假设两者都是正数，我们不能穿过 x 轴）

稍微看一下这些方程应该会让你相信如果 (x₀ + x₂) > 2x₁，我们可以简单地减小 x₁ 直到满足左侧条件；如果 (x₀ + x₂) 1，我们可以简单地增加 x₁ 直到满足条件满足。 y 的等式是类似的。

---

这告诉我们如何防止曲线偏离屏幕的左侧 (x=0) 和顶部 (y=0) 部分 - 那么右边(x=screen_width)和底部(y=screen_height)？

我们可以通过想象我们将屏幕翻转到它的镜像来轻松做到这一点，这样右侧是x=0，左侧是x=screen_width。这可以通过在上述所有等式中将x 的每个实例替换为(screen_width-x) 并检查我们的条件来完成。然后，例如，之前在第一种情况下，我们要减小 x₁，在这种情况下，我们想要减小 (screen_width-x₁)，即与增加 x₁ 相同。用(screen_height-y) 替换y 也是同样的逻辑。