Silverlightで画像を回転させて変換する（

Question

）

Silverlightで画像を回転しようとしていますが、正しく表示されないようです。私はこれまでにいくつかの異なる方法を試してきましたが、答えを見つけることができません。

<Image Opacity=".5" x:Name="compassImg" Source="compass.png"> 
     <Image.RenderTransform> 
      <RotateTransform x:Name="compassRotator"></RotateTransform> 
     </Image.RenderTransform> 
    </Image> 
+ 
    void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e) 
    { 
     Dispatcher.BeginInvoke(() => 
     { 
      compassRotator.Angle = e.SensorReading.TrueHeading; 
     }); 
    } 

と

<Image Opacity=".5" x:Name="compassImg" Source="compass.png"></Image> 
+ 

    void compass_CurrentValueChanged(object sender, SensorReadingEventArgs<CompassReading> e) 
    { 
     Dispatcher.BeginInvoke(() => 
     { 
      compassImg.RenderTransform = new CompositeTransform() 
      { 
       CenterX = 0.5, 
       CenterY = 0.5, 
       Rotation = e.SensorReading.TrueHeading 
      }; 
      //OR (variations with 0.5 and width/2 for both composite and rotate 
      compassImg.RenderTransform = new RotateTransform() 
      { 
       CenterX = compassImg.Width/2, 
       CenterY = compassImg.Height/2, 
       Angle = e.SensorReading.TrueHeading 
      }; 
     }); 
    } 

それは回転しますが、それは常に0/0の周りを回転します。私は間違って何をしていますか？

Answer 1

MSDNを検索し、2番目の形式が正しいです。 http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.centerx.aspx（これは分数ではなく座標です）。

ただし、変換を適用する場所にブレークポイントを設定すると、幅がNaNになることがあります。これは、幅が設定されていないためです。あなたが望むのはActualWidthです。

トランスフォームの探索には、次のスニペットをXAMLに貼り付けて試してみてください。

<StackPanel HorizontalAlignment="Left"> 
    <TextBlock>Center X</TextBlock> 
    <Slider 
     Name="RTX" Minimum="0.0" Maximum="116" /> 
    <TextBlock>Center Y</TextBlock> 
    <Slider 
     Name="RTY" Minimum="0.0" Maximum="800"/> 
    <TextBlock>Angle</TextBlock> 
    <Slider 
     Name="Angle" Minimum="0.0" Maximum="360" /> 
</StackPanel> 

<Image Source="{Binding ImagePath}" Name="image1"> 
    <Image.RenderTransform> 
     <RotateTransform Angle="{Binding ElementName=Angle,Path=Value}" 
      CenterX="{Binding ElementName=RTX, Path=Value}" 
      CenterY="{Binding ElementName=RTY, Path=Value}"/>     
    </Image.RenderTransform> 
</Image> 

Answer 2

プロパティ "0.5、0.5"にRenderTransformOriginプロパティを設定する必要があります。これは、要素をその中心の周りに回転させます。