圖表C＃在三次貝塞爾曲線中添加數據點

Question

我已經編寫了一種創建Bezier曲線以在Chart控件中呈現的方法。 我有一組數據點，這些數據點是從另一種方法檢索的。 我想在圖表上形成Bezier曲線，以產生類似於樣條曲線的內容，但我收到的是空白圖表。 產生曲線的代碼是：

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點添加到圖表中。

---

您已實現的Bezier曲線功能可根據時間為曲線提供特定點。 您總是可以編寫一個輔助方法，通過為應返回的點數添加一個參數來為您提供所有點：

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]);

我將看看有關Bezier曲線構造的Wikipedia頁面 。 我將從二次曲線開始，然后在理解了它的工作原理之后，我將繼續介紹高階曲線。

對於二次貝塞爾曲線，可以構造中間點Q0和Q1，使得t在0到1之間變化：

• 點Q0（t）從P0到P1變化，並描述了線性貝塞爾曲線。

• 點Q1（t）從P1到P2變化，並描述了線性貝塞爾曲線。

• 點B（t）在Q0（t）到Q1（t）之間線性插值，並且描述了二次貝塞爾曲線。