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

WPF下实现图片的放大缩小移动

        在windows 7里面有自带的图片查看器，这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放，并且放大后可以随意拖动。下面我们在WPF中实现这个功能。

        在实现这个功能之前先说下使用的主要函数和步骤:

            ScaleTransform：进行缩放的函数。

           TranslateTransform：进行平移的函数。

           TransformGroup.Inverse：缩放图片后，把缩放后图片上的坐标转换为在原始图片的坐标，从而使图片正常缩放。

•        步骤如下：
  
  1. 定义一个TranslateTransform实例来修改图片显示的起始位置。

  2. 定义一个ScaleTransform实例来缩放图片的大小，你可以通过设置CenterX和CenterY的值来指定图片缩放的原点。

     这里使用TransformGroup.Inverse来转换放缩原点

  3. 将两个Transform放到一个TransformGroup里面，这样Image控件就可以在显示的时候综合使用两个Transform的效果了。
  4. 将TransformGroup放到当前窗体的Resource里面，这样窗体里面所有的Image控件都可以引用到这个实例。
  5. 在鼠标移动事件里面修改TranslateTransform对应的值。

  6. 在鼠标滚轮事件里面修改ScaleTransform的ScaleX和ScaleY的值来缩放图片

• XAML代码：
  

  <Grid x:Name="IMG" Width="500" Height="300" Background="Black">
          <Grid.Resources>           
              <TransformGroup x:Key="Imageview">
                  <ScaleTransform/>
                  <TranslateTransform/>
              </TransformGroup>
   </Grid.Resources>
  

  // 创建TransformGroup 集合，设立关键Key，并加入缩放和移动时所需函数。

   <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Disabled" Background="Wheat"   Cursor="SizeAll"
                    Margin="5" Focusable="False" x:Name="BackFrame">
              <ContentControl  MouseLeftButtonDown="IMG1_MouseLeftButtonDown"   
                               MouseLeftButtonUp="IMG1_MouseLeftButtonUp"
                               MouseMove="IMG1_MouseMove"
                               MouseWheel="IMG1_MouseWheel" >
                  <Image Name="IMG1" Source="/Image1;component/S.jpg" RenderTransform="{StaticResource Imageview}" Stretch="Uniform" RenderOptions.BitmapScalingMode="NearestNeighbor" ></Image>
              </ContentControl>
          </ScrollViewer>
  </Grid>
  

  
  

  //创建ScrollViewer容器来放置在ContentControl  中添加鼠标事件和图片，并把图片RenderTransform的变换信息设置为静态资源 Imageview。RenderOptions.BitmapScalingMode="NearestNeighbor"使图片的变幻过程得到优化。防止出现移动和放缩图片模糊的情况。

  
  
  
• C#代码：
  

   private bool mouseDown;
          private Point mouseXY;
  
  
    private void IMG1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
          {
              var img = sender as ContentControl;
              if (img == null)
              {
                  return;
              }
              img.CaptureMouse();
              mouseDown = true;
              mouseXY = e.GetPosition(img);
          }
  

  
  

  鼠标按下时的事件，启用捕获鼠标位置并把坐标赋值给mouseXY.

  private void IMG1_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
          {
              var img = sender as ContentControl;
              if (img == null)
              {
                  return;
              }
              img.ReleaseMouseCapture();
              mouseDown = false;
          }
  

  
  

  鼠标松开时的事件，停止捕获鼠标位置。
  

   private void IMG1_MouseMove(object sender, MouseEventArgs e)
          {
              var img = sender as ContentControl;
              if (img == null)
              {
                  return;
              }
              if (mouseDown)
              {
                  Domousemove(img, e);
              }
          }
  

  
  

  鼠标移动时的事件，当鼠标按下并移动时发生

  Domousemove(img, e);函数
  

  private void Domousemove(ContentControl img, MouseEventArgs e)
          {
              if (e.LeftButton != MouseButtonState.Pressed)
              {
                  return;
              }
              var group = IMG.FindResource("Imageview") as TransformGroup;
              var transform = group.Children[1] as TranslateTransform;
              var position = e.GetPosition(img);
              transform.X-= mouseXY.X- position.X;
              transform.Y -= mouseXY.Y - position.Y;
              mouseXY = position;
          }
  

  
  

  group.Children中的第二个是移动的函数

  它根据X.Y的值来移动。并把当前鼠标位置赋值给mouseXY.

   private void IMG1_MouseWheel(object sender, MouseWheelEventArgs e)
          {
              var img = sender as ContentControl;
              if (img == null)
              {
                  return;
              }
              var point = e.GetPosition(img);
              var group = IMG.FindResource("Imageview") as TransformGroup;
              var delta = e.Delta * 0.001;
              DowheelZoom(group, point, delta);
          }
  

  
  

  鼠标滑轮事件，得到坐标，放缩函数和滑轮指数，由于滑轮值变化较大所以*0.001.

  private void DowheelZoom(TransformGroup group, Point point, double delta)
          {
              var pointToContent = group.Inverse.Transform(point);
              var transform = group.Children[0] as ScaleTransform;
              if (transform.ScaleX + delta < 0.1) return;
              transform.ScaleX += delta;
              transform.ScaleY += delta;
              var transform1 = group.Children[1] as TranslateTransform;
              transform1.X = -1 * ((pointToContent.X * transform.ScaleX) - point.X);
              transform1.Y = -1 * ((pointToContent.Y * transform.ScaleY) - point.Y);
          }
  

  Group.Children中的第一个是放缩函数。

  如果ScaleX+滑轮指数小于0.1时就返回。

  var pointToContent = group.Inverse.Transform(point);

  获取此变换的逆变换的值

  使图片放缩后，放缩原点也随之变化。

  
  

    vartransform1 = group.Children[1] as TranslateTransform;

              transform1.X = -1 *((pointToContent.X * transform.ScaleX) - point.X);

              transform1.Y = -1 *((pointToContent.Y * transform.ScaleY) - point.Y);
  

  用来捕获图片放缩中心。使放缩图片时可以放大缩小自己想要的点。
  
• 关于放缩中心问题

  下面这段代码可用来说明上面捕获图片放缩中心那段代码的含义
  

  private void DowheelZoom(TransformGroup group, Point point ,double delta)
          {
              var transform = group.Children[0] as ScaleTransform;
              if (transform.ScaleX + delta < 0.1) return;
              transform.CenterX= point1.X-1;
             transform.CenterY= point1.Y-1;
              transform.ScaleX += delta;
              transform.ScaleY += delta;
          }
  

  
  

  如果这样写也可以时图片放大缩小，并且在自己设定的点放大缩小，但是等图片放大到一定程度时，放大后，把鼠标移到这个点，此时的放缩原点随着鼠标到了这个点处。鼠标获取的坐标是相对与图片来说的。所以当在这个点处进行缩放时，图片会一下切换到以这一点为中心进行缩放。
  

  为了避免这种跳跃式的变换。就要把鼠标的坐标变换成原图片即没有放缩过的图片上的坐标。这样放缩就不会出现跳跃了。

  这种变换坐标看起来麻烦，其实WPF已经给我们提供了函数

  TransformGroup.Inverse可以把转换后图片上的坐标转换为在原始图片的坐标。

   

  var pointToContent =group.Inverse.Transform(point);

              vartransform = group.Children[0] as ScaleTransform;

              if(transform.ScaleX + delta < 1) return;

              transform.CenterX =pointToContent.X;

              transform.CenterY =pointToContent.Y;

  这样就很大程度上减少了图片的跳跃。但还是有小幅度的差距。

  所以运用算法可以来弥补中间的差距。具体参看第一次加入的DowheelZoom

   

  最终图片的放大缩小效果图