MAKOTO3.NET Blog

複数の変形を組み合わせるときは、<TransformGroup>タグで変形方法の指定を囲みます。たとえば、四角形を横方向に2倍に拡大したあと、30度回転するなら、次のようになります。

  <Rectangle.RenderTransform>
    <TransformGroup>
     <ScaleTransform ScaleX="2" ScaleY="1" />
     <RotateTransform Angle="30" />
    </TransformGroup>
  </Rectangle.RenderTransform>

実際のサンプルは次のとおりです。

http://www.makoto3.net/xaml/silverlight0054/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>
   <TransformGroup>
     <ScaleTransform ScaleX="2" ScaleY="1" />
     <RotateTransform Angle="30" />
   </TransformGroup>
  </Rectangle.RenderTransform>
 </Rectangle>
</Canvas>

なお、 <TransformGroup>～</TransformGroup>内の変形指定の順番を変えると、結果が異なる点に注意が必要 です。たとえば、上記サンプルの<TransformGroup>～</TransformGroup>内を、次のように書き換えたとします。

    <TransformGroup>
     <RotateTransform Angle="30" />
     <ScaleTransform ScaleX="2" ScaleY="1" />
   </TransformGroup>  

すると、結果は次のようになります。

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

これは、最初に30度回転して、回転した状態で横に2倍に拡大するからです。

JavaScriptでSilverlight 目次

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