C# How to zoom to cursor location using SkiaSharp control?

Question

I have a 2D map I want to zoom in to based on the cursor X and Y coordinates. Currently I have some working code, but if I move the cursor to a new position after an initial zoom the next zoom is slightly off. I've been trying to figure this out for a while but I can't get my head around the math. Its probably something simple I just can't visualize the right way to do this.

Sample code.

    float ZoomMax = 7f;
    float ZoomMin = 1f;

    private float[] MapPan = new float[] { 0, 0 };
    private float MapScale = 1f;

    protected override void OnMouseWheel(MouseEventArgs e)
    {
        var coordinates = panelMap.PointToClient(Cursor.Position);

        if (e.Delta > 0)
        {
            if (MapScale < ZoomMax)
            {
                MapScale += 0.2f;
                ZoomToMouse(coordinates.X, coordinates.Y);
            }
            else
            {
                MapScale = ZoomMax;
            }
        }
        else if (e.Delta < 0)
        {
            if (MapScale > ZoomMin)
            {
                MapScale -= 0.2f;
                ZoomToMouse(coordinates.X, coordinates.Y);
            }
            else
            {
                MapPan[0] = 0;
                MapPan[1] = 0;
                MapScale = ZoomMin;
            }
        }
    }


    private void ZoomToMouse(int x, int y)
    {
        float xScaled = x * MapScale;
        float xScaled = y * MapScale;

        float X = x - xScaled;
        float Y = y - yScaled;

        MapPan[0] = X / MapScale;
        MapPan[1] = Y / MapScale;
    }

    private void map_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
    {
        SKCanvas skCanvas = e.Surface.Canvas;

        skCanvas.Scale(MapScale);
        skCanvas.Translate(MapPan[0], MapPan[1]);

        using(SKPaint skPaint = new SKPaint())
        {
            skCanvas.DrawText("Hello", 0, 0, skPaint);
        }          
    }

Answer 1

This is what I came up with if anyone has a similar problem.

    private float ZoomMax = 7f;
    private float ZoomMin = 1f;

    private PointF MapPan = new PointF(0, 0);
    private float MapScale = 1f;

    protected override void OnMouseWheel(MouseEventArgs e)
    {
        if (FindControlAtCursor(this) != map) { return; }

        var coordinates = map.PointToClient(Cursor.Position);
       
        float ScrollDelta = e.Delta * 0.002f;

        float prevScale = MapScale;
        MapScale = Clamp(MapScale + ScrollDelta,ZoomMin,ZoomMax);

        ZoomToMouse(coordinates, prevScale);
    }

    public static Control FindControlAtCursor(Form form)
    {
        Point pos = Cursor.Position;
        if (form.Bounds.Contains(pos))
            return FindControlAtPoint(form, form.PointToClient(pos));
        return null;
    }

    public static float Clamp(float value, float min, float max)
    {
        return (value < min) ? min : (value > max) ? max : value;
    }

    private void ZoomToMouse(PointF Mouse, float PreviousScale)
    {
        PointF TranslatedMouse = new PointF((Mouse.X / PreviousScale) - MapPan.X, (Mouse.Y / PreviousScale) - MapPan.Y);

        PointF ScaledMouse = new PointF(TranslatedMouse.X * MapScale, TranslatedMouse.Y * MapScale);
        PointF NewPosition = new PointF((Mouse.X - ScaledMouse.X) / MapScale, (Mouse.Y - ScaledMouse.Y) / MapScale);

        float currentWidth = map.Width * MapScale;
        float currentHeight = map.Height * MapScale;

        float diffX = (currentWidth - map.Width) / MapScale;
        float diffY = (currentHeight - map.Height) / MapScale;

        MapPan.X = Clamp(NewPosition.X, -diffX, 0);
        MapPan.Y = Clamp(NewPosition.Y, -diffY, 0);
    }

    private void map_PaintSurface(object sender, SKPaintGLSurfaceEventArgs e)
    {
        SKCanvas skCanvas = e.Surface.Canvas;

        skCanvas.Scale(MapScale);
        skCanvas.Translate(MapPan.X, MapPan.Y);

        using (SKPaint skPaint = new SKPaint())
        {
            skCanvas.DrawText("Hello", 0, 0, skPaint);
        }
    }