MAKOTO3.NET Blog

図形を回転するには<RotateTransform>を使います。回転角度宇はAngle属性で指定できます。次は、内部をビデオブラシで塗りつぶした四角形を、30度回転したサンプルです。

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

ソースは次の通りです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <MediaElement x:Name="myMediaElement"
  Source="../silverlight0043/bear.wmv"
  Opacity="0" IsMuted="True" />
 <Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
  <Rectangle.Fill>
   <VideoBrush SourceName="myMediaElement" />
  </Rectangle.Fill>
  <Rectangle.RenderTransform>
   <RotateTransform Angle="30" />
  </Rectangle.RenderTransform>
 </Rectangle>
</Canvas>

回転の中心となるのは、四角形の左上です。楕円などのその他の図形についても、その図形を囲む四角形の左上が回転の中心となります。

回転の中心を変更するなら、CenterX属性とCenterY属性を指定します。次は、CenterXとCenterYを指定したサンプルです。

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

XAMLのソースは次のとおりです。

【myxaml.xaml】

<Canvas
   xmlns="http://schemas.microsoft.com/client/2007"   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 <MediaElement x:Name="myMediaElement"  Source="../silverlight0043/bear.wmv"  Opacity="0" IsMuted="True" />
 <Rectangle Width="100" Height="100" Canvas.Top="100" Canvas.Left="100" StrokeThickness="10" Stroke="#ff8800">
  <Rectangle.Fill>
   <VideoBrush SourceName="myMediaElement" />
  </Rectangle.Fill>
  <Rectangle.RenderTransform>
   <RotateTransform Angle="30" CenterX="50" CenterY="50"/>
  </Rectangle.RenderTransform>
 </Rectangle>
</Canvas>

CenterXとCenterYを指定することで、四角形の左上を基点に、右方向に50ピクセル、下方向に50ピクセルの位置を回転の中心にしています。

四角形の幅と高さは100ピクセルなので、四角形のちょうど真ん中が中心点となって30度回転することになります。

JavaScriptでSilverlight 目次

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