как к зеркальному изображению в wpf
Я недавно изучил, как повернуть BitmapImage с помощью классов 'TransformedBitmap' и 'RotateTransformed'. Теперь я могу выполнить по часовой стрелке вращения на своих изображениях. Но как я ЗЕРКАЛЬНО ОТРАЖАЮ изображение? Я не могу найти, что класс (классы) выполняет горизонтальные и вертикальные зеркальные отражения BitmapImage. Помогите мне выяснить, как сделать это. Например, если бы мое изображение было рисунком, который был похож на 'd', то затем вертикальное зеркальное отражение привело бы к чему-то как 'q', и горизонтальное зеркальное отражение привело бы к чему-то как 'b'.
3 ответа
Используйте 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>
для вертикального.
Если вы хотите сделать это в code-behind, то в C# это должно выглядеть примерно так:
img.RenderTransformOrigin = new Point(0.5,0.5);
ScaleTransform flipTrans = new ScaleTransform();
flipTrans.ScaleX = -1;
//flipTrans.ScaleY = -1;
img.RenderTransform = flipTrans;
Вы можете использовать ScaleTransform с отрицательным значением ScaleX / ScaleY :
<TextBlock Text="P">
<TextBlock.RenderTransform>
<ScaleTransform ScaleY="-1" ScaleX="-1" />
</TextBlock.RenderTransform>
</TextBlock>
Чтобы придать вашему перевороту немного больше "глубины", чтобы он выглядел как настоящий переворот, вы, вероятно, захотите выполнить преобразование с перекосом и преобразование с меньшим масштабом.
Вы хотите перекосить объект примерно на 20 градусов, чтобы он выглядел так, как будто переворачивается в 3D. Это бедный 3D-переворот. В WPF можно сделать настоящее 3D-переворачивание, но для этого потребуется немного больше работы.
Это даст вам анимацию, которая выглядит чище, затем вы можете переключать видимость на двух разных панелях, чтобы создать впечатление передней и задней стороны вашего элемента.
<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>