zoom sprite to mouse position

MoKaLux · January 2023

hope you are all doing good

I have some doubts about implementing a zoom on a sprite based on the mouse position.
What I am trying to achieve:
- I have a sprite positioned anywhere on the screen
- I have my mouse cursor above it
- I scroll to zoom with the mouse wheel
- I want my sprite to zoom where the mouse cursor is
- I want my sprite to update its position ("so it doesn't jump")
Has anybody done it before in gideros?
The code I have so far, still under testing:

	local tempscale = self.zoom
	self.canvaslayer:setScale(tempscale)
	self:addEventListener(Event.MOUSE_WHEEL, function(e) -- e.wheel = 120
		if self.canvaslayer:hitTestPoint(e.x, e.y) then
--			local posx, posy = self.canvaslayer:getPosition()
			local posx, posy = e.x, e.y
--			local posx, posy = self.canvaslayer:globalToLocal(e.x, e.y)
--			self.canvaslayer:setAnchorPosition(e.x, e.y)
			self.canvaslayer:set("anchorX", posx / tempscale)
			self.canvaslayer:set("anchorY", posy / tempscale)
		end
		...
	end

Do you have a recipe (pseudo code) for how you would implement it please?
Thank U

MoKaLux · January 2023

2nd attempt:

	local posx, posy = self.canvaslayer:getPosition()
	self:addEventListener(Event.MOUSE_WHEEL, function(e) -- e.wheel = 120
		self.ismousewheel = true
		tempscale = self.zoom
		-- zoom to mouse cursor?
		posx, posy = self.canvaslayer:globalToLocal(e.x, e.y)
--		posx, posy = e.x, e.y
		self.canvaslayer:set("anchorX", posx / tempscale)
		self.canvaslayer:set("anchorY", posy / tempscale)
		self.canvasposx, self.canvasposy = self.canvaslayer:getPosition()
		self:canvasPos()
		self.ismousewheel = false
	end)
 
function TheGame:canvasPos()
	if self.ismousewheel then
		print("mousewheeled")
	else
		print("not mousewheeled")
		self.canvaslayer:setAnchorPoint(0.5, 0.5)
	end
	self.canvaslayer:setPosition(self.canvasposx, self.canvasposy)
end

Almost

EDIT: looks like a matrix could nicely do the job!? EDIT2: no it doesn't

EDIT3: for references
https://github.com/OneLoneCoder/Javidx9/blob/master/ConsoleGameEngine/SmallerProjects/OneLoneCoder_PanAndZoom.cpp

https://github.com/benbotto/zoom-on-a-point/blob/bcd30da0b41fdd0bdd5bda25b418b42417177040/world.js#L23

https://stackoverflow.com/questions/30002361/image-zoom-centered-on-mouse-position

Viva Gideros

hgy29 · January 2023

Hi @MoKaLux,

Assuming I understood what you want to achieve, you can do it with matrices:
1) Take the sprite transform matrix
2) translate it so that the new center point is the point where your want to scale
3) scale the matrix
4) translate it back
5) apply it again to the sprite

Or you can just set scale and compute new position: New Position=(Old Position - ScalePoint * Scale), or something along those lines, I didn't check the maths

MoKaLux · January 2023

thank you hgy29, I tried it but I failed, I am trying to zoom to a sprite (images) like you would do in google map for example, with pan and zoom or like the guy is doing in the video

.
Or to be more gideros specific, imagine you have a pixel somewhere on screen, then you point on it with your mouse, then the pixel should zoom (mouse wheel) and remains at the same position.
The code I tried:

		-- zoom to mouse cursor?
		mymatrix = self.canvaslayer:getMatrix()
		mymatrix:translate(self.canvasw/2, self.canvash/2)
		mymatrix:scale(tempscale, tempscale)
		mymatrix:translate(-self.canvasw/2, -self.canvash/2)
		self.canvaslayer:setMatrix(mymatrix)

Or you can just set scale and compute new position: New Position=(Old Position - ScalePoint * Scale), or something along those lines, I didn't check the maths

That's the road I am taking, I have different version but none is good enough, I am still testing

I will of course post what I can hopefully figure out

MoKaLux · January 2023

3rd attempt after watching the video

local myappwidth = application:getContentWidth()
local myappheight = application:getContentHeight()
 
application:setBackgroundColor(g_bgcolor or 0x333333)
local canvaslayer = Sprite.new() -- for the zoom
local pixel = Pixel.new(0x00ff00, 1, 32, 32)
-- position
canvaslayer:setPosition(myappwidth/2, myappheight/2)
-- order
canvaslayer:addChild(pixel)
stage:addChild(canvaslayer)
 
-- current zoom
local zoom = 1
local minzoom, maxzoom = 0.1, 12
canvaslayer:setScale(zoom)
 
-- mouse stuff
local canvasposx, canvasposy = canvaslayer:getPosition()
local startpanx, startpany = 0, 0
local offsetx = -myappwidth*0.5 -- because we positioned the canvas in screen center
local offsety = -myappheight*0.5 -- because we positioned the canvas in screen center
 
local fMouseWorldX_BeforeZoom
local fMouseWorldY_BeforeZoom
local fMouseWorldX_AfterZoom
local fMouseWorldY_AfterZoom
 
-- convert coordinates from Screen Space --> World Space
local function ScreenToWorld(xscreenx, xscreeny)
	return xscreenx / zoom + offsetx, xscreeny / zoom + offsety
end
 
stage:addEventListener(Event.MOUSE_DOWN, function(e)
	startpanx, startpany = e.x, e.y
	e:stopPropagation() -- yes or no?
end)
stage:addEventListener(Event.MOUSE_MOVE, function(e)
--	offsetx -= (e.x - startpanx) / zoom
--	offsety -= (e.y - startpany) / zoom
	offsetx = (e.x - startpanx) / zoom
	offsety = (e.y - startpany) / zoom
	canvasposx += offsetx
	canvasposy += offsety
	canvasPos()
	startpanx = e.x
	startpany = e.y
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_WHEEL, function(e) -- e.wheel = 120
	-- zoom to mouse cursor?
	fMouseWorldX_BeforeZoom, fMouseWorldY_BeforeZoom = ScreenToWorld(e.x, e.y)
	-- zoom limits
	if not (canvaslayer:getScale() < minzoom) and not (canvaslayer:getScale() > maxzoom) then
		zoom+=e.wheel/120/4
		canvaslayer:setScale(zoom)
	else
		if canvaslayer:getScale() <= minzoom then canvaslayer:setScale(minzoom) zoom = minzoom end
		if canvaslayer:getScale() >= maxzoom then canvaslayer:setScale(maxzoom) zoom = maxzoom end
	end
	if canvaslayer:getScale() < minzoom then canvaslayer:setScale(minzoom) zoom = minzoom end
	if canvaslayer:getScale() > maxzoom then canvaslayer:setScale(maxzoom) zoom = maxzoom end
 
	fMouseWorldX_AfterZoom, fMouseWorldY_AfterZoom = ScreenToWorld(e.x, e.y)
--	offsetx += (fMouseWorldX_BeforeZoom - fMouseWorldX_AfterZoom)
--	offsety += (fMouseWorldY_BeforeZoom - fMouseWorldY_AfterZoom)
	offsetx = (fMouseWorldX_BeforeZoom - fMouseWorldX_AfterZoom)
	offsety = (fMouseWorldY_BeforeZoom - fMouseWorldY_AfterZoom)
	canvasposx -= offsetx
	canvasposy -= offsety
	canvasPos()
end)
 
function canvasPos()
--	canvaslayer:setAnchorPoint(0.5, 0.5)
	canvaslayer:setPosition(canvasposx, canvasposy)
end

Not good

keszegh · January 2023

hi, i'm also working on a pan+zoom feature for my anim app, wip.
the zooming code is something like that, perhaps it helps:

    if (application:getKeyboardModifiers()   & 2 == 2) and event.type=="touchesBegin" and event.touch.mouseButton==2 then --alt pressed
      self.zoomStart=self.boardContainer:getScale()
      self.panStart.rx,self.panStart.ry=self:globalToLocal(event.touch.rx,event.touch.ry)    
      self.panStartBoard.rx,self.panStartBoard.ry=self.boardContainer:getPosition()
      _zooming=true      
      return
    end
 
    if _zooming and event.type=="touchesMove" then 
      local newX,newY=self:globalToLocal(event.touch.rx,event.touch.ry)        
      local viewportZoom=self.zoomStart-(newY-self.panStart.ry)/1000    
      self.boardContainer:setScale(viewportZoom)    
      local viewportX=self.panStartBoard.rx+(self.panStart.rx-self.panStartBoard.rx)*(1-viewportZoom/self.zoomStart)
      local viewportY=self.panStartBoard.ry+(self.panStart.ry-self.panStartBoard.ry)*(1-viewportZoom/self.zoomStart)
      self.boardContainer:setPosition(viewportX,viewportY)
      return
    end
 
    if _zooming and event.type=="touchesEnd" then _zooming=false return end

EDIT: as you can see the zoom ratio depends on mouse move and not mouse scroll, but that i think you will be able to change to your tastes, the math code remains the same.

EDIT: in my code there is a parent sprite (self) and i'm scaling its child boardContainer. in your code perhaps you do not need the parent, it can be the stage itself. i use the dummy parent sprite to be able to easily rescale/reposition everything on the screen when the window is resized.

MoKaLux · January 2023

not too good as well

local myappwidth = application:getContentWidth()
local myappheight = application:getContentHeight()
 
application:setBackgroundColor(g_bgcolor or 0x333333)
local canvaslayer = Sprite.new() -- for the zoom
local pixel = Pixel.new(0x00ff00, 1, 32, 32)
-- position
canvaslayer:setPosition(myappwidth/2, myappheight/2)
-- order
canvaslayer:addChild(pixel)
stage:addChild(canvaslayer)
 
-- current zoom
local zoom = 1
local minzoom, maxzoom = 0.1, 12
canvaslayer:setScale(zoom)
 
-- mouse stuff
local canvasposx, canvasposy = canvaslayer:getPosition()
local startpanx, startpany = 0, 0
local offsetx = -myappwidth*0.5 -- because we positioned the canvas in screen center
local offsety = -myappheight*0.5 -- because we positioned the canvas in screen center
 
local fMouseWorldX_BeforeZoom
local fMouseWorldY_BeforeZoom
local fMouseWorldX_AfterZoom
local fMouseWorldY_AfterZoom
 
-- convert coordinates from Screen Space --> World Space
local function ScreenToWorld(xscreenx, xscreeny)
	return xscreenx / zoom + offsetx, xscreeny / zoom + offsety
end
 
stage:addEventListener(Event.MOUSE_DOWN, function(e)
	startpanx, startpany = e.x, e.y
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_MOVE, function(e)
	offsetx = (e.x - startpanx) / zoom
	offsety = (e.y - startpany) / zoom
	canvasposx += offsetx
	canvasposy += offsety
	canvasPos()
	startpanx = e.x
	startpany = e.y
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_WHEEL, function(e) -- e.wheel = 120
	-- zoom to mouse cursor?
	fMouseWorldX_BeforeZoom, fMouseWorldY_BeforeZoom = ScreenToWorld(e.x, e.y)
	-- zoom limits
	if not (canvaslayer:getScale() < minzoom) and not (canvaslayer:getScale() > maxzoom) then
		zoom+=e.wheel/120/4
		canvaslayer:setScale(zoom)
	else
		if canvaslayer:getScale() <= minzoom then canvaslayer:setScale(minzoom) zoom = minzoom end
		if canvaslayer:getScale() >= maxzoom then canvaslayer:setScale(maxzoom) zoom = maxzoom end
	end
	if canvaslayer:getScale() < minzoom then canvaslayer:setScale(minzoom) zoom = minzoom end
	if canvaslayer:getScale() > maxzoom then canvaslayer:setScale(maxzoom) zoom = maxzoom end
 
	fMouseWorldX_AfterZoom, fMouseWorldY_AfterZoom = ScreenToWorld(e.x, e.y)
	offsetx = (fMouseWorldX_BeforeZoom - fMouseWorldX_AfterZoom)
	offsety = (fMouseWorldY_BeforeZoom - fMouseWorldY_AfterZoom)
	canvasposx = e.x + offsetx
	canvasposy = e.y + offsety
	canvasPos()
end)
 
function canvasPos()
--	canvaslayer:setAnchorPoint(0.5, 0.5)
	canvaslayer:setPosition(canvasposx, canvasposy)
end

Sorry I don't have the answer, time to try something else

keszegh · January 2023

@MoKaLux , try my code.

MoKaLux · January 2023

we cross posted, didn't see your help

I jumping into it right now, thanks a bunch guys, really appreciated

hgy29 · January 2023

@MoKaLux,

In your wheel event code, I would compute offset like this:

	offsetx=-(e.x-canvasposx)*(zoom/izoom)
	offsety=-(e.y-canvasposy)*(zoom/izoom)

Where izoom is the zoom before the update.

MoKaLux · January 2023

thank you hgy29, will try as well after testing keszegh answer (I got it working when panning->zooming), now I try to implement it in Event.MOUSE_WHEEL.

EDIT: for references:
var img = document.createElement("img");
img.src ="https://st.motortrend.com/uploads/sites/5/2018/11/2019-Mazda3-hatch-profile.jpg";
var canvas = window._canvas = new fabric.Canvas("imageCanvas");

$(img).on('load',function(){
image = new fabric.Image(img, {
centeredRotation: true,
centeredScaling: true,
top: 0,
left: 0
});
canvas.add(image);
});

canvas.on("mouse:move", function(event) {
currentMouseY = Math.round(event.e.y - canvas._offset.top);
currentMouseX = Math.round(event.e.x - canvas._offset.left);
});

function zoom(delta, target) {
var factor = 0.8;
if (delta < 0) {
factor = 1/factor;
}

// Zoom into the image.
image.setScaleX(image.getScaleX() * factor);
image.setScaleY(image.getScaleY() * factor);
// Calculate displacement of zooming position.
var dx = (currentMouseX - image.getLeft()) * (factor - 1),
dy = (currentMouseY - image.getTop()) * (factor - 1);
// Compensate for displacement.
image.setLeft(image.getLeft() - dx);
image.setTop(image.getTop() - dy);

canvas.renderAll();
}

$(canvas.wrapperEl).on("mousewheel", function (event) {
var target = canvas.findTarget(event);
if (target) {
var delta = event.originalEvent.wheelDelta / 120;
zoom(-delta, target);
};
event.preventDefault() && false;
});

https://jsfiddle.net/fgLmyxw4/
This one should be easy, isn't it mokalux

?

MoKaLux · January 2023

Mr keszegh nailed it! Let me post the code I have so far before I mess it up. It is WONDERFULLY WORKING

thanks to Mr keszegh!

application:setBackgroundColor(g_bgcolor or 0x333333)
 
-- sprites
local canvaslayer = Sprite.new() -- for the zoom
--local pixel = Pixel.new(0x00ff00, 1, 32, 32)
local pixel = Bitmap.new(Texture.new("gfx/pot/1K-triangle_buble-diffuse.jpg"))
-- order
canvaslayer:addChild(pixel)
canvaslayer:setAnchorPoint(0.5, 0.5)
stage:addChild(canvaslayer)
-- position
canvaslayer:setPosition(application:getContentWidth()/2, application:getContentHeight()/2)
 
-- current zoom
local zoom = 1
canvaslayer:setScale(zoom)
 
-- the mouse
local zoomStart
local panStartrx,panStartry
local panStartBoardrx,panStartBoardry
 
local canvasposx, canvasposy = 0, 0
local startpanx, startpany = 0, 0
local offsetx, offsety = 0, 0
 
-- thank you very much keszegh :-)
stage:addEventListener(Event.MOUSE_DOWN, function(e)
	zoomStart=canvaslayer:getScale()
	startpanx, startpany = stage:globalToLocal(e.rx,e.ry)
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_MOVE, function(e)
	offsetx = (e.rx - startpanx)
	offsety = (e.ry - startpany)
	canvasposx += offsetx
	canvasposy += offsety
	canvaslayer:setPosition(canvasposx, canvasposy)
	startpanx, startpany = stage:globalToLocal(e.rx,e.ry)
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_WHEEL, function(e) -- e.wheel = 120
	zoomStart=canvaslayer:getScale()
	panStartrx,panStartry=stage:globalToLocal(e.rx,e.ry)    
	panStartBoardrx,panStartBoardry=canvaslayer:getPosition()
 
	zoom+=e.wheel/120/3
	canvaslayer:setScale(zoom)
	local viewportZoom=zoomStart+e.wheel/120/3
	canvaslayer:setScale(viewportZoom)    
	local viewportX=panStartBoardrx+(panStartrx-panStartBoardrx)*(1-viewportZoom/zoomStart)
	local viewportY=panStartBoardry+(panStartry-panStartBoardry)*(1-viewportZoom/zoomStart)
	canvaslayer:setPosition(viewportX,viewportY)
end)

PS: this code needs more adjustement but it is working almost as expected (image "jumps" the first time when you pan, it has vars which could be merged, duplicate code, ...) but it is a very good starting point.

I will test it more, polish it and straight to gideros wiki (keszegh, do I have your permission?).

Viva Gideros Forum

keszegh · January 2023

sure, i'm happy if you add it to the wiki.

keszegh · January 2023

btw /120/3 or /3 could be replaced with a constant that is at the beginning of the code.

MoKaLux · January 2023

here is almost the final release, thank you guys

application:setBackgroundColor(0x333333)
 
-- sprites
local canvaslayer = Sprite.new()
local pixel = Bitmap.new(Texture.new("gfx/pot/1K-triangle_buble-diffuse.jpg"))
-- order
canvaslayer:addChild(pixel)
canvaslayer:setAnchorPoint(0.5, 0.5)
stage:addChild(canvaslayer)
-- position
canvaslayer:setPosition(application:getContentWidth()/2, application:getContentHeight()/2)
 
-- current zoom
local currzoom = 0.5
local zoomstart = currzoom
canvaslayer:setScale(currzoom)
 
-- thank you very much keszegh :-)
local startpanx, startpany = 0, 0
local layerstartpanx, layerstartpany = 0, 0
local canvasposx, canvasposy = 0, 0
local offsetx, offsety = 0, 0
local viewportx, viewporty = 0, 0
 
stage:addEventListener(Event.MOUSE_DOWN, function(e) -- MOUSE_DOWN
	startpanx, startpany = stage:globalToLocal(e.rx, e.ry)
	layerstartpanx, layerstartpany = canvaslayer:getPosition()
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_MOVE, function(e) -- MOUSE_MOVE
	canvasposx, canvasposy = canvaslayer:getPosition()
	offsetx = (e.rx - startpanx) / zoomstart -- best so far
	offsety = (e.ry - startpany) / zoomstart -- best so far
	canvasposx += offsetx * zoomstart -- best so far
	canvasposy += offsety * zoomstart -- best so far
	canvaslayer:setPosition(canvasposx, canvasposy)
	startpanx, startpany = stage:globalToLocal(e.rx, e.ry)
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_WHEEL, function(e) -- MOUSE_WHEEL, e.wheel = 120
	zoomstart = currzoom
	startpanx, startpany = stage:globalToLocal(e.rx, e.ry)
	layerstartpanx, layerstartpany = canvaslayer:getPosition()
	currzoom = zoomstart + e.wheel/120/8
	if currzoom

It is working like in javid YT video, there are a lot of variables and could maybe be simplified? I am not too sure about the variables names as well. You can test it (just copy/paste

).

I am still looking into it, give me some little extra time. I am posting it just in case!

Viva Gideros

MoKaLux · January 2023

final code

application:setBackgroundColor(0x333333)
 
-- sprites
local canvaslayer = Sprite.new()
local pixel = Bitmap.new(Texture.new("gfx/pot/1K-triangle_buble-diffuse.jpg"))
-- order
canvaslayer:addChild(pixel)
canvaslayer:setAnchorPoint(0.5, 0.5)
stage:addChild(canvaslayer)
-- position
canvaslayer:setPosition(application:getContentWidth()/2, application:getContentHeight()/2)
 
-- current zoom
local currzoom = 0.5
local zoomstart = currzoom
canvaslayer:setScale(currzoom)
 
-- thank you very much hgy29 & keszegh :-)
local pointerstartx, pointerstarty = 0, 0
local canvasposx, canvasposy = 0, 0
local offsetx, offsety = 0, 0
local viewportx, viewporty = 0, 0
 
stage:addEventListener(Event.MOUSE_DOWN, function(e)
	pointerstartx, pointerstarty = stage:globalToLocal(e.rx, e.ry)
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_MOVE, function(e)
	canvasposx, canvasposy = canvaslayer:getPosition()
	offsetx = e.rx - pointerstartx
	offsety = e.ry - pointerstarty
	canvasposx += offsetx
	canvasposy += offsety
	canvaslayer:setPosition(canvasposx, canvasposy)
	pointerstartx, pointerstarty = stage:globalToLocal(e.rx, e.ry)
	e:stopPropagation()
end)
stage:addEventListener(Event.MOUSE_WHEEL, function(e) -- e.wheel = +- 120
	zoomstart = currzoom
	pointerstartx, pointerstarty = stage:globalToLocal(e.rx, e.ry)
	canvasposx, canvasposy = canvaslayer:getPosition()
	currzoom = zoomstart + e.wheel/120/4
	if currzoom <= 0.2 then currzoom = 0.2 end
	if currzoom >= 2 then currzoom = 2 end
	canvaslayer:setScale(currzoom)
	viewportx = canvasposx + (pointerstartx - canvasposx) * (1 - currzoom/zoomstart)
	viewporty = canvasposy + (pointerstarty - canvasposy) * (1 - currzoom/zoomstart)
	canvaslayer:setPosition(viewportx, viewporty)
	e:stopPropagation()
end)

I renamed some vars and cleaned unnecessary ones. It is ready for critique then up to gideros wiki.

PS: I don't know if it was useful/good practice to move local variables viewportx, viewporty outside the MOUSE_WHEEL event function

.

Viva Gideros, Viva Gideros Forum

MoKaLux · January 2023

added to gideros wiki

https://wiki.gideros.rocks/index.php/Examples#ZOOM_SPRITE_TO_MOUSE_POSITION_.40hgy29.2C_.40keszegh

keszegh · January 2023

nice work, you should @Mokalux the whole page: )

MoKaLux · January 2023

Qt and win32 build don't behave the same

While Qt is working fine, win32 doesn't zoom to mouse cursor

I don't know what could be the issue

, any ideas please?
Thank you

EDIT: it seems to be a translate canvas miscalculation?
EDIT2: maybe I need to take into account the window position?

keszegh · January 2023

@MoKaLux
in my code i've actually changed the scale computation to an exponential one instead of linear, as it feels much more natural:

local viewportZoom=math.clamp(self.zoomStart*2^((self.panStart.ry-newY)/100),_MIN_ZOOM,_MAX_ZOOM)

Howdy, Stranger!

Categories

In this Discussion

Top Posters

zoom sprite to mouse position

Comments

Howdy, Stranger!

Quick Links

Categories

In this Discussion

Top Posters

zoom sprite to mouse position

Comments