web-dev-qa-db-fra.com

comment retourner l'image en wpf

J'ai récemment appris à faire pivoter une image BitmapImage à l'aide des classes 'TransformedBitmap' et 'RotateTransformed'. Maintenant, je peux effectuer des rotations dans le sens des aiguilles d'une montre sur mes images. Mais comment puis-je retourner une image? Je ne trouve pas la ou les classes pour effectuer des retournements horizontaux et verticaux d'une image BitmapImage. S'il vous plaît, aidez-moi à comprendre comment le faire. Par exemple, si mon image était un dessin qui ressemblait à un «d», un retournement vertical donnerait quelque chose comme un «q» et un retournement horizontal donnerait quelque chose comme «b».

c#wpfimage
45
Shashank

Utilisez un ScaleTransform avec ScaleX de -1 pour horizontal et ScaleY de -1 pour le basculement vertical, appliqué à la propriété RenderTransform de l'image. L'utilisation de RenderTransformOrigin="0.5,0.5" sur l'image permet de s'assurer que votre image est retournée autour de son centre, de sorte que vous n'aurez pas à appliquer de TranslateTransform supplémentaire pour la déplacer en place:

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

pour renversement 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 en code-behind, en C #, cela devrait ressembler à ceci:

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

Pour donner à votre bascule un peu plus de "profondeur" afin que cela ressemble plus à un vrai bascule, vous voudrez probablement faire une transformation asymétrique avec une transformation à plus petite échelle.

Vous voudriez incliner l'objet d'environ 20 degrés pour lui donner l'impression de basculer en 3D. C'est un retournement 3D mans pauvre. Vous pouvez réaliser un véritable retournement 3D dans WPF, mais cela prend un peu plus de travail. 

Vous obtiendrez ainsi une animation plus propre, puis vous pourrez basculer la visibilité sur deux panneaux différents pour donner l’impression d’un recto et d’un verso à 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>
9
Brad Cunningham

Intéressant contrôle 3d utilisable: http://flipcontrol.codeplex.com/releases/view/22358

Dans votre cas, vous devrez afficher la même image des deux côtés.

2
mcanti

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

2
George Birbilis

Vous pouvez utiliser ScaleTransform avec __ ScaleX/ScaleY:

  <TextBlock Text="P">
   <TextBlock.RenderTransform>
    <ScaleTransform ScaleY="-1" ScaleX="-1" />
   </TextBlock.RenderTransform>
  </TextBlock>
1
Anvaka
<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 bascule de gauche à droite.

0
user4828078