Page 1 of 1
Pinch image then change angle
Posted: Sat Feb 11, 2012 2:33 pm
by teacherguy
I have an image where the user can pinch to resize. Then I have a button that will change the angle in five degree increments. Pressing the button after a resize restores the image to the original size as it angles rather than maintaining the smaller size. Thoughts as to why?
Re: Pinch image then change angle
Posted: Sun Feb 12, 2012 12:56 am
by bn
Hi teacherguy,
when you use the angle of an image to turn it Livecode always reverts to the original data of the image. And just changing the width and height of an image does not change the original image. That is why the image that has been enlarged by your pinch reverts to the original size.
You could set the lockLoc of the image to true, but that gives you a distorted image at e.g. 90 degrees. The width and height are reversed. Probably not what you want.
What you can do is a trick that sounds a bit strange but here it is:
after you zoomed your image by pinching and before you set the angle you issue a
Code: Select all
set the imageData of image "myImage" to the imageData of image "myImage"
now the image is fixed in its new enlarged size and you can set the angle (lockLoc of the image = false)
But here is the catch: once you have set the imagedDate of the image to the imageData of the image the change is permanent. If you want to revert the image to its original state you would have to save the imageData of the image on a pristine version of the image, before changing anything. I do that as a custom property of the image.
Code: Select all
set the uImageData of image "myImage" to the imageData of image "myImage"
now if you want the original state of your image after enlarging it and changing its imageData you would script:
Code: Select all
set the imageData of image "myImage" to the uImageData of image "myImage"
there is your original image.
in this thread I posted a stack that animates a spinning image that also enlarges at the same time. Kind of a combination of pinching and turning.
http://forums.runrev.com/phpBB2/viewtop ... 042#p37901
If this all sounds a bit funny don't worry, it is a bit funny...
Kind regards
Bernd
P.S. I would not even try to rotate the image. Rotate is a destructive command that distorts the image. Angle is OK as long as you know that angle always uses the original image to be non-destructive.
Re: Pinch image then change angle
Posted: Sun Feb 12, 2012 5:40 pm
by teacherguy
Thank you Bernd, much appreciated
Re: Pinch image then change angle
Posted: Sun Feb 12, 2012 5:53 pm
by bn
Hi Teacherguy,
one thing I would want to mention is: if you use the technique of setting the imageData of an image to the imageData of that same image you detach it from a referenced file.
That means if you display an image in an image object that is on your harddisk, once you do the setting of the imageData it is no longer a referenced image but an image "in its own right". Just like an imported image.
That is no problem but you have to be aware of that.
Sometimes I even use this command to "import" images that were referenced.
Kind regards
Bernd
Re: Pinch image then change angle
Posted: Mon Feb 13, 2012 4:18 pm
by teacherguy
So I thought that I would utilize the custom property in order to speed up the pinch/zoom stuff. I store the imageData as you described. I then set the resizeQuality to "normal" at the start of the touchMove handler, and then after the TouchEnd I put the resizeQuality to "best" and set the image to the custom property. I figured that would result in faster zooming and a higher quality result. However, when I set the image to the pristine version at the new size, the image becomes scrambled.
Re: Pinch image then change angle
Posted: Mon Feb 13, 2012 5:39 pm
by bn
Hi Teacherguy,
here I made a stack that lets you increase the size of an image and then turn it.
What I said was incomplete for what you wanted to do.
It still sets the imageData but uses the text of the image to go back to the pristine version.
I forgot that if you set the imageData on an image that was resized you get distortion. That is why there is now a custom property uImageText.
The "text of an image" is the complete information about an image including size.
have a look at the scripts in the scrollbars, especially the one that sets the size.
The stack assumes that you first want to change the size and then the angle of an image.
If you want to change the size of a tilted image it gets more complicated.
Kind regards
Bernd
Re: Pinch image then change angle
Posted: Mon Feb 13, 2012 6:25 pm
by teacherguy
Thank you Bernd. Question: Do I need to open the inspector and click the plus sign to add the custom properties first, or can I just initiate them in the script?
Re: Pinch image then change angle
Posted: Mon Feb 13, 2012 8:15 pm
by bn
Hi Teacherguy,
Do I need to open the inspector and click the plus sign to add the custom properties first, or can I just initiate them in the script?
I would suggest you make a button with the script:
Code: Select all
on mouseUp
set the uOrigWidth of image "myImage" to the width of image "myImage"
set the uOrigHeight of image "myImage" to the height of image "myImage"
set the uImageText of image "myImage" to the text of image "myImage"
end mouseUp
click this button when you place your image and have named it. Before making any changes to it.
I put the custom properties into the image for convenience reasons. Of course you could put them into the card or any other object. Ideally you could delete the button. As long as you have the image it will contain the custom properties.
You could not set the "text of the image" manually via the properties inspector since that is binary data.
Kind regards
Bernd
Re: Pinch image then change angle
Posted: Sat Feb 18, 2012 2:11 pm
by teacherguy
This has helped alot. I still can't get zooming to be as speedy as most other apps that I own, but I guess that is just a livecode limitation?