如何使用鼠标坐标,平移和缩放比例确定原始坐标?

时间:2015-07-08 11:19:57

标签: c# canvas coordinate-transformation

如果没有特定的编程语言,我会问这个问题。

我有一个画布控件,无法进行缩放和平移视图(拖动)。我在画布上加载了一个图像,我的目标是在画布上单击鼠标时获取坐标。

当我点击画布时的事件给我鼠标的坐标(mouse_x,mouse_y),平移测量(delta_x,delta_y)和缩放(1.0表示没有缩放,x> 1.0更多缩放,x&lt ; 1.0缩放)。

当我单击画布而不移动图像并进行缩放时,图像坐标与鼠标坐标相同。行。

real_x = mouse_x;

real_y = mouse_y;

enter image description here

当我单击画布并移动图像但没有缩放时,图像坐标是添加翻译度量的鼠标坐标。

real_x = mouse_x + delta_x;

real_y = mouse_y + delta_y;

enter image description here

问题是当我进行缩放时,我不知道使用缩放值获取原始坐标的公式是什么。

enter image description here

编辑:

这3种解决方案不起作用。

代码:

     void DrawLineOnDoubleClick(object sender, RoutedEventArgs e)
     {
        var mouse_x = this._mouseDownPos.X;
        var mouse_y = this._mouseDownPos.Y;

        var delta_x = this.TranslateX;
        var delta_y = this.TranslateY;

        var scale = this.Zoom;

        var windowwidth = 1000;
        var windowheight = 500;

        // OPTION 1. IT DOES NOT WORK
        var real_x = windowwidth / 2 - (windowwidth / 2 + delta_x) * scale + mouse_x;
        var real_y = windowheight/ 2 - (windowheight/ 2 + delta_y) * scale + mouse_y;

        // OPTION 2. IT DOES NOT WORK
        var real_x = windowwidth / 2 - windowwidth / 2 * scale + delta_x * scale + mouse_x;
        var real_y = windowheight / 2 - windowheight / 2 * scale + delta_y * scale + mouse_y;

        // OPTION 3. IT DOES NOT WORK
        var real_x = windowwidth / 2 - windowwidth / 2 * scale + delta_x * scale + mouse_x * scale;
        var real_y = windowheight / 2 - windowheight / 2 * scale + delta_y * scale + mouse_y * scale;

        // Draw line from last clicked to new clicked position
        ...
   }

例如,使用解决方案2,当我将图像的第一个角点击到图像的对角时,缩放比例为0.4(缩放),将线条绘制到鼠标位置的远处(当我执行相同操作时)缩放(1.0)并且没有平移(拖动)正确绘制线条。

enter image description here

2 个答案:

答案 0 :(得分:0)

我忘记了回答。这个控件有一个为你带来魔力的方法。

        //
        // Summary:
        //     Translates a point relative to this element to coordinates that are relative
        //     to the specified element.
        //
        // Parameters:
        //   point:
        //     The point value, as relative to this element.
        //
        //   relativeTo:
        //     The element to translate the given point into.
        //
        // Returns:
        //     A point value, now relative to the target element rather than this source
        //     element.
        public Point TranslatePoint(Point point, UIElement relativeTo);

答案 1 :(得分:-1)

我假设从图像中心应用了比例。您需要知道图像的原始大小和比例因子来计算图像的新位置。它应该是这样的:

real_x = delta_x + originalWidth*(1-scale)/2 + mouse_x
real_y = delta_y + originalHeight*(1-scale)/2 + mouse_y

编辑:信息,该比例原点位于窗口的中心

real_x = windowwidth/2 - (windowwidth / 2 + delta_x)*scale + mouse_x;
real_y = windowheight/2 - (windowheight / 2 + delta_y)*scale + mouse_y;

第二编辑: 什么是POS:和截图中的REAL?它们似乎完全相同。 我重新考虑了这个公式 - 不确定这是否是你需要的:

real_x = windowwidth / 2 - windowwidth / 2 * scale + delta_x * scale + mouse x;
real_y = windowheight / 2 - windowheight / 2 * scale + delta_y * scale + mouse_y;

如果不起作用,也许您需要使用“mouse_x * scale”和“mouse_y * scale”。

第三编辑: 可能就这么简单:

real_x = (mouse_x + delta_x) * scale
real_y = (mouse_y + delta_y) * scale

或者可能是“/ scale”而不是“* scale”?