当前位置：文江博客话题详情

像 Google 地图一样的图像移动

发布于 2024-10-31 18:18:59 字数 104 浏览 4 评论 0原文

我有一个大图像，需要在较小的容器（或类似的容器）中显示。用户应该能够向上、向下、向左和向右移动图像。正确的。它应该像谷歌地图一样。

您知道我可以从哪里开始以及如何解决这个问题吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

離殇 2024-11-07 18:18:59

也许像 DeepZoom 这样的东西会起作用。

您还可以创建一个具有平移功能的简单 UserControl 或 CustomControl，例如，有一个画布可以处理一些鼠标事件，以操作图像上的 TranslateTransform（该图像应该是画布的子级）。

事件处理概要：

// Add this transform to the image as RenderTransform
private TranslateTransform _translateT = new TranslateTransform();
private Point _lastMousePos = new Point();

private void This_MouseDown(object sender, MouseButtonEventArgs 
{
    if (e.ChangedButton == PanningMouseButton)
    {
        this.Cursor = Cursors.ScrollAll;
        _lastMousePos = e.GetPosition(null);
        this.CaptureMouse();
    }
}

private void This_MouseUp(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == PanningMouseButton)
    {
        this.ReleaseMouseCapture();
        this.Cursor = Cursors.Arrow;
    }
}

private void This_MouseMove(object sender, MouseEventArgs e)
{
    if (this.IsMouseCaptured)
    {
        Point newMousePos = e.GetPosition(null);
        Vector shift = newMousePos - _lastMousePos;
        _translateT.X += shift.X;
        _translateT.Y += shift.Y;
        _lastMousePos = newMousePos;
    }
}

Maybe something like DeepZoom would work.

You could also create a simple UserControl or CustomControl with panning functionality, e.g. have a canvas which handles some mouse events to manipulate a TranslateTransform on your image which should be a child of the canvas.

Event handling outline:

// Add this transform to the image as RenderTransform
private TranslateTransform _translateT = new TranslateTransform();
private Point _lastMousePos = new Point();

private void This_MouseDown(object sender, MouseButtonEventArgs 
{
    if (e.ChangedButton == PanningMouseButton)
    {
        this.Cursor = Cursors.ScrollAll;
        _lastMousePos = e.GetPosition(null);
        this.CaptureMouse();
    }
}

private void This_MouseUp(object sender, MouseButtonEventArgs e)
{
    if (e.ChangedButton == PanningMouseButton)
    {
        this.ReleaseMouseCapture();
        this.Cursor = Cursors.Arrow;
    }
}

private void This_MouseMove(object sender, MouseEventArgs e)
{
    if (this.IsMouseCaptured)
    {
        Point newMousePos = e.GetPosition(null);
        Vector shift = newMousePos - _lastMousePos;
        _translateT.X += shift.X;
        _translateT.Y += shift.Y;
        _lastMousePos = newMousePos;
    }
}

回复收藏 0 原文

~没有更多了~