WPF Rotating image with arbitrary angle

问题

I am trying to make BitmapImage myImage1 and myImage2 rotate to an arbitrary angle (could be 45, 30, 10... etc.)

The error I'm getting is that I can only rotate it to 90, 180, or 270 degrees.

XAML Code:

<Window x:Class="CSWPFAnimatedImage.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="WPF Animated Image Sample" Height="300" Width="300" Loaded="Window_Loaded">
<Window.Resources>
    <Storyboard x:Key="VisibleToInvisible" Completed="VisbleToInvisible_Completed" >
        <DoubleAnimation Storyboard.TargetName="TransparentStop"
                        Storyboard.TargetProperty="Offset" To="0"  Duration="0:0:2"   />
        <DoubleAnimation Storyboard.TargetName="BlackStop"
                        Storyboard.TargetProperty="Offset" To="0" Duration="0:0:2"
                        />
    </Storyboard>
    <Storyboard x:Key="InvisibleToVisible" Completed="InvisibleToVisible_Completed">
        <DoubleAnimation Storyboard.TargetName="TransparentStop"
                        Storyboard.TargetProperty="Offset" To="1"  Duration="0:0:2"   />
        <DoubleAnimation Storyboard.TargetName="BlackStop"
                        Storyboard.TargetProperty="Offset" To="1" Duration="0:0:2"   />
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="Window.Loaded">
        <EventTrigger.Actions>
            <BeginStoryboard Storyboard="{StaticResource  VisibleToInvisible}"/>
        </EventTrigger.Actions>
    </EventTrigger>
</Window.Triggers>
<Grid Name="grid">        
    <Image x:Name="myImage2" Source="Images/image2.jpg" />
    <Image x:Name="myImage1" Source="Images/image1.jpg">
        <Image.OpacityMask>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                <GradientStop Offset="1" Color="Black" x:Name="BlackStop"/>
                <GradientStop Offset="1" Color="Transparent" x:Name="TransparentStop"/>
            </LinearGradientBrush>
        </Image.OpacityMask>
    </Image>
</Grid> </Window>

And here is the code in C#:

using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Media.Animation;
using System.Windows.Media.Imaging;

namespace CSWPFAnimatedImage
{
    /// <summary>
    /// Interaction logic for Window1.xaml
    /// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    int nextImageIndex;
    List<BitmapImage> images = new List<BitmapImage>();

    private void Window_Loaded(object sender, RoutedEventArgs e)
    {
        // Initialize the images collection
        images.Add(new BitmapImage(new Uri("Images/image1.jpg", UriKind.Relative)));
        images.Add(new BitmapImage(new Uri("Images/image2.jpg", UriKind.Relative)));
        images.Add(new BitmapImage(new Uri("Images/image3.jpg", UriKind.Relative)));
        images.Add(new BitmapImage(new Uri("Images/image4.jpg", UriKind.Relative)));

        nextImageIndex = 2;
    }

    private void VisbleToInvisible_Completed(object sender, EventArgs e)
    {
        // Change the source of the myImage1 to the next image to be shown
        // and increase the nextImageIndex
        this.myImage1.Source = images[nextImageIndex++];

        // If the nextImageIndex exceeds the top bound of the collection,
        // get it to 0 so as to show the first image next time
        if (nextImageIndex == images.Count)
        {
            nextImageIndex = 0;
        }

        // Get the InvisibleToVisible storyboard and start it
        Storyboard sb = this.FindResource("InvisibleToVisible") as Storyboard;
        sb.Begin(this);

    }

    private void InvisibleToVisible_Completed(object sender, EventArgs e)
    {
        // Change the source of the myImage2 to the next image to be shown
        // and increase the nextImageIndex
        this.myImage2.Source = images[nextImageIndex++];

        // If the nextImageIndex exceeds the top bound of the collection,
        // get it to 0 so as to show the first image next time
        if (nextImageIndex == images.Count)
        {
            nextImageIndex = 0;
        }

        // Get the VisibleToInvisible storyboard and start it
        Storyboard sb = this.FindResource("VisibleToInvisible") as Storyboard;
        sb.Begin(this);

        this.turnToAnyAngle(); // Make it rotate to angle set below
    }  

    private void turnToAnyAngle()
    {
        TransformedBitmap tb = new TransformedBitmap();

        var biRotated = new BitmapImage();
        biRotated.BeginInit();
        biRotated.UriSource = new Uri(@"INSERT_IMAGE_PATH_HERE", UriKind.RelativeOrAbsolute);
        biRotated.EndInit();

        tb.BeginInit();
        tb.Source = biRotated;
        RotateTransform transform = new RotateTransform();
        transform.Angle = 45;
        tb.Transform = transform;
        tb.EndInit();

        myImage2.Source = tb;

    }

}
}

In the C# method turnToAnyAngle() I get the following error:

An unhandled exception of type 'System.InvalidOperationException' occurred in PresentationCore.dll

Additional information: Transform must be a combination of scales, flips, and 90 degree rotations

I need to rotate this image without affecting the rendering, so rendertransform is not a possible solution.

回答1:

You can only rotate in increments of 90 degrees using a TransformedBitmap see here

What you should be doing instead is perform a RenderTranform on the Image control (which hosts the bitmap) see here

来源：https://stackoverflow.com/questions/29585378/wpf-rotating-image-with-arbitrary-angle