Question

我最近学会了如何使用'TransformedBitmap'和'RotateTransformed'类来旋转BitmapImage。现在我能够在我的图像上执行顺时针旋转。但是如何翻转图像呢？我找不到类来执行BitmapImage的水平和垂直翻转。请帮我弄清楚如何做到这一点。例如，如果我的图像是一个看起来像'd'的图形，那么垂直翻转会产生类似'q'的东西，而水平翻转会产生类似'b'的图像。

Answer 1

Use a ScaleTransform，水平的ScaleX为-1，垂直翻转的ScaleY为-1，应用于图像的RenderTransform属性。在图片上使用RenderTransformOrigin="0.5,0.5"可确保您的图片在其中心周围翻转，因此您无需再应用其他TranslateTransform将其移动到位：

<Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
    <ScaleTransform ScaleX="-1"/>
  </Image.RenderTransform>
</Image>

用于水平翻转和

<Image Source="a.jpg" Padding="5" RenderTransformOrigin="0.5,0.5">
  <Image.RenderTransform>
    <ScaleTransform ScaleY="-1"/>
  </Image.RenderTransform>
</Image>

表示垂直。

如果你想在代码隐藏中执行它，在C＃中应该看起来像这样：

img.RenderTransformOrigin = new Point(0.5,0.5);
ScaleTransform flipTrans = new ScaleTransform();
flipTrans.ScaleX = -1;
//flipTrans.ScaleY = -1;
img.RenderTransform = flipTrans;

Answer 2

为了使你的翻转更加“深度”，这样看起来更像真正的翻转，你可能想要用较小的比例变换进行倾斜变换。

您可能希望将对象倾斜约20度，使其看起来像是在3D中翻转。这是一个可怜的勒芒3D翻转。您可以在WPF中完成真正的3D翻转，但这需要更多的工作。

这将为您提供看起来更干净的动画，然后您可以在两个不同的面板上切换可见性，以给出元素正面和背面的印象。

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
  <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.3" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.12" Value="0.6" />                              
  <SplineDoubleKeyFrame KeyTime="00:00:00.15" Value="0.8" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
  <SplineDoubleKeyFrame KeyTime="00:00:00.0" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="0.9" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="1" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.2" Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyControl" Storyboard.TargetProperty="(FrameworkElement.RenderTransform).(TransformGroup.Children)[1].(SkewTransform.AngleY)">
  <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.06" Value="-10" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.09" Value="-20" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.1" Value="20" />
  <SplineDoubleKeyFrame KeyTime="00:00:00.18" Value="0" />
</DoubleAnimationUsingKeyFrames>

Answer 3

有趣的3d可翻转用户控件：http://flipcontrol.codeplex.com/releases/view/22358

在您的情况下，您必须在两侧显示相同的图像。

Answer 4

水平（仅）翻转btw的快速技巧是将FlowDirection属性设置为FlowDirection.RightToLeft。如果组件是一个容器，那么它的一些子代可能会以不同的方式解释该属性（自定义逻辑）

Answer 5

您可以ScaleTransform使用否定ScaleX / ScaleY：

  <TextBlock Text="P">
   <TextBlock.RenderTransform>
    <ScaleTransform ScaleY="-1" ScaleX="-1" />
   </TextBlock.RenderTransform>
  </TextBlock>

Answer 6

<Image x:Name="SampleImage"  Margin="0" RenderTransformOrigin="0.5,0.5" >
        <Image.LayoutTransform>
            <TransformGroup>
                <ScaleTransform ScaleY="1" ScaleX="-1"/>
                <SkewTransform AngleY="0" AngleX="0"/>
                <RotateTransform Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.LayoutTransform>
    </Image>

像这样创建一个图像组件。当设置其源时，图像将从左向右翻转。

如何在wpf中翻转图像

6 个答案: