Page 2 of 2
Re: Scale image proportionally on resizestack
Posted: Thu Jan 04, 2018 1:32 pm
by MaxV
[-hh] wrote: ↑Thu Jan 04, 2018 8:06 am
[MaxV resizes relative to the height change of the stack.]
No, on both sizes works.
Re: Scale image proportionally on resizestack
Posted: Fri Jan 05, 2018 1:43 am
by jacque
You can use either of these, depending on whether you want to scale the image to fit an existing object, or you want to pass a rectangle's dimensions.
Code: Select all
-- using an object as target rect:
on scaleToFit pImg,pObj -- the image name, the target object
put the formattedheight of img pImg into theFHt
put the formattedwidth of img pImg into theFWd
put max(the height of pObj/theFHt, the width of pObj/theFWd) into theRatio
set the height of img pImg to theFHt*theRatio
set the width of img pImg to theFWd*theRatio
set the loc of img pImg to the loc of pObj
end scaleToFit
-- passing a rect instead:
on scaleToRect pImg,pRect -- the image name, the target rect
put the formattedheight of img pImg into theFHt
put the formattedwidth of img pImg into theFWd
put max((item 4 of pRect - item 2 of pRect)/theFHt, (item 3 of pRect - item 1 of pRect)/theFWd) into theRatio
set the height of img pImg to theFHt*theRatio
set the width of img pImg to theFWd*theRatio
set the topleft of img pImg to item 1 of pRect,item 2 of pRect
end scaleToRect
The second version could use the card rect if the image should be the full size of the card. You can also change the last line of the second version to set the loc of the image rather than the topleft if you want. In the app this was for, we needed the topleft to remain stable.
Re: Scale image proportionally on resizestack
Posted: Fri Jan 05, 2018 5:53 am
by windowsLC
Got it thanks much.
I got it working but ended up not liking with stack resize effect for this UI so I went with using a slider set with ratios to resize the image contained with some similar code.
Seriously thanks to everyone that posted, this forum has been so helpful I'm nearly finished with the inner workings of my project.
Re: Scale image proportionally on resizestack
Posted: Thu Sep 27, 2018 1:39 am
by cowtrax3
I am new to LC and am having problems resizing the screens to fit correctly. I have put the following code into my stact script:
on preOpenStack
if the environment is "mobile" then
mobileSetAllowedOrientations "landscape left,landscape right"
set the fullscreenMode of this stack to "noBorder"
end if
end preOpenstack
it still does not scale correctly. Is this the correct syntax and location to place the code? Any help would be appreciated. I just want everything to expand and shrink appropriately to use on various size devices.
thanks. Mike
Re: Scale image proportionally on resizestack
Posted: Thu Sep 27, 2018 1:53 am
by ClipArtGuy
It's been a while since I did anything on the mobile side of things, but have you tried using "exactfit" instead of "noborder"?
Code: Select all
set the fullscreenMode of this stack to "exactfit"
Re: Scale image proportionally on resizestack
Posted: Thu Sep 27, 2018 4:29 am
by cowtrax3
that worked, sot of, but when put into portrait mode, it cuts of the right side of controls which dont fit. it does not scale down to the narrower size. show it not shrink it down when in the portrait mode?
thanks.
Mike
Re: Scale image proportionally on resizestack
Posted: Thu Sep 27, 2018 8:58 pm
by jacque
Your script handlers are in the right place, but "exactFit" isn't usually the best choice on mobile. If your stack is in landscape mode, "noBorder" usually works well, and for portrait, "showAll" is best. NoBorder scales the stack so the content height is completely shown, and ShowAll scales the stack to show the complete width of the content. In either case, some edges may be cropped or have empty borders if the screen ratio is different than the stack size ratio.
You can set the correct fullscreenMode on orientationChanged, which is sent before the card redraws.
Code: Select all
on orientationChanged
if the fullscreenMode of this stack = "noBorder" then
set the fullscreenMode of this stack to "showAll"
else
set the fullscreenMode of this stack to "noBorder"
end if
end orientationChanged
If you set the stack's backgroundColor or backgroundPattern, the borders won't be too noticable.
The other way of doing it is to avoid fullscreenMode and just calculate new positions for every object on the card and reset their rectangles in a resizeStack handler.
Re: Scale image proportionally on resizestack
Posted: Fri Sep 28, 2018 2:46 am
by bwmilby
If you want to put a test stack on your device to see how size/orientation changes are impacted by different fullscreenmodes, I've posted a demo:
https://milby.us/lc/MobileDemo2.livecode
Here's a thread on the list that discusses it:
https://www.mail-archive.com/use-liveco ... 97462.html