Zoom to Mouse

[Ranguna259]

Sheepolution I know you know this

I've been trying to code zoom and whenever I zoom, the screen just zooms to the origin point and I want it to zoom to a specific point on the screen, after a while I implemented translations to fix the problem but whenever I zoom in, move the mouse to another point and zoom in again the screen just zooms to a point that I was not pointing at.

Here's the .love, the zoom code is unde the love.mousepressed() function
EDIT: Use the mouse wheel to zoom in and out , press it to reset. Try zooming in to the red dot

[Ranguna259]

Has anyone ever coded zoom ?

[Ranguna259]

After a few hours searching the web for this I finaly found what I needed, thanks anyways.
Here's the link if anyone wants to know and here's the lua code:

Code: Select all

-- x,y is the point that is going to be zoomed, in screen coordinates ( not affected by translation or by scaling)
--window.zoom is the current zoom
--window.zoominc is the zoom factor (I usually use 0.1 or -0.1)
--window.translate.x is the origin x-offset that is used in love.graphics.translate
--window.translate.y is the origin y-offset that is used in love.graphics.translate

local mouse_x = x - window.translate.x
local mouse_y = y - window.translate.y
local lastzoom = window.zoom

window.zoom = window.zoom + window.zoominc

local newx = mouse_x * (window.zoom/lastzoom)
local newy = mouse_y * (window.zoom/lastzoom)

window.translate.x = window.translate.x + (mouse_x-newx)
window.translate.y = window.translate.y + (mouse_y-newy)

Here's a .love exemple, use the mouse wheel to zoom in and out of a point and use the mouse buttons to zoom to the center of the screen:

[darkfrei]

My version of zoom to mouse:

Code: Select all

function love.load()
--	sets up window variables
	window = {translate={x=0, y=0}, zoom=1}
	dscale = 2^(1/6) -- six times wheel movement changes the zoom twice; exponential zoom only
end

function love.wheelmoved(x, y)
	local mx = love.mouse.getX()
	local my = love.mouse.getY()
    if not (y == 0) then -- mouse wheel moved up or down
--		zoom in to point or zoom out of point
		local mouse_x = mx - window.translate.x
		local mouse_y = my - window.translate.y
		local k = dscale^y
		window.zoom = window.zoom*k
		window.translate.x = math.floor(window.translate.x + mouse_x*(1-k))
		window.translate.y = math.floor(window.translate.y + mouse_y*(1-k))
	else
--		print ('wheel x: ' .. x .. ' y: ' .. y)
    end
end

function love.draw()
--	first translate than scale:
	love.graphics.translate(window.translate.x, window.translate.y)
	love.graphics.scale(window.zoom)
	
	
--	example graphics:
--	draws the circle in the middle of the screen
	love.graphics.setColor(1,1,1)
	love.graphics.circle('line',0, 0,300)
end

[darkfrei]

Small library with zoom to mouse and move window with mouse.

[darkfrei]

Code: Select all

-- somewhere define:
Scale = 3
TranslateX, TranslateY = 0, 0

function zoomWindowToMouse (deltaScale)
	local mx, my = love.mouse.getPosition()
	local tx, ty = TranslateX, TranslateY
	local scale = Scale
	local newScale = math.max (1, scale + deltaScale)
	Scale = newScale
	TranslateX = math.floor((mx-((mx-tx)/scale)*newScale)+0.5)
	TranslateY = math.floor((my-((my-ty)/scale)*newScale)+0.5)
end

function love.wheelmoved(wx, wy)
	if not (wy == 0) then
		zoomWindowToMouse (wy)
	end
end

Code: Select all

function love.draw()
	love.graphics.push()
		love.graphics.translate(TranslateX, TranslateY)
		love.graphics.scale(Scale)
		-- any zoomed graphics here:
		love.graphics.setColor(1,1,1)
		love.graphics.draw(image,0, 0)
	love.graphics.pop()
	
	-- text in top left corner:
	love.graphics.setColor(0,1,0)
	love.graphics.print ((TranslateX .. '\n' ..  TranslateY .. '\n' .. Scale), 0, 0)
end

2023-03-08T10_05_00-Untitled.png (91.8 KiB) Viewed 2042 times