Scale image proportionally on resizestack

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

windowsLC
Posts: 26
Joined: Sat Dec 16, 2017 5:58 am

Scale image proportionally on resizestack

Post by windowsLC » Wed Jan 03, 2018 7:23 am

I have an image I am importing into the center of a stack. I want the image to scale proportionally when I manually resize the stack.

I've found code on the forum for proportionally scaling the image on import but I don't think that code will help in a situation where I am using the mouse to stretch or reduce the stack.

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Scale image proportionally on resizestack

Post by MaxV » Wed Jan 03, 2018 10:04 am

Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Scale image proportionally on resizestack

Post by bogs » Wed Jan 03, 2018 2:51 pm

That is what the geometry manager is for, but there has been a few hassles involved in using it, especially related to future editing of projects. Just something to keep in mind.

*Edit - I had just remembered they had pulled it completely out of 8.x at one point, and were re-writing it for 9.x re-insertion, so depending on what version your running all the above may have changed :roll:
Image

windowsLC
Posts: 26
Joined: Sat Dec 16, 2017 5:58 am

Re: Scale image proportionally on resizestack

Post by windowsLC » Wed Jan 03, 2018 3:22 pm

I played with GM a little but am not seeing a way to scale image proportionally keeping the images original perspective.

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Scale image proportionally on resizestack

Post by bogs » Wed Jan 03, 2018 3:45 pm

Which version of Lc are you using again? I know there is a demonstration of the Geometry Manager available in the 'general' section of the 'tutorials' under the resource center all the way up to 8.1.6.
Image

windowsLC
Posts: 26
Joined: Sat Dec 16, 2017 5:58 am

Re: Scale image proportionally on resizestack

Post by windowsLC » Wed Jan 03, 2018 4:56 pm

I've played with the GM enough now that I can see there is no way to keep proportion when scaling with it. There are anchors (static for top and left and relative or static for right and bottom) to the sides and will adjust the image depending on which side of the stack you move, so there is no way to keep a certain proportion of the image.

If you are scaling the width there needs to be a function that calculates the proper height to constrain proportion and vice versa if the width is being scaled. I'm hoping someone has an existing function before I tackle it with my rusty geometry skills.

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Scale image proportionally on resizestack

Post by bogs » Wed Jan 03, 2018 5:09 pm

Ah, I see now. Sorry, no drop in function here. Good luck with it.
Image

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Scale image proportionally on resizestack

Post by MaxV » Wed Jan 03, 2018 6:21 pm

Here is the recipe:
  1. Create the image, call it myImage
  2. Digit in the message box:

    Code: Select all

    set the realsize of image "myImage" to (the width of image "myImage", the height of image "myImage")
    set the startSizeStack of image "myImage" to (the width of this stack, the height of this stack)
    
  3. Edit the stack script this way
########CODE to copy and paste#######
on resizeStack
put the top of image "myImage" into tTop
put the left of image "myImage" into tLeft
put the realSize of image "MyImage" into tSize
put the startsizeStack of image "myImage" into tSS
set the width of image "myImage" to (item 1 of tSize * the width of this stack / item 1 of tSS )
set the height of image "myImage" to (item 2 of tSize * the height of this stack / item 2 of tSS )
if the width of image "myImage" > the height of image "myImage" then
set the width of image "myImage" to (item 1 of tSize / item 2 of tSize * the height of image "myImage")
else
set the height of image "myImage" to (item 2 of tSize / item 1 of tSize * the width of image "myImage")
end if
set the top of image "myImage" to tTop
set the left of image "myImage" to tLeft
pass resizeStack
end resizeStack
#####END OF CODE generated by this livecode app: http://tinyurl.com/j8xf3xq with livecode 9.0.0-dp-11#####

Tested and it works.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Scale image proportionally on resizestack

Post by [-hh] » Wed Jan 03, 2018 7:40 pm

windowsLC wrote:I have an image I am importing into the center of a stack. I want the image to scale proportionally when I manually resize the stack.
From a math point of view "scale proportionally" then means proportionally to the size changes of the stack. That is, for example:
If you double the width of the stack and retain the height then the image should also double its width and retain its height.

This is simply scripted by

Code: Select all

on resizestack nw,nh,ow,oh
  lock screen
  set the width of img 1 to nw/ow*the width of img 1
  set the height of img 1 to nh/oh*the height of img 1
  set the loc of img 1 to the loc of this card
end resizestack
Then resize the stack proportionally by holding the shiftkey down while resizing if you wish to retain the image's proportions.

If this is not what you mean then you should explain what you mean with "scale proportionally if I resize the stack".
shiftLock happens

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Scale image proportionally on resizestack

Post by bogs » Wed Jan 03, 2018 10:11 pm

[-hh] wrote:
Wed Jan 03, 2018 7:40 pm
From a math point of view "scale proportionally" then means proportionally to the size changes of the stack. That is, for example:
If you double the width of the stack and retain the height then the image should also double its width and retain its height.
I think in this case, he means proportional to the images w/h, so that if you double the width of the stack, and retain its height, the image doubles in both width and height.

Otherwise, the GM we were discussing here would solve the issue out of the box, wouldn't it?
Image

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Scale image proportionally on resizestack

Post by [-hh] » Thu Jan 04, 2018 2:11 am

I wonder about this logic.
bogs" wrote: ... so that if you double the width of the stack, and retain its height, the image doubles in both width and height.
Consequently if you double the height of the stack, and retain its width, the image doubles in both width and height.

So now, what should the image do if you change the stack's size to 50% of its width and 200% of its height?
And what should the image do if you change the stack's size to 50% of its height and 200% of its width?

Translate your answers into a question and a script and compare to the original post ...
shiftLock happens

bogs
Posts: 5435
Joined: Sat Feb 25, 2017 10:45 pm

Re: Scale image proportionally on resizestack

Post by bogs » Thu Jan 04, 2018 4:22 am

Erm, I should add I'm not the one asking the question :D

Were I looking for a solution like this, I'd be scaling the image to the smaller variable, i.e. if the width was less than the height of the stack, the image would scale to fit *that*, leaving more stack than image. Alternately I would over extend and re-center the image (making it effectively a background at all times, either showing more or less of it).

However, from what I read and he clarified, that wasn't what I got him wanting to do. In either case, since I haven't had the need to work it out, I can't help him,
Image

windowsLC
Posts: 26
Joined: Sat Dec 16, 2017 5:58 am

Re: Scale image proportionally on resizestack

Post by windowsLC » Thu Jan 04, 2018 4:52 am

I guess the proper terminology for what I am trying to achieve would be that I want to constrain the aspect ratio of the image.

like if you shift-click and drag on the corner of an image.

I tried your script -hh and it is a nice relative scale, it does not constrain the aspect ratio of the image though.

@MaxV I tried to implement your script but could not get it to work on my current stack. I think I will have to create a test stack to see if it works.

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Scale image proportionally on resizestack

Post by MaxV » Thu Jan 04, 2018 7:31 am

Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm
Location: Göttingen, DE

Re: Scale image proportionally on resizestack

Post by [-hh] » Thu Jan 04, 2018 8:06 am

windowsLC wrote:I tried your script -hh and it is a nice relative scale, it does not constrain the aspect ratio of the image though.
If you wish to constrain the aspect ratio of the image then simply multiply the width and the height of the image by the same factor f.
If you resize relative to the width change of the stack then choose f=nw/ow (newWidth/oldWidth), if you resize relative to the height change of the stack then choose f=nh/oh (newHeight/oldHeight).
[MaxV resizes relative to the height change of the stack.]

Of course, if you *resize the stack proportionally* then nw/ow=nh/oh. This is the *only* possibility to resize the image with constant aspect ratio proportionally to the change of the stack's *size*.

So your question reduces to:
How can I resize an image with constant aspect ratio proportionally to the stack's size if I resize the stack *proportionally*? The answer is given above.
shiftLock happens

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”