Silverlightでは、Pathクラスを使うことによりさまざまな曲線を描画することができます。また、曲線だけではなく、直線や円もこのPathクラスで描画することができます。

Pathクラスでよく使用されるプロパティ

・ Stroke (線の色)

・ StrokeThickness (線の幅)

・ Fill (塗りつぶす色)

・ Data (一番重要な線の軌跡の定義)

 

使用例

 

1.　直線

単に直線を引くだけであれば、Dataプロパティに、始点Mと、終点Lを入れるだけで実現できます。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

直線： L {x座標}, {y座標} (例：L 30, 25)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、L終点)-->
<Path Stroke="Black" StrokeThickness="5" Data="M 30,50 L 350, 200" />

 

2.　横線

水平な横線を引くには、Hコマンドとx座標を入れるだけで可能です。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

横線： H {x座標} (例：H 30)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、H終点)-->
<Path Stroke="Red" StrokeThickness="5" Data="M 30,50 H 350" />

 

3.　縦線

垂直な縦線を引くには、Vコマンドとy座標を入れるだけで可能です。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

縦線： V {y座標} (例：V 120)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、V終点)-->
<Path Stroke="Red" StrokeThickness="5" Data="M 30,50 V 200" />

 

4.　3次ベジエ曲線

Cコマンドと制御点の座標を2つ指定することで、それらを通る3次ベジエ曲線を描画することができます。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

曲線： C {制御点1x}, {制御点1y} {制御点2x}, {制御点2y} {終点x}, {終点y}

(例：C 10, 20 20, 50 40, 46)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、C曲線)-->
<Path Stroke="Red" StrokeThickness="5" Data="M 30,50 C 100,300 280,150 350,250" />

 

5.　2次ベジエ曲線

Qコマンドと制御点の座標を1つ指定すれば、2次ベジエ曲線を描画することができます。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

曲線： Q {制御点1x}, {制御点1y} {終点x}, {終点y}

(例：Q 10, 20 40, 46)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、Q曲線)-->
<Path Stroke="Red" StrokeThickness="5" Data="M 30,50 Q 100,300 350,250" />

 

6.　平滑3次ベジエ曲線

平滑3次ベジエ曲線は、前の3次ベジエ曲線コマンドの制御点と、ここで指定した制御点を使い曲線を作ります。前に3次ベジエ曲線コマンドがない場合は、始点（現在の点）が制御点に使われます。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

曲線： C {制御点1x}, {制御点1y} {制御点2x}, {制御点2y} {終点x}, {終点y}

(例：C 10, 20 20, 50 40, 46)

曲線： S {制御点2x}, {制御点2y} {終点x}, {終点y}

(例：S 10, 20 40, 46)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、C3次曲線、S3次平滑曲線)-->
<Path Stroke="Red" StrokeThickness="5" 
	Data="M 30,50 C 250,200 100,300 300,250 S 50, 120 300,50" />

 

7.　平滑2次ベジエ曲線

平滑2次ベジエ曲線は、前の2次ベジエ曲線コマンドの制御点と、ここで指定した制御点を使い曲線を作ります。前に2次ベジエ曲線コマンドがない場合は、始点（現在の点）が制御点に使われます。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

曲線： Q {制御点1x}, {制御点1y} {終点x}, {終点y}

(例：C 10, 20 20, 50 40, 46)

曲線： T {制御点2x}, {制御点2y} {終点x}, {終点y}

(例：T 10, 20 40, 46)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、Q2次曲線、T2次平滑曲線)-->
<Path Stroke="Red" StrokeThickness="5" 
      Data="M 30,50 Q 250,200 300,250 T 200, 250 300,50" />

 

8.　楕円

Ellipseクラスを使わなくても、Pathクラスのaコマンドで楕円を描画することができます。

 

Dataプロパティ書式

始点： M {x座標}, {y座標} (例：M 10, 20)

曲線： A {x半径}, {y半径} {円弧の回転角度θ}, {円弧が180度を超える場合は1、それ以外は0}

{円弧の回転が時計回りなら1、逆なら0} {終点x}, {終点y}

(例：A 40, 30 100 0 1 200, 20)

実行例

XAML

<!--Pathクラスで線の描画、枠線の色(Stroke)、枠線の幅(StrokeThickness)
線の軌跡(Data:M始点、A楕円)-->
<Path Stroke="Red" StrokeThickness="5" 
      Data="M 130,50 A 20,40 90 1 1 130, 40" />

write:2008/11/03

トップページへ