方法: 2 次ベジエ曲線を作成する

  • [アーティクル]

この例では、2 次ベジエ曲線を作成する方法を示します。 2 次ベジエ曲線を作成するには、PathGeometry、PathFigure、QuadraticBezierSegment クラスを使用します。

例

次の例では、(10,100) から (300,100) の 2 次ベジエ曲線が描画されます。 この曲線には、(200,200) の制御点があります。

Extensible Application Markup Language (XAML) では、属性構文を使用してパスを記述できます。

<Path Stroke="Black" StrokeThickness="1" 
  Data="M 10,100 Q 200,200 300,100" />

(この属性構文では、実際には軽量バージョンの PathGeometry である StreamGeometry を作成します。詳細については、パス マークアップ構文のページを参照してください)。

XAML では、オブジェクト要素構文を使用して 2 次ベジエ曲線を描画することもできます。 次の例は、前の XAML の例と同じです。

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

この例は、より大きなサンプルの一部です。完全なサンプルについては、「ジオメトリのサンプル」を参照してください。

関連項目