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，第二种形式是正确的。 http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.centerx.aspx（这是坐标，而不是分数）。

但是，如果在应用变换的位置放置断点，则可能会发现Width为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

您需要将RenderTransformOrigin属性设置为“0.5,0.5”，这会将元素围绕其中心旋转。

使用Transform在Silverlight中旋转图像（控件）

2 个答案: