Rectangle tiles resize algorithm

[JeffreyR]

Hello everyone,

I am making a webpage and. In photoshop i made a website layout. This is just a big rectangle image. Then i sliced it into a lot of smaller rectangles.

This is the website layout:

So I have s lot of images that are rectangles or squares and together they form a complete rectangle image.

As you can see in the image below:

I need an algorithm.

The idea is that i can adjust the big rectangle width to any value i want and the small tiles rearange themselves.

I have searched google, but i don't know where to start.

I don't know what this type of algorithm is called in mathematical terms of if it even exists.

Does anyone know something about this kind of algoritm?

Thank you very much in advance,

Jeffrey

[Staysys]

Well if you know the width, height, and starting coordinate of each rectangle then you can find the resized values as follows:

 

Say these are your variables

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

totalWidth = (width of entire rectangle)

totalHeight = (height of entire rectangle)

totalWidthNew = (width to resize entire rectangle to)

totalHeightNew = (height to resize entire rectangle to)

width = (initial width of the Nth small rectangle)

height = (initial height of the Nth small rectangle)

x = (initial x coordinate of Nth small rectangle)

y = (initial y coordinate of Nth small rectangle)

 

Then you just recalculate width, height, x, and y by doing:

newWidth = (width / totalWidth) * totalWidthNew

newHeight = (height / totalHeight) * totalHeightNew

newX = (x / totalWidth) * totalWidthNew

newY = (y / totalHeight) * totalHeightNew

 

Just reassign width, height, x, and y for each of the current values of each small rectangle, and recalculate their newWidth, newHeight, newX, and newY values like above.

 

Please ask if anything is unclear.

 

NOTE: I just came up with all of this off the top of my head so I haven't tested it, but I am pretty confident it will work like you want.

Edited May 1, 2013 by Staysys

[DevilSolution]

Its a ratio...

 

Event(){

for every rect {

ratio = old rect / new rect

new rect = old rect * ratio

repaint()

}

}

 

 

Actuality is more complex but in essence the new rect sizes are ratio's of the old

 

If you store each rect in an array or such you can increment through each in a loop, the ratio should be the same.

 

side note in this form the rects will overlap if you make them bigger, you'd need co-ords for each rect also....

Edited May 10, 2013 by DevilSolution

[FancyCloth]

I have searched google, but i don't know where to start.

 

 

 

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

nurses costumes uk
Sexy Sports Costumes

Edited May 23, 2013 by FancyCloth

[bsimage]

only when you know the resized values, then you can have the image algorithm c# decided. start with width and height you need an image app to help you. goolge on the web, a lot powerful and awesome tool.