Real coordinates for graph inside viewport relativ

Question

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).

Answer 1

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);