视口内图形相对于鼠标坐标的实际坐标 [英] Real coordinates for graph inside viewport relative to mouse coordinates

问题描述

正如标题中所指定的那样，我已经开始在一个简单的应用程序上工作，该应用程序包含在主框架窗口(双缓冲面板)中.在该面板内可以绘制一些图形，让我们考虑一下该面板是绘制在其中的元素的简单视口.

此处添加了两个功能，即平移和缩放可以缩放的对象，以及使用在MouseDown和Move事件上更新的增量以及OnMouseWheel用于更新缩放变换的绘画事件内的缩放变换和转换变换.

当缩放比例大于1(比例为100％)时，尝试添加功能以支持在视口内将Node(图形元素)创建到精确位置之后，真正的问题就出现了.

方案1 ->黄色矩形已正确创建，并正好位于鼠标指针的位置，如下图所示(比例== 1).

方案2 ->黄色矩形相对于鼠标位置以aprox视口比例尺高度偏移.如下图所示(比例== 1.4)为40％.鼠标按下则填充红色圆圈(光标位置保持不变，仅进行了缩放).

测试场景->在发布之前，我尝试了很多方法，但均未成功，这是其中一种:

我真的很感谢任何形式的输入，甚至是与更改OXY图形方法有关的想法(因为转换函数使用相对坐标).

解决方案

也许这会有所帮助:

PointF ScaleUnscale(PointF p, float offX, float offY, float sX, float sY, bool scale)
{
    PointF pf = p;

    if (scale)
    {
        pf = new PointF( ( p.X  - offX )/ sX, (p.Y - offY)/ sY) ;
    }
    else
    {
        pf = new PointF( p.X * sX + offX, p.Y * sY + offY);
    }
    return pf;
}

这会将鼠标点缩放到画布点或向后缩放:

cPoints.Add(ScaleUnscale(e.Location, .., true));

使用经过翻译和缩放的Graphics对象进行测试:

g.TranslateTransform(offX, offY);
g.ScaleTransform(scaleX, scaleY);

As I have specified in the title, I have started to work on a simple application what contains in the main frame window, a double buffered panel. Inside this panel some graphics can be drawn, let's consider this panel is a simple viewport for the elements drawn inside.

Two functionalities were added here, pan and zoom what can scale transform and translate transform inside paint event using a delta updated on MouseDown and Move events and OnMouseWheel for updating the scale transform.

The real problem has arrived after trying to add a functionality to support creation of a Node (graphic element) inside viewport to a precise location when zoom is greater than 1 (scale 100%).

Scenario 1 -> The yellow rectangle was created correctly and is positioned exactly at the mouse pointer location, as in shown the image below (scale == 1).

Scenario 2 -> The yellow rectangle is highly shifted relative to mouse position with a viewport scale of aprox. 40%, as in the image below (scale == 1.4). The red filled circle was the mouse pressed (the cursor position remains unchanged, only a zoom was made).

Test scenario -> I have tried a lot of methods without success before posting there, this is one of them:

I really appreciate any kind of inputs, even ideas related to changing the OXY graph approach (as the translate functions use relative coordinates).

解决方案

Maybe this will help:

PointF ScaleUnscale(PointF p, float offX, float offY, float sX, float sY, bool scale)
{
    PointF pf = p;

    if (scale)
    {
        pf = new PointF( ( p.X  - offX )/ sX, (p.Y - offY)/ sY) ;
    }
    else
    {
        pf = new PointF( p.X * sX + offX, p.Y * sY + offY);
    }
    return pf;
}

This scales a mouse point to a canvas point or back:

cPoints.Add(ScaleUnscale(e.Location, .., true));

Tested with a translated and scaled Graphics object:

g.TranslateTransform(offX, offY);
g.ScaleTransform(scaleX, scaleY);

这篇关于视口内图形相对于鼠标坐标的实际坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！