Chart C# 在三次贝塞尔曲线中添加数据点

Question

我编写了一种创建贝塞尔曲线的方法，以便在 Chart 控件中进行渲染。我有一组数据点，我从另一种方法中检索到这些数据点。我想在我的图表上形成贝塞尔曲线以产生类似于样条的东西，但我收到的是一张空白图表。生成曲线的代码是：

public static double XChart(double t, double x0, double x1, double x2, doubl x3)
{
    return (double)(
        x0 * Math.Pow((1 - t), 3) +
        x1 * 3 * t * Math.Pow((1 - t), 2) +
        x2 * 3 * Math.Pow(t, 2) * (1 - t) +
        x3 * Math.Pow(t, 3)
    );
}

然后我使用以下代码将曲线添加到图表中：

chart1.Series["Series1"].Points.AddXY(XChart(0.1, a, c, b, d), YChart(0.1, l, f, i, g));

其中 a, b, c, d, l, f, i, g 是我从数据点列表中获得的值。

List<DataPoint> dataPoints0 = new List<DataPoint>();
var a = dataPoints0[0].XValue;
var b = dataPoints0[1].XValue;
var c = dataPoints0[2].XValue;
var d = dataPoints0[3].XValue;
var l = dataPoints0[0].YValues[0];
var i = dataPoints0[1].YValues[0];
var f = dataPoints0[2].YValues[0];
var g = dataPoints0[3].YValues[0];

现在，假设：

a= 4 , l= 0
b= 3 , i= 3
c= 4 , f= 5
d= 3 , g= 6

我应该得到这样的曲线：

然而，我在图表上得到的是这样的：

我不确定为什么会这样，感谢您的帮助。

Answer 1

您似乎只是在图表中添加了一个点；要解决此问题，您需要从您关心的曲线中添加每个点：

for (float t = 0.0f; t < 1.0f; t += 0.01f)
    chart1.Series["Series1"].Points.AddXY(XChart(t, a, b, c, d), YChart(t, l, f, i, g));

上面的示例从 0 的开始时间开始迭代，并使用 0.00f - 1.00f.

向您的图表添加 100 个点

您实现的贝塞尔曲线函数根据时间为您提供了曲线中的特定点。你总是可以编写一个辅助方法来给你所有的点数，方法是添加一个应该返回的点数的参数：

public static double XChart(double t, double x0, double x1, double x2, double x3) {
    return (double)(
        x0 * Math.Pow((1 - t), 3) +
        x1 * 3 * t * Math.Pow((1 - t), 2) +
        x2 * 3 * Math.Pow(t, 2) * (1 - t) +
        x3 * Math.Pow(t, 3));
}
public static double[] XChart(double x0, double x1, double x2, double x3, int totalPoints) {
    List<double> points = new List<double>();
    for (float t = 0.0f; t < 1.0f; t += (1 / (float)totalPoints))
        points.Add(XChart(t, x0, x1, x2, x3));

    return points.ToArray();
}

然后您可以使用此辅助方法来构建您的图表，如下所示：

double[] xPoints = XChart(a, b, c, d, 100);
double[] yPoints = YChart(l, f, i, g, 100);
if (xPoints.Length != yPoints.Length)
    throw new InvalidOperationException("The number of points between axes must match.");

for (int i = 0; i < xPoints.Length; i++)
    chart1.Series["Series1"].Points.AddXY(xPoints[i], yPoints[i]);

我会看一下 Wikipedia page 关于贝塞尔曲线的构造。我会从二次曲线开始，然后在了解它的工作原理后，我会进一步介绍您对高阶曲线的表示。

For quadratic Bézier curves one can construct intermediate points Q0 and Q1 such that as t varies from 0 to 1:

Point Q0(t) varies from P0 to P1 and describes a linear Bézier curve.

Point Q1(t) varies from P1 to P2 and describes a linear Bézier curve.

Point B(t) is interpolated linearly between Q0(t) to Q1(t) and describes a quadratic Bézier curve.

Chart C# 在三次贝塞尔曲线中添加数据点

Chart C# add Data Point in cubic bezier curve

c#

bezier

spline

microsoft-chart-controls