it-swarm.com.ru

как перевернуть изображение в wpf

Недавно я узнал, как вращать BitmapImage, используя классы TransformedBitmap и RotateTransformed. Теперь я могу выполнять вращение по часовой стрелке на моих изображениях. Но как мне перевернуть изображение? Я не могу найти класс (ы) для выполнения горизонтального и вертикального отражения BitmapImage. Пожалуйста, помогите мне разобраться, как это сделать. Например, если мое изображение было рисунком, который выглядел как «d», то вертикальное отражение привело бы к чему-то вроде «q», а горизонтальное отражение привело бы к чему-то вроде «b».

45
Shashank

Используйте 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;
108
luvieere

Чтобы придать вашему флипу немного больше «глубины», чтобы это выглядело больше как настоящий флип, вы, вероятно, захотите сделать косое преобразование с меньшим масштабным преобразованием.

Вы хотели бы наклонить объект примерно на 20 градусов, чтобы он выглядел так, как будто он переворачивается в 3D. Это 3D-бросок бедняка. Вы можете выполнить настоящий 3D-переворот в WPF, но это займет немного больше работы. 

Это даст вам анимацию, которая выглядит чище, а затем вы можете переключать видимость на двух разных панелях, чтобы создать впечатление передней и задней сторон вашего элемента.

<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

Интересный 3d-контроль пользователя: http://flipcontrol.codeplex.com/releases/view/22358

В вашем случае вам придется отображать с обеих сторон одно и то же изображение.

2
mcanti

Быстрый прием для горизонтального (только) переворачивания, между прочим, состоит в том, чтобы установить свойство FlowDirection в FlowDirection.RightToLeft. Если компонент является контейнером, некоторые его потомки могут интерпретировать свойство по-разному (пользовательская логика)

2
George Birbilis

Вы можете использовать ScaleTransform с отрицательным 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>

Создайте компонент изображения, подобный этому. И когда его источник установлен, изображение будет переворачиваться слева направо.

0
user4828078