一尘不染

平移和缩放图像

c#

我想在WPF中创建一个简单的图像查看器,使用户能够:

  • 平移(通过鼠标拖动图像)。
  • 缩放(使用滑块)。
  • 显示叠加层(例如,矩形选择)。
  • 显示原始图像(必要时使用滚动条)。

你能解释怎么做吗?

我在网上找不到很好的样本。我应该使用ViewBox吗?还是ImageBrush?我需要ScrollViewer吗?


阅读 264

收藏
2020-05-19

共1个答案

一尘不染

我解决此问题的方法是将图像的ClipToBounds属性设置为True,将其放置在Border中。然后将图像上的RenderTransformOrigin设置为0.5,0.5,以便图像开始在图像的中心缩放。RenderTransform也设置为包含ScaleTransform和TranslateTransform的TransformGroup。

然后,我处理了图像上的MouseWheel事件以实现缩放

private void image_MouseWheel(object sender, MouseWheelEventArgs e)
{
    var st = (ScaleTransform)image.RenderTransform;
    double zoom = e.Delta > 0 ? .2 : -.2;
    st.ScaleX += zoom;
    st.ScaleY += zoom;
}

要处理平移,我要做的第一件事是处理图像上的MouseLeftButtonDown事件,捕获鼠标并记录其位置,我还存储了TranslateTransform的当前值,此值已更新以实现平移。

Point start;
Point origin;
private void image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    image.CaptureMouse();
    var tt = (TranslateTransform)((TransformGroup)image.RenderTransform)
        .Children.First(tr => tr is TranslateTransform);
    start = e.GetPosition(border);
    origin = new Point(tt.X, tt.Y);
}

然后,我处理了MouseMove事件以更新TranslateTransform。

private void image_MouseMove(object sender, MouseEventArgs e)
{
    if (image.IsMouseCaptured)
    {
        var tt = (TranslateTransform)((TransformGroup)image.RenderTransform)
            .Children.First(tr => tr is TranslateTransform);
        Vector v = start - e.GetPosition(border);
        tt.X = origin.X - v.X;
        tt.Y = origin.Y - v.Y;
    }
}

最后,不要忘记释放鼠标捕获。

private void image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
    image.ReleaseMouseCapture();
}

至于调整大小的选择句柄,可以使用装饰器来完成,请查看本文以获取更多信息。

2020-05-19