MAKOTO3.NET Blog

1つ1つの点を指定して曲線や直線を描くのが<Path>です。点はData属性で指定します。たとえば、次は(10,10)から(100,100)に幅10ピクセルの青い線を引く記述です。

<Path Data="M 10,10 L 100,100" Stroke="blue" StrokeThickness="10" />

Mは「移動」を意味し、Lは直線を意味します。つまり、上記は(10,10)に移動し、そこから(100,100)まで直線を引けという意味になります。

ベジェ曲線も引けます。ベジェ曲線を引くときは、「S 制御点 終点」の形式で制御点と終点を指定します。次はその例です。

<Path Data="M 10,100 S 50,200 100,100" Stroke="lime" StrokeThickness="5" />

この場合、(10,100)に移動し、そこから(50,200)を制御点とし、終点を(100,100)とするベジェ曲線を引きます。

またData属性の最後に Z を指定すると、自動的に始点と終点が結ばれて図形が閉じます。その場合は、Fill属性で塗りつぶしの色を指定することが可能です。

以下に<Path>のサンプルを示します。

http://www.makoto3.net/xaml/silverlight0034/index.html

以下がXAMLのソースです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<Path Data="M 10,10 L 10,90 90,90" Stroke="blue" StrokeThickness="10" />
<Path Data="M 110,10 L 110,90 190,90 190,10" Stroke="red" StrokeThickness="5" />
<Path Data="M 200,10 L 250,90 290,10" Stroke="green" StrokeThickness="5" />

<Path Data="M 10,100 S 50,200 100,100 Z" Stroke="lime" StrokeThickness="5" />
<Path Data="M 100,100 S 150,250 200,100Z" Stroke="crimson" StrokeThickness="8" Fill="gold"/>
<Path Data="M 200,100 S 250,400 300,100" Stroke="navy" StrokeThickness="5" />

<Path Data="M 10,200 S 50,300 100,200 150,250 200,280 250,150 300,10" Stroke="purple" StrokeThickness="10" />

<Path Data="M 10,280 S 50,100 100,200 200,200 300,280" Stroke="white" StrokeThickness="15" Opacity="0.8"/>

</Canvas>

上のサンプルで使用した属性をまとめておきます。なお、<Path>そのものは、ミニ言語と呼んでよいくらいさまざまな指定が可能のようです。より詳細なトピックはSilverlight 1.0 SDKのヘルプに載っていますので、参考にしてください。。

JavaScriptでSilverlight 目次

このページは xfy Blog Editor  を利用して作成されました。