Page 1 of 1
Solved: Rotate Scaled Img
Posted: Sun Nov 28, 2021 3:03 am
by Xero
Hi all,
I feel like I am missing something small here but can't seem to search the right terms.
I have a jpeg image that I am reducing the width and height of (i.e. scaling" it) then I am rotating it. Scaling is a function of the app that I am making, so I can't just import a smaller image. I need to rotate a large scale or small scale image.
If I rotate an image as imported (100%, no modifications), I get what I need.
If I scale an image, then rotate it, it rescales to 100% then rotates.
If I rotate an image then scale it, I don't get a scale effect.
If I scale an image and set LockLoc to true, I keep the scale and get rotation, but it attempts to stay within the rect and gets distorted (in my case stretches horizontally), warping my image.
What am I missing?
Any help would be appreciated.
XdM
Livecode Community 9.0.4
Windows
Code: Select all
--Scale Button--
on mousedown
--set the Lockloc of img "V0" to true--remove remarks to get warped image
put the height of img "V0" into tStartH
put tStartH/2 into tStartH
put the width of img "V0" into tStartW
put tStartW/2 into tStartW
set the width of img "V0" to tStartW
set the height of img "V0" to tStartH
end mousedown
Code: Select all
--Rotate Button--
on mousedown
set the angle of img "V0" to (the angle of img "V0" +5)
end mousedown
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 11:22 am
by richmond62
I have just been fooling around with this, and, as far as I am concerned
the way to prevent all the rubbish that happens with your method, the 'trick'
is to ROTATE the image (unlocked) before you SCALE it and lock it.
Code: Select all
on mouseUp
put item 1 of the loc of img "V0" into LR
put item 2 of the loc of img "V0" into UD
set the angle of img "V0" to ((the angle of img "V0") + 5)
set the lockLoc of img "V0" to true
put ((the height of img "V0")/2) into tStartH
put ((the width of img "V0")/2) into tStartW
set the width of img "V0" to tStartW
set the height of img "V0" to tStartH
set the loc of img "V0" to LR, UD
end mouseUp
1. Give that a try: certainly worked for me.
2. Probably a better idea to use
mouseUp rather than
mouseDown so you can change your mind.
-
-
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 12:33 pm
by Xero
Thanks Richmond, but I am still getting issues.
It looks like in your example that the width and height are changing as you rotate. The rotated image looks shorter than the original...
When I use the same code with a scale factor of 1.01 (so it doesn't keep scaling wildly and you can't see the effect) and a non-square image, I get the funny warping of the image as it rotates.
Curious... I still feel like there should be a way to set the W and H of an image and not have it reset, OR set the LockLoc and not have the image distort when rotated.
XdM
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 1:54 pm
by richmond62
It looks like in your example that the width and height are changing as you rotate.
Let's look at my code carefully:
on mouseUp
[ The imported image is NOT locked ]
[ these 2 lines give me the original dimensions of the image ]
put item 1 of the loc of img "V0" into LR
put item 2 of the loc of img "V0" into UD
[ this line rotates the image ]
set the angle of img "V0" to ((the angle of img "V0") + 5)
[ this line LOCKS the image ]
set the lockLoc of img "V0" to true
[ these lines half the size of the rotated image ]
put ((the height of img "V0")/2) into tStartH
put ((the width of img "V0")/2) into tStartW
set the width of img "V0" to tStartW
set the height of img "V0" to tStartH
[ this line makes sure the image ends up at the location it started at before it was rotated ]
set the loc of img "V0" to LR, UD
end mouseUp
I experienced NO distortion.
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 1:56 pm
by jmburnod
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 2:00 pm
by richmond62
"There is currently a problem trying to achieve this in LiveCode, whereby,
if you set the angle first, then scale the image it works fine, but if you scale
the image first and then adjust the angle, the image reverts to its original size,
hence the need for a workaround."
Or, as in my example, simply perform the rotation first.
The ONLY snag is that if you try to rotate the image again, say, like this:
Code: Select all
on mouseUp
set the lockLoc of img "V0" to false
put item 1 of the loc of img "V0" into LR
put item 2 of the loc of img "V0" into UD
------
set the angle of img "V0" to ((the angle of img "V0") + 5)
------
set the loc of img "V0" to LR, UD
set the lockLoc of img "V0" to true
end mouseUp
it reverts to the original size.
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 2:19 pm
by Xero
Richmond, when I apply your code with the only tweak being scale = 1.001 (so I don't get big changes in scale that don't allow me to see distortion, I get this:
Rotation 0
and Rotation 90
It seems like the bounding box (not a square, a rectangle so the height is shorter than the width) remains the same, while the image sits within it, proportions changed to fit. It may be reporting as the same size/ proportion, but what you see of the image is getting warped for me.
Jean-Marc, that seems to work, but is a very long-winded way of doing it and when I apply it to 25 images in my Inverse Kinematic Model, it may be convoluted and extend time. I will have a play with it and see what comes of it, but that theory seems to be the way to go by manually resetting things while rotating and scaling.
XdM
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 2:57 pm
by richmond62
You are completely right:
-
-
-
so the proportions of the picture when it is rotated are not preserved.
The ONLY way to keep rotating the image is to rescale it subsequently . . .
Re: Rotate Scaled Img
Posted: Sun Nov 28, 2021 3:03 pm
by richmond62
Here's the code from my
ROTATE AGAIN button:
Code: Select all
on mouseUp
put the width of img "V0" into WIDD
put the height of img "V0" into HITE
-----------------------
set the lockLoc of img "V0" to false
put item 1 of the loc of img "V0" into LR
put item 2 of the loc of img "V0" into UD
------
set the angle of img "V0" to ((the angle of img "V0") + 5)
------
set the lockLoc of img "V0" to true
set the lockLoc of img "V0" to true
put ((the height of img "V0")/2) into tStartH
put ((the width of img "V0")/2) into tStartW
set the width of img "V0" to tStartW
set the height of img "V0" to tStartH
-----------------------
set the loc of img "V0" to LR, UD
end mouseUp
-
-
No distortion.
Re: Rotate Scaled Img
Posted: Wed Dec 15, 2021 12:25 pm
by Xero
OK... Thanks to the brainstrust, we have an answer on this one.
For whatever reason, when you scale an image and then rotate it, or rotate an image and scale it, there is a degree of distortion that occurs unless some specific steps are taken in the operation. As long-winded as these are, they work to scale and rotate images without loss or distortion.
Below I have provided the code for 2 buttons: SCALE and ROTATE. These will effectively a) scale a rotated image and; b) rotate a scaled image.
These will work around the following issue: images will resize to original when rotated and will distort if the lockloc is set to true.
SCALE:
Code: Select all
on mouseDown
put the cScale of img "V0" into sCurrentScale --this is a custom property for the image that tracks the current scale: 1=100%, 0.5=50% etc. and will need to be set sometime before translating image.
--Gather the current image dimensions, location and rotation
put the width of img "V0" into sWidth
put the height of img "V0" into sHeight
put the loc of img "V0" into sLoc
put the angle of img "V0" into sAngle
--Necessary for the following translation
set the lockloc of img "V0" to true
lock screen
-- Set the new scale. However you want to handle the scaling of the image, do it here and put the new scale value into sScale
put 0.5 into sScale
--Not necessary, but will speed up the redrawing process
set the visible of img "V0" to false
--For whatever reason, the ordering of the following will produce the correct result, despite the fact that the image is derotated, then rotated
set the angle of img "V0" to 0
--Necessary for the following translation
set the lockloc of img "V0" to false
set the angle of img "V0" to sAngle
--Gather the reformatted sized (i.e. reset to imported sized automatically by Livecode)
put the width of img "V0" into sWidth
put the height of img "V0" into sHeight
--Necessary for the following translation
set the lockloc of img "V0" to true
-- Rescale the image to original scale
set the width of img "V0" to (sWidth * sScale)
set the height of img "V0" to (sHeight * sScale)
--Relocate centre to centre
set the loc of img "V0" to sloc
--Not necessary if the set to false was not used earlier
set the visible of img "V0" to true
unlock screen
end mousedown
ROTATE:
Code: Select all
on mouseDown
--Gather information of image about location and rotation
put the loc of img "V0" into sLoc
--I have used a custom property here to track the angle of image, as it suits my other application.
put the cRotation of img "V0" into sValue
--put the angle of img "V0" into sValue --Alternative code
--Necessary for the following translation
set the lockloc of img "V0" to false
--Change the angle. Can be handled many ways, I have just added 5 degrees anti-clockwise rotation
add 5 to sValue
--I track the rotation in the custom property, and ensure it's between 0 and 360 degrees. This is not necessary.
if sValue >360 then set the cRotation of img "V0" to (sValue - 360)
set the cRotation of img "V0" to sValue
lock screen
-- Rotate Image, this will reset the size of the image to imported size!
set the angle of img "V0" to sValue
--Relocate image to original place
set the loc of img "V0" to sLoc
--Necessary for the following translation
set the lockloc of img "V0" to true
-- Rescale the image based on sizes gathered at start of function
-- Gather current size information
put the width of img "V0" into sWdim
put the height of img "V0" into sHdim
--Use custom scale property, as this will not be altered when the image was reset earlier
put the cScale of img "V0" into tScaleValue
--Rescale image to prior size
set the width of img "V0" to (sWdim * tScaleValue)
set the height of img "V0" to (sHdim * tScaleValue)
--Relocate image
set the loc of img "V0" to sloc
unlock screen
end mousedown
I have stripped a lot of the original code I was given and tested it, and this was as tight as I could make it while still working. Any further work to cut it down would be appreciated.
It should be noted that this is not my original code, just an adapted version. Much kudos goes to the original coders, originally by Paul Hibbert (and I am sure someone else, but I can't remember who! SORRY!!!)
XdM