comment faire pivoter l'image dans wpf

Question

J'ai récemment appris à faire pivoter un bitmapImage en utilisant les classes 'TransformedBitmap' et 'RotateTransformed'. Maintenant, je suis capable d'effectuer des rotations dans le sens des aiguilles d'une montre sur mes images. Mais comment est-ce que je FLIP une image? Je ne peux pas trouver la classe (es) pour effectuer des retournements horizontaux et verticaux d'un BitmapImage. S'il vous plaît aidez-moi à comprendre comment le faire. Par exemple, si mon image était un dessin qui ressemblait à un 'd', alors un retournement vertical donnerait quelque chose comme un 'q', et un flip horizontal donnerait quelque chose comme un 'b'.

Answer 1

Use a ScaleTransform avec un ScaleX de -1 pour horizontal et ScaleY de -1 pour le retournement vertical, appliqué à la propriété RenderTransform de l'image. En utilisant RenderTransformOrigin="0.5,0.5" sur l'image fait que votre image se tourna autour de son centre, de sorte que vous ne devez appliquer un TranslateTransform supplémentaire pour se déplacer en place:

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

pour les retournements horizontal et

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

pour vertical.

Si vous voulez le faire dans le code-behind, en C#, il devrait ressembler à ceci:

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

Answer 2

Vous pouvez utiliser ScaleTransform avec négatif ScaleX/ScaleY:

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

Answer 3

Pour donner votre flip un peu plus "profondeur" de sorte que cela ressemble plus à un vrai retournement, vous voulez probablement faire une transformation de biais avec une transformation à plus petite échelle.

Vous souhaitez incliner l'objet d'environ 20 degrés pour lui donner l'apparence d'un retournement en 3D. Ceci est un flip 3D pauvres de l'homme. Vous pouvez accomplir un vrai retournement 3D dans WPF mais cela prend un peu plus de travail. Cela vous donnera l'animation qui semble plus propre, puis vous pouvez basculer la visibilité sur deux panneaux différents pour donner l'impression d'un avant et un arrière à votre élément.

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

Intéressant 3d flippable usercontrol: http://flipcontrol.codeplex.com/releases/view/22358

Dans votre cas, vous devrez afficher sur les deux faces de la même image.

Answer 5

Une astuce rapide pour basculer horizontalement (uniquement) btw consiste à définir la propriété FlowDirection sur FlowDirection.RightToLeft. Si le composant est un conteneur, certains enfants peuvent interpréter la propriété différemment (logique personnalisée)

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> 

Créez un composant d'image comme celui-ci. Et lorsque sa source est définie, l'image va basculer de gauche à droite.