Scale image proportionally on resizestack
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller
Scale image proportionally on resizestack
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.
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.
Re: Scale image proportionally on resizestack
Use the geometry manager: http://livecode.wikia.com/wiki/Geometry_manager
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w
Re: Scale image proportionally on resizestack
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
*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
Re: Scale image proportionally on resizestack
I played with GM a little but am not seeing a way to scale image proportionally keeping the images original perspective.
Re: Scale image proportionally on resizestack
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.
Re: Scale image proportionally on resizestack
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.
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.
Re: Scale image proportionally on resizestack
Ah, I see now. Sorry, no drop in function here. Good luck with it.
Re: Scale image proportionally on resizestack
Here is the recipe:
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.
- Create the image, call it myImage
- 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)
- Edit the stack script this way
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
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Scale image proportionally on resizestack
From a math point of view "scale proportionally" then means proportionally to the size changes of the stack. That is, for example: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.
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
If this is not what you mean then you should explain what you mean with "scale proportionally if I resize the stack".
shiftLock happens
Re: Scale image proportionally on resizestack
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?
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Scale image proportionally on resizestack
I wonder about this logic.
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 ...
Consequently if you double the height of the stack, and retain its width, the image doubles in both width and height.bogs" wrote: ... so that if you double the width of the stack, and retain its height, 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
Re: Scale image proportionally on resizestack
Erm, I should add I'm not the one asking the question
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,
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,
Re: Scale image proportionally on resizestack
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.
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.
Re: Scale image proportionally on resizestack
See this video: https://youtu.be/lgHLf01HlIc
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w
-
- VIP Livecode Opensource Backer
- Posts: 2262
- Joined: Thu Feb 28, 2013 11:52 pm
- Location: Göttingen, DE
Re: Scale image proportionally on resizestack
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.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 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