2010-06-09 19 views
39

Recientemente aprendí a rotar una imagen de mapa de bits usando las clases 'TransformedBitmap' y 'RotateTransformed'. Ahora puedo realizar rotaciones en el sentido de las agujas del reloj en mis imágenes. ¿Pero cómo VUELO una imagen? No puedo encontrar la clase (es) para realizar volteos horizontales y verticales de una BitmapImage. Por favor, ayúdame a descubrir cómo hacerlo. Por ejemplo, si mi imagen era un dibujo que parecía una 'd', entonces una flip vertical daría como resultado una 'q', y una flip horizontal daría como resultado una 'b'.cómo voltear la imagen en wpf

Respuesta

98

Use a ScaleTransform con un ScaleX de -1 para horizontal y ScaleY -1 para el volteo vertical, aplicado a la propiedad de RenderTransform de la imagen. Usando RenderTransformOrigin="0.5,0.5" en la imagen asegura que su imagen se volcó alrededor de su centro, por lo que no tendrá que aplicar una TranslateTransform adicional para moverlo en su lugar:

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

para voltear horizontal y

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

para vertical

Si desea hacerlo en código subyacente, en C# debe ser algo como esto:

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

:) Usted fue más rápido. +1. – Anvaka

+0

¿Cómo puedo hacer esto a través de C# – Shashank

+0

si funciona – Shashank

1

Usted puede utilizar ScaleTransform con negativo ScaleX/ScaleY:

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

Para dar su flip un poco más de "profundidad" para que se vea más como un flip verdadero que probablemente quiera hacer una transformación oblicua con una transformación de menor escala.

Es posible que desee inclinar el objeto unos 20 grados para que parezca que está volteando en 3D. Este es un pobre mans 3D Flip. Puede lograr un verdadero salto en 3D en WPF, pero eso requiere un poco más de trabajo.

Esto le dará la animación que se ve más limpia, luego puede alternar la visibilidad en dos paneles diferentes para dar la impresión de un frente y una parte trasera a su elemento.

<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> 
2

Interesante 3d usercontrol flippable: http://flipcontrol.codeplex.com/releases/view/22358

En su caso, usted tendrá que mostrar en ambos lados de la misma imagen.

+0

para voltear control de contenedor echa un vistazo a http://clipflair.codeplex.com, en la carpeta Cliente \ ZUI el proyecto FlipPanel –

2

Un truco rápido para voltear horizontalmente (solo) por cierto es establecer la propiedad FlowDirection en FlowDirection.RightToLeft. Si el componente es un contenedor sin embargo, algunos niños de la misma pueden interpretan de manera diferente la propiedad (lógica personalizada)

+0

Esto me acaba de salvar, ya que voltea la imagen sin moverla. –

+1

por cierto, probablemente le faltaba RenderTransformOrigin = "0.5,0.5" si se movía si probaba ScaleTransform con -1 para x-scale.Sin embargo, es mucho más sencillo leer el código (o ponerlo en XAML) también con FlowDirection, en lugar del enfoque de transformaciones. –

0
<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> 

Crear un componente de imagen como ésta. Y cuando se establece su fuente, la imagen se volteará de izquierda a derecha.