オールトの雲

[VB.NET] WPFで関数グラフを描いてみる

2013年7月15日

　WPF の XAML で関数グラフを描いてみる実験。

　XAML で数式を設定すると勝手にグラフを描いてくれるような方法あるのでは？…と期待して調べたのですが、早々に断念（汗
　結局、古典と同じく直線近似で描くのが現実的ではないかという結論に。
　　# ベジェで描く方法もあるようですが、私の頭がついていきませんです…（汗

　描く方法として、Polyline と Path のどちらにしようかと思いましたが、今回は描画後に端点を動かすとかは考えないので Path で描くことにしました。

XAML 側
　Data プロパティはコードでセットするので空にしておきます。
　描画したグラフは、Grid パネル全体に描画したいので、Path の Stretch は Fill にしておきます。
```
<Grid>
  <Path x:Name="Graph" Data="" Stroke="Red" Stretch="Fill" />
</Grid>
```

コードビハインド(VB) 側

　パスマークアップ文を構築します。
　初回だけ M(移動)コマンドでポイントを移動させ、以後は L(線)コマンドで前回のポイントとの直線を引いていきます。
　数学のグラフでは一般的に第一象限は右上ですが、Path で指定する座標系は第一象限が右下の領域なので、関数の結果 y は座標に変換する際に -y とします。
　そうして作成したパスマークアップ文を、StreamGeometry.Parse メソッドによって Path の Data プロパティにセットします。

Private Sub Draw()

    Dim xfrom As Decimal = 0D   ' 開始 x 座標
    Dim xto As Decimal = 10D    ' 終了 x 座標

    Dim pathData As String = ""

    ' 開始座標から終了座標までの範囲を 1000 分割して求める
    For x = xfrom To xto Step (xto - xfrom) / 1000D

        ' y = f(x) を求める 
        Dim y = Math.Sin(x)

        ' 区間の直線を描く
        If (x = xfrom) Then
            pathData &= String.Format("M{0},{1} ", x, -y)
        Else
            pathData &= String.Format("L{0},{1} ", x, -y)
        End If

    Next

    ' 描画
    Graph.Data = StreamGeometry.Parse(pathData)

End Sub