在WPF通过右键拖动控制图像缩放

最近在做一个简单的Dicom查看器工具。

项目地址:https://github.com/zhaotianff/ImageViewer.git

遇到一个需要就是需要通过右键对图像进行缩放。

 

一开始我是通过处理MouseMove事件，然后再判断右键按下，再通过鼠标移动的方向及偏移进行缩放。

例如，右键按住鼠标往左下角移动是放大，右上角移动是缩小。

private void Border_MouseMove(object sender, MouseEventArgs e)
{
    if(e.RightButton == MouseButtonState.Pressed)
    {
        var point = e.GetPosition(this.image);

        if (LastZoomPoint.X == 0 && LastZoomPoint.Y == 0)
        {
            LastZoomPoint = point;
            return;
        }

        var xPos = point.X - LastZoomPoint.X;
        var yPos = point.Y - LastZoomPoint.Y;

        if (Math.Abs(xPos) < 10 && Math.Abs(yPos) < 10)
            return;

        var ratio = currentRatio;
        if (xPos < 0)
            ratio *= 1.1f;
        else
            ratio *= 0.9f;

        LimitRatio(ref ratio);

        scaleTransform.CenterX = this.image.ActualWidth / 2.0;
        scaleTransform.CenterY = this.image.ActualHeight / 2.0;

        scaleTransform.ScaleX *= ratio / currentRatio;
        scaleTransform.ScaleY *= ratio / currentRatio;

        currentRatio = ratio;
        LastZoomPoint = point;
    }
}

 

但是这种方式实现出遇到一个问题，就是鼠标滑过其它控件或者超出窗口，就会导致缩放异常。

 

查了下资料，正确的实现方式应该如下：

1、处理MouseDown事件，然后调用元素的CaptureMouse函数，将鼠标强制捕获到指定元素

2、处理MouseMove事件，判断移动方向，及delta，进行缩放

3、处理MouseUp事件，调用元素的ReleaseMouseCapture函数，释放捕获。

 

下面我们用一个示例程序演示一下

 

首先我们创建一个界面，界面上放置一个Image控件

    <Grid>
        <Image Source="e.jpeg" Stretch="Fill" MouseRightButtonDown="Image_MouseRightButtonDown" MouseRightButtonUp="Image_MouseRightButtonUp" MouseMove="Image_MouseMove" Name="image" LayoutUpdated="image_LayoutUpdated">
            <Image.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1"></ScaleTransform>
            </Image.RenderTransform>
        </Image> 
    </Grid>

 

全局变量

   private Point startPoint;
   private bool isDragging = false;

 

处理RightMouseDown事件

获取鼠标按下的起始点并捕获鼠标

  private void Image_MouseRightButtonDown(object sender, MouseButtonEventArgs e)
  {
      startPoint = e.GetPosition(this);
      isDragging = true;
      image.CaptureMouse();
  }

 

处理RightMouseUp事件

释放鼠标的捕获

        private void Image_MouseRightButtonUp(object sender, MouseButtonEventArgs e)
        {
            isDragging = false;
            image.ReleaseMouseCapture();
        }

 

处理LayoutUpdated事件

这个事件的作用是更新缩放的中心点

        /// <summary>
        /// 布局更新，更新缩放的中心点为控件的中心
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void image_LayoutUpdated(object sender, EventArgs e)
        {
            var scaleTransform = this.image.RenderTransform as ScaleTransform;
            scaleTransform.CenterX = this.image.ActualWidth / 2;
            scaleTransform.CenterY = this.image.ActualHeight / 2;
        }

 

处理MouseMove事件

这里就是缩放的核心逻辑

private void Image_MouseMove(object sender, MouseEventArgs e)
{
    if (isDragging)
    {
        Point current = e.GetPosition(this);

        double dx = current.X - startPoint.X;
        double dy = current.Y - startPoint.Y;

        double zoomDelta = (dy - dx) * 0.005;

        var scaleTransform = this.image.RenderTransform as ScaleTransform;

        double newScaleX = scaleTransform.ScaleX + zoomDelta;
        double newScaleY = scaleTransform.ScaleY + zoomDelta;

        //限制最大缩放比例
        newScaleX = Math.Max(0.1, Math.Min(5.0, newScaleX));
        newScaleY = Math.Max(0.1, Math.Min(5.0, newScaleY));

        scaleTransform.ScaleX = newScaleX;
        scaleTransform.ScaleY = newScaleY;

        startPoint = current;
    }
}

 

运行效果