Pinch and Rotate

Thomas McGrath III mcgrath3 at mac.com
Sun Jan 22 14:07:14 EST 2012


I also added a resizeQuality to the "on touchMove" handler: 

set the resizeQuality of image "square" to "best"


-- Tom McGrath III
http://lazyriver.on-rev.com
3mcgrath at comcast.net

On Jan 22, 2012, at 1:57 PM, Thomas McGrath III wrote:

> 
> I was playing around with the "Pinch to Zoom an object" lesson at: http://lessons.runrev.com/s/lessons/m/4069/l/11509-how-do-i-implement-a-multi-touch-pinch-motion
> 
> And I wanted to add rotate to it as well so that I could pinch and rotate at the same time. I ran into a big wall (called Math I think) in trying to rotate based on how far from the original start point and wether I was rotating left or right.
> 
> My solution works for the most part but it is not optimal or very clean and wanted to invite others to take a stab at it:
> 
> I stated with the Pinch lesson stack and changed the GRAPHIC to an IMAGE and then modified the script to come up with this solution. This script goes into the card script and the card has an image named "square" on it. I edited it and added the rotateimage handler;
> 
> local sTouchArray, sFRAMEWIDTH, sFRAMEHEIGHT
> 
> on touchStart pId, pX, pY
>   put the width of image "square" into sFRAMEWIDTH
>   put the height of image "square" into sFRAMEHEIGHT
> end touchStart
> 
> on touchEnd pId
>   delete variable sTouchArray[pId]
> end touchEnd
> 
> on touchMove pId, pX, pY
	set the resizeQuality of image "square" to "best"

>    if sTouchArray[pId]["startloc"] is empty then
>        put (pX & comma & pY) into sTouchArray[pId]["startloc"]
>    end if
> 
>    put (pX & comma & pY) into sTouchArray[pId]["currentloc"]
> 
>    if the number of lines of the keys of sTouchArray is 2 then
>        # First lets get the data out of the array
>        put line 1 of the keys of sTouchArray into tPointOne
>        put line 2 of the keys of sTouchArray into tPointTwo
> 
>        # First lets calculate the size of the picture base on the distance 
>        # between the two touch points
>        put sTouchArray[tPointOne]["startloc"] into tStartLoc1
>        put sTouchArray[tPointTwo]["startloc"] into tStartLoc2
>        put sTouchArray[tPointOne]["currentLoc"] into tCurrentLoc1
>        if tStartLoc1 is not empty and tStartLoc2 is not empty then
>            put resizeDistance(tStartLoc1, tStartLoc2) into tStartDistance
>            put resizeDistance(sTouchArray[tPointOne]["currentloc"], sTouchArray[tPointTwo]["currentloc"]) into tCurrentDistance
>            resizeimage tStartDistance, tCurrentDistance
>            if item 2 of tStartLoc1 < item 2 of tCurrentLoc1 then
>                rotateimage "left", item 2 of tStartLoc1, item 2 of tCurrentLoc1
>            else
>                rotateimage "right", item 2 of tStartLoc1, item 2 of tCurrentLoc1
>            end if
>        end if
>    end if
> end touchMove
> 
> function resizeDistance pLoc1, pLoc2
>    local dy, dx, tDistance
>    put item 2 of pLoc1 - item 2 of pLoc2 into dy
>    put item 1 of  pLoc1 - item 1 of pLoc2 into dx
>    put sqrt((dy*dy) + (dx*dx)) into tDistance
>    return tDistance
> end resizeDistance 
> 
> on rotateimage pAngle pStart pNew
>    if pAngle contains "left" then
>        put pStart - pNew into tDistance
>        set the angle of image "square" to tDistance
>    else
>        put pNew - pStart into tDistance
>        set the angle of image "square" to (- tDistance)
>    end if
>    unlock screen
> end rotateimage
> 
> on resizeimage pStartDistance, pNewDistance
>    # Work out the percentage change between the old and new image
>    put round((pNewDistance / pStartDistance) * 100) into tPercentage
> 
>    # Store the original location of the image
>    put the loc of image "square" into tLoc
> 
>    # Calculate the new width and height
>    set the width of image "square"  to round(sFRAMEWIDTH * (tPercentage / 100))
>    set the height of image "square" to round(sFRAMEHEIGHT * (tPercentage / 100))
> 
>    set the loc of image "square"  to tLoc
>    unlock screen
> end resize image
> 
> 
> -- Tom McGrath III
> http://lazyriver.on-rev.com
> 3mcgrath at comcast.net
> 
> 
> _______________________________________________
> use-livecode mailing list
> use-livecode at lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode





More information about the use-livecode mailing list