C# Wpf 将鼠标坐标转换为缩放的画布坐标答案

【问题标题】：C# Wpf Convert mouse coordinates to scaled canvas coordinatesC# Wpf 将鼠标坐标转换为缩放的画布坐标
【发布时间】：2015-03-13 08:28:31
【问题描述】：

我正在尝试将鼠标点击坐标转换为画布坐标。画布可以动态缩放。我实现了 ScaleTransforms 整个画布的缩放功能。画布本身有一个图像作为窗口的背景。当用户使用鼠标滚轮时，背景会放大和缩小。如何转换鼠标点击坐标以反映图像上的缩放位置？

缩放地图图像代码：

    private void Canvas_MouseWheel(object sender, MouseWheelEventArgs e)
    {
       double zoom = 1.1;

        scaleTransform.CenterX = this.Width / 2;
        scaleTransform.CenterY = this.Height / 2;

        if (e.Delta > 0)
        {
            scaleTransform.ScaleX *= zoom;
            scaleTransform.ScaleY *= zoom;
        }
        else
        {
            scaleTransform.ScaleX /= zoom;
            scaleTransform.ScaleY /= zoom;
        }

        // Zoom out limits
        if(scaleTransform.ScaleX <= 1) { scaleTransform.ScaleX = 1; }
        if(scaleTransform.ScaleY <= 1) { scaleTransform.ScaleY = 1; }

        // Zoom in limits
        if(scaleTransform.ScaleX >= 2.4) { scaleTransform.ScaleX = 2.4; }
        if(scaleTransform.ScaleY >= 2.4) { scaleTransform.ScaleY = 2.4; }

    }

为地图图像添加图标：

    private void mapImage_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {

        var v = e.GetPosition(this);

        var temp = GetImage("Assets/icon.png");

        Canvas.SetLeft(temp, v.X);
        Canvas.SetTop(temp, v.Y);

        temp.Width = 32;
        temp.Height = 32;
        temp.RenderTransform = new ScaleTransform(0.5, 0.5, temp.Width / 2, temp.Height / 2);
        mainCanvas.Children.Add(temp);

    }

我基本上是在尝试用鼠标左键向地图添加一个新的图标图像。但是，如果在我尝试添加图标时放大地图，则图像的位置与您单击的地图位置无关。它会飞到远离鼠标光标的地方。如何根据地图图像的比例转换坐标？

注意：如果我根本不放大（图像的比例为 1），那么图标将准确放置在我单击的位置。

【问题讨论】：

你能把你尝试过的东西和你期望/得到的结果写上一些代码吗？会更容易！

标签： c# wpf canvas mouse scaling

【解决方案1】：

我猜 e.GetPosition 方法的参数“this”很麻烦。您需要从画布而不是窗口中获取相对位置。参数应该是画布“mainCanvas”。所以，后一种方法是这样的：

private void mainCanvas_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
  var v = e.GetPosition(mainCanvas);

  var temp = new Image
  {
    Source = new BitmapImage(new Uri("Assets/icon.png", UriKind.Relative)),
    Width = 32,
    Height = 32
  };

  Canvas.SetLeft(temp, v.X - temp.Width / 2);
  Canvas.SetTop(temp, v.Y - temp.Height / 2);

  mainCanvas.Children.Add(temp);
}

【讨论】：

【解决方案2】：

最简单的方法是获取原始图像大小，然后查看 WPF 图像控件（或您正在使用的任何其他控件）的实际宽度，并获取它们之间的比例

var eventLocation = e.GetPosition(MainImage);
var scaleRatio = SourceBitmap.Width / YourWpfImageControlName.ActualWidth;
var realX = eventLocation.X * scaleRatio;
var realY = eventLocation.Y * scaleRatio;

这假设您使用统一缩放（例如，保持纵横比），但是您可以通过对高度进行相同的计算并将其应用于 Y 值来独立地对 X 和 Y 轴进行相同的比例计算

【讨论】：