Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
zoom sprite to mouse position — Gideros Forum

zoom sprite to mouse position

MoKaLuxMoKaLux Member
edited January 2023 in General questions
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 :)
my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories

Comments

  • MoKaLuxMoKaLux Member
    edited 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 :p

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

    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 <3
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • hgy29hgy29 Maintainer
    Accepted Answer
    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

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited 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 o:)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • 3rd attempt after watching the video :s
    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 >:)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • keszeghkeszegh Member
    edited January 2023 Accepted Answer
    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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited 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 :p
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • we cross posted, didn't see your help ;)
    I jumping into it right now, thanks a bunch guys, really appreciated o:)
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • hgy29hgy29 Maintainer
    edited January 2023 Accepted Answer
    @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.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited 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 :) ?
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited 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 <3

    Likes: keszegh

    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
    +1 -1 (+1 / -0 )Share on Facebook
  • keszeghkeszegh Member
    Accepted Answer
    sure, i'm happy if you add it to the wiki.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • keszeghkeszegh Member
    edited January 2023 Accepted Answer
    btw /120/3 or /3 could be replaced with a constant that is at the beginning of the code.

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
  • MoKaLuxMoKaLux Member
    edited January 2023
    here is almost the final release, thank you guys o:)
    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 <3
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited January 2023
    final code :p
    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 <3
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • MoKaLuxMoKaLux Member
    edited January 2023
    Qt and win32 build don't behave the same :o
    While Qt is working fine, win32 doesn't zoom to mouse cursor :s
    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?
    my growING GIDEROS github repositories: https://github.com/mokalux?tab=repositories
  • @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)

    Likes: MoKaLux

    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.