使用Transform在Silverlight中旋转图像(控件)

本文关键字：图像 控件 旋转 Transform Silverlight 使用 | 更新日期: 2023-09-27 18:19:28

我试图在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旋转。我做错了什么？

使用Transform在Silverlight中旋转图像(控件)

我查找了MSDN，第二个表单是正确的。http://msdn.microsoft.com/en-us/library/system.windows.media.rotatetransform.centerx.aspx（这是坐标，而不是分数）。

但是，如果在应用转换的位置放置断点，则可能会发现Width为NaN。这是因为没有设置宽度。您想要的是实际宽度。

探索转换的一个好方法是将以下片段粘贴到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>

您需要将RenderTransformOrigin属性设置为"0.5，0.5"，这将使元素围绕其中心旋转。

相关文章：