从 x1,y1 到 x2,y2 的正弦波线

Question

EXAMPLE PICTURE :

我希望能够像上图中所示的那样从一个点到另一个点画线，但我不确定该怎么做。

我正在使用 GML，但如果你给我任何其他代码，我很可能能够理解它。

Answer 1

尽管看起来有点像正弦波，但实际上 cubic Bézier curve. That Wikipedia article goes through the math, and here 是一篇介绍应该相当简单的实现的文章。假设您通常像在 UE4 蓝图中那样水平绘制线条，我会将控制点放置在水平中点，并与每个控制点的端点处于相同的 y 水平，从而创建一个 "step" 形状：

p0 .  .  .  p1 .  .  .  .
.  .  .  .  .  .  .  .  .
.  .  .  .  p2 .  .  .  p3

首先，您需要创建一个函数来计算给定曲线上的一个点。这是文章中的 C# 实现：

Vector3 CalculateBezierPoint(float t,
  Vector3 p0, Vector3 p1, Vector3 p2, Vector3 p3)
{
    float u = 1 – t;
    float tt = t*t;
    float uu = u*u;
    float uuu = uu * u;
    float ttt = tt * t;

    Vector3 p = uuu * p0; //first term
    p += 3 * uu * t * p1; //second term
    p += 3 * u * tt * p2; //third term
    p += ttt * p3; //fourth term

    return p;
}

您可以将 Vector3 更改为 2D Vector2 结构，或将其分解为 x/y 个值，然后调整数学以进行补偿（抱歉，我已经有十年没使用 GML 了，所以我我不确定你必须使用什么类型的数据结构。

现在您已经有了计算曲线上点的方法，您可以编写一个函数来绘制它。在不丢失任何像素的情况下绘制它的最简单方法是绘制一系列线段。同样，这里是文章中的 C# 实现：

q0 = CalculateBezierPoint(0, p0, p1, p2, p3);

for(int i = 1; i <= SEGMENT_COUNT; i++)
{
    t = i / (float) SEGMENT_COUNT;
    q1 = CalculateBezierPoint(t, p0, p1, p2, p3);
    DrawLine(q0, q1);
    q0 = q1;
}

有更好的方法，但这应该可以帮助您入门并为您提供一些词汇以供进一步搜索。干杯！

从 x1,y1 到 x2,y2 的正弦波线

Sin wave line from x1,y1 to x2,y2

math

unity3d

game-maker

trigonometry