Solved: Rotate Scaled Img

[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

[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.
-

-

[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

[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.

[jmburnod]

Hi,
Did you see this ?
https://revonline2.runrev.com/stack/685 ... -an-Image/
Jean-Marc

[richmond62]

Did you see this ?
https://revonline2.runrev.com/stack/685 ... -an-Image/

"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.

[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

[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 . . .

[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.

[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