Zoom around a point in a grid: redraw the grid and move the "origin" such that the point under the cursor remains fixed

Question

I couldn't solve the problem myself, even reading answers to related questions (I already searched in stackoverflow, but I couldn't understand the proposed solutions or adapt them to my case).

This is the code the draws the grid:

    // global variables
    int cameraOffsetX = SCREEN_WIDTH / 2; //x coordinate of the "origin"
    int cameraOffsetY = SCREEN_HEIGHT / 2;
    int cameraZoomSpriteSize = 32; //size of a square in the current zoom
    float zoomFactor = 1;

    --------------------

    //grid
    SDL_SetRenderDrawColor(renderer, 0xe6, 0xe6, 0xe6, SDL_ALPHA_OPAQUE);
    for (int i = cameraOffsetX - cameraOffsetX / cameraZoomSpriteSize * cameraZoomSpriteSize;
         i < window_width; i += cameraZoomSpriteSize)
        SDL_RenderDrawLine(renderer, i, 0, i, window_height);
    for (int i = cameraOffsetY - cameraOffsetY / cameraZoomSpriteSize * cameraZoomSpriteSize;
         i < window_height; i += cameraZoomSpriteSize)
        SDL_RenderDrawLine(renderer, 0, i, window_width, i);

    //origin
    SDL_SetRenderDrawColor(renderer, 0xff, 0, 0, SDL_ALPHA_OPAQUE);
    SDL_RenderDrawLine(renderer, cameraOffsetX, cameraOffsetY - cameraZoomSpriteSize, cameraOffsetX,
                       cameraOffsetY + cameraZoomSpriteSize);
    SDL_RenderDrawLine(renderer, cameraOffsetX - cameraZoomSpriteSize, cameraOffsetY,
                       cameraOffsetX + cameraZoomSpriteSize, cameraOffsetY);

and this is the code that attempts to obtain the wanted behaviour which isn't quite right yet:

    case SDL_MOUSEWHEEL:
    int mx, my;
    SDL_GetMouseState(&mx, &my);
    if (event.wheel.y > 0) // scroll up
    {
        if (cameraZoomSpriteSize < 64) {

            cameraOffsetX-=(mx-cameraOffsetX)*4/cameraZoomSpriteSize+(mx-cameraOffsetX)%cameraZoomSpriteSize*4/cameraZoomSpriteSize;
            cameraOffsetY-=(my-cameraOffsetY)*4/cameraZoomSpriteSize+(my-cameraOffsetY)%cameraZoomSpriteSize*4/cameraZoomSpriteSize;

            cameraZoomSpriteSize += 4;
            zoomFactor += 0.125;
        }
    } else if (event.wheel.y < 0) // scroll down
    {
        if (cameraZoomSpriteSize > 4) {

            cameraOffsetX+=(mx-cameraOffsetX)*4/cameraZoomSpriteSize+(mx-cameraOffsetX)%cameraZoomSpriteSize*4/cameraZoomSpriteSize;
            cameraOffsetY+=(my-cameraOffsetY)*4/cameraZoomSpriteSize+(my-cameraOffsetY)%cameraZoomSpriteSize*4/cameraZoomSpriteSize;

            cameraZoomSpriteSize -= 4;
            zoomFactor -= 0.125;

        }
    }
    break;

What are the correct formula for cameraOffsetX and cameraOffsetY. Unfortunately I couldn't visualize the math.

score 0 · Answer 1 · answered Dec 24 '19 at 08:49

0

General principle:

 cameraOffsetX = mx + (cameraOffsetX - mx) * newZoomCoefficient / oldZoomCoefficient

answered Dec 24 '19 at 08:49

MBo

77,366
5
53
86

score 0 · Answer 2 · answered Dec 24 '19 at 09:07

The solution I read here was right; only I couldn't translate right away zoompointX and scalechange.

I drew segments on a piece of paper and tried to scale them to figure out the same exact formula of that post.

case SDL_MOUSEWHEEL:
int mx, my;
SDL_GetMouseState(&mx, &my);
if (event.wheel.y > 0) // scroll up
{
    if (cameraZoomSpriteSize < 64) {

        cameraOffsetX-=(mx-cameraOffsetX)*4/cameraZoomSpriteSize;
        cameraOffsetY-=(my-cameraOffsetY)*4/cameraZoomSpriteSize;

        cameraZoomSpriteSize += 4;
        zoomFactor += 0.125;
    }
} else if (event.wheel.y < 0) // scroll down
{
    if (cameraZoomSpriteSize > 4) {

        cameraOffsetX+=(mx-cameraOffsetX)*4/cameraZoomSpriteSize;
        cameraOffsetY+=(my-cameraOffsetY)*4/cameraZoomSpriteSize;

        cameraZoomSpriteSize -= 4;
        zoomFactor -= 0.125;

    }
}
break;

This problem took me half of yesterday and this morning to solve :(

Zoom around a point in a grid: redraw the grid and move the "origin" such that the point under the cursor remains fixed

2 Answers2