Click here to Skip to main content
15,881,172 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have an image that is and must have its anchor/origin point set to the upper left corner. It is a large image bigger than the screen and I want the ability to pan across it and zoom into the visible center. By default, the scaling collapses to the upper left as you zoom in. Simply put, I need to move the image after it scales to give the illusion that you zoomed into the center of the screen. I should also mention that scaling is a number between 0 and 1: 1x Zoom = 1 and 2x Zoom = .5

I stripped away the syntax to make things as clear as possible.

Here is the broken math I am currently using:

--Set vars

imageWidthNew = tileSize * mapData.gridW * scale

imageHeightOld = tileSize * mapData.gridH * mapGrp.yScale

imageHeightNew = tileSize * mapData.gridH * scale

screenWidth = 480

screenHeight = 320

--Get a number between 0 and 1 based position within bounds

pX = mapGrp.x / (imageWidthOld - screenWidth)

pY = mapGrp.y / (imageHeightOld - screenHeight)

--Set New Position

mapGrp.x = -pX * (screenWidth - imageWidthNew)

mapGrp.x = -pY * (screenHeight - imageHeightNew)
Posted
Updated 10-Sep-14 3:07am
v2
Comments
CPallini 10-Sep-14 9:52am    
Unfortunately I cannot understand what is exactly going on there. Could you give an example (inputs, wrong outputs, expected outputs)?
Digital Resistance 10-Sep-14 10:08am    
Thank you for taking the time to help.

As I scale the image it collapses/expands from its local 0,0 (Top/Left) position. As a result you are 'zooming' into the objects local point 0,0 (the object's x/y value). I want to change the x/y position of the image to make it look like you are zooming into a specific point. That point should be determined by what is visible at the center of the screen. I need to get the same spot of the image to be in the center of the screen before and after the zoom. The problem is that I am unable to correct for the change as the image scales. If you need context, the image is actually a map made of tiles. I have the panning set and clicking working that uses the offset of the image to calculate what tile is being pressed and it works at all scales. The problem is strictly a display issue.
CPallini 10-Sep-14 10:37am    
While I've understood your requirements (and guessed about the tiles), I failed to correctly link them with the posted code. For this very reason I asked you an example of IO (with actual numbers) as well of the expected output.
Digital Resistance 10-Sep-14 10:52am    
Sorry, for any confusion. Right now the function doesn't do much because I am just trying to scale and move a group. Here is what I have:

local setScale = function(scale)
--Some values that can be used
local imageWidthOld = tileSize * mapData.gridW * mapGrp.xScale
local imageWidthNew = tileSize * mapData.gridW * scale
local imageHeightOld = tileSize * mapData.gridH * mapGrp.yScale
local imageHeightNew = tileSize * mapData.gridH * scale
local screenWidth = 480
local screenHeight = 320

--Zoom
mapGrp.x = --new mapGrp.x to offset scale
mapGrp.y = --new mapGrp.y to offset scale

mapGrp.xScale= scale
mapGrp.yScale= scale

--Prevent map from moving beyond limits
xBound = (tileSize * mapData.gridW * mapGrp.xScale - 480) * -1
yBound = (tileSize * mapData.gridH * mapGrp.yScale - 320) * -1
applyMapBounds()
end
Digital Resistance 10-Sep-14 10:57am    
Here are some more ways the map is being used for added context:

local getTileID = function(r,c)
return ((r - 1) * mapData.gridW) + c
end
local getTileCR = function(id)
local r = math.ceil(id / mapData.gridW)
local c = id - ((r-1) * mapData.gridW)
return r,c
end

local r = math.ceil((event.y - mapGrp.y) / (tileSize * mapGrp.yScale))
local c = math.ceil((event.x - mapGrp.x) / (tileSize * mapGrp.xScale))
local tileID = getTileID(r,c)


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900