平移和变焦图像

问题描述

我要创建WPF中一个简单的图像浏览器，使用户可以：

I want to create a simple image viewer in WPF that will enable the user to:

• 泛（通过鼠标拖动图像）。


• 变焦（采用了滑盖）。


• 显示覆盖图（矩形选择为例）。


• （如果需要带滚动条）显示原始图像。

你能解释一下怎么办呢？

Can you explain how to do it?

我没有在网上找到一个很好的样本。
我应该使用视框？或的ImageBrush？
我需要的ScrollViewer？

I didn't find a good sample on the web.Should I use ViewBox? Or ImageBrush? Do I need ScrollViewer?

谢谢！

推荐答案

我解决这个问题的方法是放置边框与它的ClipToBounds属性设置为True中的图片。图像上的RenderTransformOrigin随后设置为0.5,0.5因此图像将开始缩放的图像的中心。所述的RenderTransform也被设定为含有ScaleTransform和TranslateTransform一个的TransformGroup

The way I solved this problem was to place the image within a Border with it's ClipToBounds property set to True. The RenderTransformOrigin on the image is then set to 0.5,0.5 so the image will start zooming on the center of the image. The RenderTransform is also set to a TransformGroup containing a ScaleTransform and a TranslateTransform.

然后我处理的图像上的鼠标滚轮事件来实现变焦

I then handled the MouseWheel event on the image to implement zooming

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的当前值，这是什么更新，以实现平移。

To handle the panning the first thing I did was to handle the MouseLeftButtonDown event on the image, to capture the mouse and to record it's location, I also store the current value of the TranslateTransform, this what is updated to implement panning.

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。

Then I handled the MouseMove event to update the 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;
    }
}

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

Finally don't forget to release the mouse capture.

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

对于选择手柄调整大小这可以用装饰器来完成，请查看本文了解更多信息。

这篇关于平移和变焦图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！