wpf 图片平移、旋转和缩放

原创 2015年11月17日 18:19:36

因项目需要图片预览,所以做了一个预览的功能,在次备份:

xaml代码:

<Window x:Class="ImagePreView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="图片预览" Height="700" Width="1000" WindowStartupLocation="CenterScreen" WindowStyle="None" AllowsTransparency="True">
    <Window.Resources>
        <!--图片删除按钮-->
        <Style x:Key="DeleteButtonStyleForEllipse" TargetType="{x:Type Button}">
            <Setter Property="Background" Value="Black"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid >
                            <Ellipse Name="ellipse" Fill="Black" Opacity="0.5"/>
                            <Line X1="0" Y1="0" X2="0" Y2="15" HorizontalAlignment="Center" VerticalAlignment="Center" Stroke="White" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
                                <Line.RenderTransform>
                                    <RotateTransform Angle="45" />
                                </Line.RenderTransform>
                            </Line>
                            <Line X1="0" Y1="0" X2="15" Y2="0" HorizontalAlignment="Center" VerticalAlignment="Center"  Stroke="White" StrokeThickness="1" RenderTransformOrigin="0.5,0.5">
                                <Line.RenderTransform>
                                    <RotateTransform Angle="45" />
                                </Line.RenderTransform>
                            </Line>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="ellipse" Property="Fill" Value="Red"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <PathGeometry x:Key="pathData">
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure StartPoint="130,80" >
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <ArcSegment Point="120,20" Size="30,30" IsLargeArc="True" SweepDirection="Clockwise"/>
                                <LineSegment Point="120,14" />
                                <LineSegment Point="128,22" />
                                <LineSegment Point="120,30" />
                                <LineSegment Point="120,24" />
                                <ArcSegment Point="126,80" Size="26,26" IsLargeArc="True"/>
                                <LineSegment Point="130,80" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>


        <Color x:Key="BlueTheme.ButtonSubmitColor.Normal" A="255" R="0" G="176" B="3"/>
        <Color x:Key="BlueTheme.ButtonSubmitColor.MouseOver" A="255" R="36" G="114" B="22"/>
        <Color x:Key="BlueTheme.ButtonSubmitColor.Pressed" A="255" R="50" G="214" B="53"/>
        <!--提交按钮样式-->
        <Style x:Key="GreenThemeButtonStyleForSumbit" TargetType="{x:Type Button}">
            <Setter Property="Width"  Value="100"/>
            <Setter Property="Height" Value="30"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border x:Name="grid"  CornerRadius="3">
                            <Border.Background>
                                <SolidColorBrush x:Name="borderBursh" Color="{StaticResource BlueTheme.ButtonSubmitColor.Normal}"/>
                            </Border.Background>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource BlueTheme.ButtonSubmitColor.Normal}"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource BlueTheme.ButtonSubmitColor.MouseOver}"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
                                                <EasingColorKeyFrame KeyTime="0" Value="{StaticResource BlueTheme.ButtonSubmitColor.Pressed}"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="Color" Storyboard.TargetName="borderBursh">
                                                <EasingColorKeyFrame KeyTime="0" Value="Gray"/>
                                            </ColorAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter HorizontalAlignment="Center" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsFocused" Value="True"/>
                            <Trigger Property="IsDefaulted" Value="True"/>
                            <Trigger Property="IsMouseOver" Value="True"/>
                            <Trigger Property="IsPressed" Value="True"/>
                            <Trigger Property="IsEnabled" Value="False"/>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" Value="#FF3DB6CF"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
        </Style>
    </Window.Resources>
    <Border BorderThickness="1" BorderBrush="Black">
        <Grid Background="Black" Opacity="0.7" OpacityMask="Gray">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="60"/>
            </Grid.RowDefinitions>
            <Grid x:Name="root" >
                <Image x:Name="img" MouseWheel="Image_MouseWheel" MouseLeftButtonDown="Image_MouseLeftButtonDown" 
                MouseMove="Image_MouseMove" RenderTransformOrigin="0.5,0.5" Stretch="Uniform" >
                    <Image.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform x:Name="translate" />
                            <ScaleTransform x:Name="transform" />
                            <RotateTransform x:Name="rotate"/>
                        </TransformGroup>
                    </Image.RenderTransform>
                </Image>
                <Button Width="30" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource DeleteButtonStyleForEllipse}" Click="Button_Click_2"/>
            </Grid>
            <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Button Width="100" Height="40" Click="Button_Click"  Style="{StaticResource GreenThemeButtonStyleForSumbit}">
                    <Path Stroke="blue" StrokeThickness="2" Fill="blue" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Width="30" Height="30" Data="{StaticResource pathData}">
                        <Path.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="-1"/>
                                <TranslateTransform X="30"/>
                            </TransformGroup>
                        </Path.RenderTransform>
                    </Path>
                </Button>
                <Button Width="100" Height="40" Click="Button_Click_1" Style="{StaticResource GreenThemeButtonStyleForSumbit}" Margin="50,0,0,0">
                    <Path Stroke="blue" StrokeThickness="2" Fill="blue" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Width="30" Height="30" Data="{StaticResource pathData}"/>
                </Button>
            </StackPanel>
        </Grid>
    </Border>
</Window>



.cs代码:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;


namespace Hlwdsj.Clf.Zlys.Common
{
    /// <summary>
    /// ImagePreview.xaml 的交互逻辑
    /// </summary>
    public partial class ImagePreview : Window
    {
        Point dragStart;
        int imageAngle;


        public ImagePreview(string path)
        {
            InitializeComponent();
            img.Source = new BitmapImage(new Uri(path, UriKind.RelativeOrAbsolute));
        }
        /// <summary>
        /// 图片鼠标按下事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            dragStart = e.GetPosition(root);
        }
        /// <summary>
        /// 图片鼠标滚轮滚动事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Image_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            var mosePos = e.GetPosition(img);


            var scale = transform.ScaleX * (e.Delta > 0 ? 1.2 : 1 / 1.2);
            scale = Math.Max(scale, 1);


            transform.ScaleX = scale;
            transform.ScaleY = scale;


            if (scale == 1)        //缩放率为1的时候,复位
            {
                translate.X = 0;
                translate.Y = 0;
            }
            else                //保持鼠标相对图片位置不变
            {
                var newPos = e.GetPosition(img);


                translate.X += (newPos.X - mosePos.X);
                translate.Y += (newPos.Y - mosePos.Y);
            }
        }
        /// <summary>
        /// 图片鼠标移动事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Image_MouseMove(object sender, MouseEventArgs e)
        {
            if (e.LeftButton != MouseButtonState.Pressed)
            {
                return;
            }


            var current = e.GetPosition(root);
            //将坐标都转换成image坐标系下的坐标
            Point point0 = root.TranslatePoint(current, (UIElement)img);
            Point point1 = root.TranslatePoint(dragStart, (UIElement)img);
            translate.X += (point0.X - point1.X);
            translate.Y += (point0.Y - point1.Y);


            dragStart = current;
        }
        /// <summary>
        /// 图片左转事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            imageAngle = (imageAngle + 90) % 360;
            rotate.Angle = imageAngle;
        }
        /// <summary>
        /// 图片右转事件
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            imageAngle = (imageAngle - 90) % 360;
            rotate.Angle = imageAngle;
        }


        private void Button_Click_2(object sender, RoutedEventArgs e)
        {
            this.Close();
        }
    }
}



源代码下载:

http://download.csdn.net/detail/yulongguiziyao/9277593

相关文章推荐

wpf 使用 storyboard 设置 控件 移动动画

private void moveTo(Point deskPoint, Viewbox ell, double)         {             //Point p = e.GetP...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

【C#/WPF】Image图片的Transform变换:平移、缩放、旋转

Transform

Wpf一个简单的物体移动动画

  • nnsword
  • nnsword
  • 2012年11月02日 14:52
  • 4192

wpf下实现图片的放大缩小和平移

原文地址:http://blog.csdn.net/hsienhua/article/details/7859191 //---------------------------------------...

WPF- 图像的旋转、转换、裁剪和拉伸

WPF- 图像的旋转、转换、裁剪和拉伸 (前台) 通过 WPF,用户可以使用 BitmapImage 的属性或使用其他 BitmapSource 对象(如 CroppedBitmap 或 F...

WPF图片自动移动

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

WPF图片控件的旋转、缩放、翻转

WPF中对图片进行旋转是应用RotateTransform类,而进行缩放和翻转则是应用ScaleTransform类。 旋转:                           Rota...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:wpf 图片平移、旋转和缩放
举报原因:
原因补充:

(最多只允许输入30个字)