c# - resource - cómo voltear la imagen en wpf

image wpf example

Question

Recientemente aprendí cómo 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''.

Answer 1

Interesante control de usuario flippable en 3d: http://flipcontrol.codeplex.com/releases/view/22358

En su caso, deberá mostrar a ambos lados la misma imagen.

Answer 2

Para darle a su flip un poco más de "profundidad" para que se parezca más a un flip verdadero, es probable que desee hacer una transformación oblicua con una transformación de menor escala.

Te recomendamos 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>

Answer 3

Puede usar ScaleTransform con ScaleX / ScaleY negativo:

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

Answer 4

Un truco rápido para voltear horizontalmente (solo) por cierto es establecer la propiedad FlowDirection en FlowDirection.RightToLeft. Sin embargo, si el componente es un contenedor, algunos de sus hijos pueden interpretar la propiedad de manera diferente (lógica personalizada)

Answer 5

Utilice ScaleTransform con ScaleX de -1 para horizontal y ScaleY de -1 para volteo vertical, aplicado a la propiedad RenderTransform la imagen. El uso de RenderTransformOrigin="0.5,0.5" en la imagen asegura que su imagen se voltee alrededor de su centro, por lo que no tendrá que aplicar una TranslateTransform adicional para moverla a su lugar:

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

para voltear horizontalmente y

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

para vertical

Si quieres hacerlo en código subyacente, en C # debería verse más o menos así:

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

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>

Crea un componente de imagen como este. Y cuando se establece su fuente, la imagen se volteará de izquierda a derecha.