如何在wpf中翻转图像

Posted

技术标签:

【中文标题】如何在wpf中翻转图像【英文标题】:how to flip Image in wpf 【发布时间】:2011-03-01 14:50:25 【问题描述】:

我最近学习了如何使用“TransformedBitmap”和“RotateTransformed”类来旋转 BitmapImage。现在我可以对我的图像进行顺时针旋转。但是如何翻转图像?我找不到执行 BitmapImage 水平和垂直翻转的类。请帮我弄清楚该怎么做。例如,如果我的图像是一个看起来像“d”的图形,那么垂直翻转会产生类似“q”的东西,而水平翻转会产生类似“b”的东西。

【问题讨论】:

【参考方案1】:
<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>

像这样创建一个图像组件。并且当它的来源被设置时,图像会从左向右翻转。

【讨论】:

【参考方案2】:

顺便说一句,水平(仅)翻转的一个快速技巧是将 FlowDirection 属性设置为 FlowDirection.RightToLeft。如果组件是一个容器,它的一些子组件可能会以不同的方式解释属性(自定义逻辑)

【讨论】:

这只是救了我,因为它翻转图像而不移动它。 顺便说一句,如果您尝试使用 -1 进行 x-scale 的 ScaleTransform,如果它正在移动,您可能错过了 RenderTransformOrigin="0.5,0.5"。然而,使用 FlowDirection 读取代码(或放入 XAML)确实更直接,而不是转换方法【参考方案3】:

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

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

【讨论】:

对于翻转容器控制检查clipflair.codeplex.com,在Client\ZUI文件夹下的FlipPanel项目【参考方案4】:

为了让您的翻转更加“深度”,使其看起来更像是真正的翻转,您可能需要使用较小比例的变换进行倾斜变换。

您可能希望将对象倾斜大约 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>

【讨论】:

【参考方案5】:

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;

【讨论】:

@shashank 不客气,你应该接受答案。 我如何翻转BitmapFrame【参考方案6】:

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

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

【讨论】:

以上是关于如何在wpf中翻转图像的主要内容,如果未能解决你的问题,请参考以下文章

WPF中使用Navigation切换Page时,如何实现渐变或者翻转动画?

如何在 konvajs 中翻转旋转的图像

如何在 PHP 中并排绘制翻转图像和原始图像?

如何在 JavaScript 中水平翻转图像

如何在wordpress中悬停时翻转产品图像?

CSS 如何在CSS中更改翻转图像(MouseOver)