Mobile Application Development | Multi-Point Pinch Zoom Rotate

Share Your Code

Browse Code

All (915)

Animation

(95)
Data

(87)
Events

(45)
Flash ActionScript

(4)
Game and App Templates

(42)
Game Logic

(136)
Menus

(22)
Network

(41)
Social

(13)
Tutorial

(66)
User Interface

(153)
Utilities

(211)

Multi-Point Pinch Zoom Rotate

Posted by horacebury, Posted on December 2, 2011, Last updated November 14, 2012

I have recently posted a much better implementation with completely revised multi-touch management:
http://developer.coronalabs.com/code/pinchzoom-made-real-easy

Previous example: https://developer.anscamobile.com/code/pinch-zoom-rotate

Full sample code: https://dl.dropbox.com/u/10254959/PinchZoomRotate.zip

[EDIT: If you take a closer look at the main.lua, I had recently added code to pinch-zoom a display group, instead of an image. This means that the group can have a lower quality image at smaller scales and a larger image (lazily loaded) at larger scales. While this could be handled in the pinch library, I thought it better - for now - to handle it in a more client-controlled manner.]

The previous pinch-zoom I developed was my first fully successful attempt to provide 2 finger pinch zooming. It works fine, but is limited by requiring the use of a display group (which effectively uses Corona's behind-the-scenes code to perform the tougher calculations) and can only handle two touch points.

This code is not limited in that way...

- It will handle any number of touch points
- Using it is simply a matter of calling one function (requires no setup)
- One touch point simply moves the image around
- Does not require you to store any separately stored state information (though it does store some state info on the image object itself, called __pinchzoomdata)
- Does not require any support display objects (all calculations are handle internally)
- Each pinch iteration is atomic and so does not require a stored value to be built, it only requires the previous and current touch point locations to work (this is all handled internally)

Other than this, the supporting math library is not tied in function to the pinch library, though the pinch lib does require the math lib.

The operations it performs are translation (moving relative to the touch points), scaling (pinch zooming relative to the touch points) and rotation (turning the image relative to the touch points.)

Basically, it works how you'd expect it to.

Currently, it does not provide the stretchy bounding limits which apps like Photos do. Also, you need to manage your own touch points and pass them in as a table. This is not difficult and often it is most easily managed by having a touch listener on the image to be manipulated and creating tracking display objects within a specially reserved display group.

Oh, as always you need to enable multitouch as each touch event needs an ID and you should provide an image where mine is titled "yoda.png" at the top of main.lua

So, here's the three files - main.lua, pinchlib.lua and mathlib.lua:

Please note: Multiple points may not work as expected if you have iOS Gestures or Accessibility switched on.

main.lua:

local pinchlibapi = require("pinchlib")
 
display.setStatusBar( display.HiddenStatusBar )
system.activate( "multitouch" )
 
--[[ There is no reason that the device environment could use display objects and stage:setFocus to track touch events... ]]--
 
--[[ This section handles the simulator interaction which is performed by display objects representing touches. ]]--
 
local stage = display.getCurrentStage()
 
-- use display group to allow image switching during scaling
local img = display.newGroup()
 
-- load smaller version of image
img.x1 = display.newImage( img, "yoda.png" )
img.x1.x, img.x1.y = 0, 0 -- place image in centre of pinched group
 
-- load larger version of image (this would normally be done lazily, to save memory)
img.x2 = display.newImage( img, "scene.png" )
img.x2.x, img.x2.y = 0, 0 -- place image in centre of pinched group
img.x2.xScale, img.x2.yScale = .5, .5 -- scale large version so it doesn't jump when coming into view
img.x2.alpha = 0 -- hide the larger version
 
img.x, img.y = display.contentCenterX, display.contentCenterY
 
-- handles calling the pinch for simulator
function simPinch()
        local points = {}
        for i=1, stage.numChildren do
                if (stage[i].name == "touchpoint") then
                        points[#points+1] = stage[i]
                end
        end
        pinchlibapi.doPinchZoom( img, points )
        
        -- handle the image switching
        if (img.xScale < 2) then
                img.x2.alpha = 0 -- hide the larger scale image if below 2x scale
        else
                img.x2.alpha = 1 -- show the higher quality image if scaled large enough
        end
        
        -- for simulator, print the scaling info
        print(img.xScale, img.yScale)
end
 
-- handles the simulator
function tap(event)
        local circle = display.newCircle(event.x, event.y, 25)
        circle.name = "touchpoint"
        circle.id = system.getTimer()
        circle.strokeWidth = 2
        circle:setStrokeColor(255,0,0)
        circle:setFillColor(0,0,255)
        circle.alpha = .6
        circle:addEventListener("tap", circle)
        circle:addEventListener("touch", circle)
        
        function circle:tap(event)
                circle:removeEventListener("tap",self)
                circle:removeEventListener("touch",self)
                circle:removeSelf()
                -- reset pinch data to avoid jerking the image when the average centre suddenly moves
                simPinch()
                return true
        end
        
        function circle:touch(event)
                if (event.phase == "began") then
                        stage:setFocus(circle)
                elseif (event.phase == "moved") then
                        circle.x, circle.y = event.x, event.y
                elseif (event.phase == "ended" or event.phase == "cancelled") then
                        circle.x, circle.y = event.x, event.y
                        stage:setFocus(nil)
                end
                
                simPinch()
                return true
        end
        
        simPinch()
        return true
end
 
--[[ This section handles device interaction which simply holds a list of the current touch events. ]]--
 
local touches = {}
 
-- handles calling the pinch for device
function devPinch( event, remove )
        -- look for event to update or remove
        for i=1, #touches do
                if (touches[i].id == event.id) then
                        -- update the list of tracked touch events
                        if (remove) then
                                table.remove( touches, i )
                        else
                                touches[i] = event
                        end
                        -- update the pinch
                        pinchlibapi.doPinchZoom( img, touches )
                        return
                end
        end
        -- add unknown event to list
        touches[#touches+1] = event
        pinchlibapi.doPinchZoom( img, touches )
        
        -- handle the image switching
        if (img.xScale < 2) then
                img.x2.alpha = 0 -- hide the larger scale image if below 2x scale
        else
                img.x2.alpha = 1 -- show the higher quality image if scaled large enough
        end
end
 
-- handles the device
function touch(event)
        -- handle the touch
        if (event.phase == "began") then
                pinchlibapi.doPinchZoom( img,{} )
                devPinch( event )
        elseif (event.phase == "moved") then
                devPinch( event )
        else
                pinchlibapi.doPinchZoom( img,{} )
                devPinch( event, true )
        end
end
 
--[[ This section attaches the appropriate touch/tap handler for the environment (simulator or device). ]]--
-- Please note that the XCode simulator will be handled as 'device' although it has no way to provide multitouch events.
 
if (system.getInfo( "environment" ) == "simulator") then
        Runtime:addEventListener("tap",tap) -- mouse being used to create moveable touch avatars
elseif (system.getInfo( "environment" ) == "device") then
        Runtime:addEventListener("touch",touch) -- fingers being used to create real touch events
end

pinchlib.lua:

module(..., package.seeall)
 
local mathlibapi = require("mathlib")
 
-- requires a collection of touch points
-- each point must have '.id' to be tracked otherwise it will be ignored
-- each point must be in world coordinates (default state of touch event coordinates)
function doPinchZoom( img, points )
        -- must have an image to manipulate
        if (not img) then
                return
        end
        
        -- is this the end of the pinch?
        if (not points or not img.__pinchzoomdata or #points ~= #img.__pinchzoomdata.points) then
                -- reset data (when #points changes)
                img.__pinchzoomdata = nil
                
                -- exit if there are no calculations to do
                if (not points or #points == 0) then
                        return -- nothing to do
                end
        end
        
        -- get local ref to zoom data
        local olddata = img.__pinchzoomdata
        
        -- create newdata table
        local newdata = {}
        
        -- store img x,y in world coordinates
        newdata.imgpos = getImgPos( img )
        
        -- calc centre (build list of points for later - avoids storing actual event objects passed in)
        newdata.centre, newdata.points = getCentrePoints( points )
        
        -- calc distances and angles from centre point
        calcDistancesAndAngles( newdata )
        
        -- does pinching need to be performed?
        if (olddata) then
                -- translation of centre
                newdata.imgpos.x = newdata.imgpos.x + newdata.centre.x - olddata.centre.x
                newdata.imgpos.y = newdata.imgpos.y + newdata.centre.y - olddata.centre.y
                
                -- get scaling factor and rotation difference
                if (#newdata.points > 1) then
                        newdata.scalefactor, newdata.rotation = calcScaleAndRotation( olddata, newdata )
                else
                        newdata.scalefactor, newdata.rotation = 1, 0
                end
                
                -- scale around pinch centre (translation)
                newdata.imgpos.x = newdata.centre.x + ((newdata.imgpos.x - newdata.centre.x) * newdata.scalefactor)
                newdata.imgpos.y = newdata.centre.y + ((newdata.imgpos.y - newdata.centre.y) * newdata.scalefactor)
                
                -- rotate around pinch centre
                newdata.imgpos = mathlibapi.rotateAboutPoint( newdata.imgpos, newdata.centre, newdata.rotation, false )
                
                -- convert to local coordinates
                local x, y = img.parent:contentToLocal( newdata.imgpos.x, newdata.imgpos.y )
                
                -- apply pinch...
                img.x, img.y = x, y
                img.rotation = img.rotation + newdata.rotation
                img.xScale, img.yScale = img.xScale * newdata.scalefactor, img.yScale * newdata.scalefactor
        end
        
        -- store new data
        img.__pinchzoomdata = newdata
end
 
-- simply converts the display object's centre x,y into world coordinates
function getImgPos( img )
        local x, y = img:localToContent( 0, 0 )
        return { x=x, y=y }
end
 
-- calculates the centre of the points
-- generates a new list of points so we are not storing the list of events from calling code
function getCentrePoints( points )
        local x, y = 0, 0
        local newpoints = {}
        
        for i=1, #points do
                -- accumulate the centre values
                x = x + points[i].x
                y = y + points[i].y
                
                -- record the point with it's associated data
                newpoints[#newpoints+1] = { x=points[i].x, y=points[i].y, id=points[i].id }
        end
        
        -- return the list of points for next time and the centre point of this list
        return
                { x = x / #points, y = y / #points }, -- centre
                newpoints -- list of points
end
 
-- calculates the distance from the centre to each point and their angle if the centre is assumed to be 0,0
function calcDistancesAndAngles( data )
        for i=1, #data.points do
                data.points[i].length = mathlibapi.lengthOf( data.centre, data.points[i] )
                data.points[i].angle = mathlibapi.angleBetweenPoints( data.centre, data.points[i] )
        end
end
 
-- calculates the change in scale between the old and new points
-- also calculates the change in rotation around the centre point
-- uses their average change
function calcScaleAndRotation( olddata, newdata )
        local scalediff, anglediff = 0, 0
        
        for i=1, #newdata.points do
                local oldpoint = getPointById( newdata.points[i], olddata.points )
                
                scalediff = scalediff + newdata.points[i].length / oldpoint.length
                anglediff = anglediff + mathlibapi.smallestAngleDiff(newdata.points[i].angle, oldpoint.angle)
        end
        
        return
                scalediff / #newdata.points, -- scale factor
                anglediff / #newdata.points -- rotation average
end
 
-- returns the newpoint if it does not have a previous version, or the old point if it has simply moved
function getPointById( newpoint, points )
        for i=1, #points do
                if (points[i].id == newpoint.id) then
                        return points[i]
                end
        end
        return newpoint
end

mathlib.lua:

module(..., package.seeall)
 
 
-- returns the distance between points a and b
function lengthOf( a, b )
    local width, height = b.x-a.x, b.y-a.y
    return math.sqrt(width*width + height*height)
end
 
-- converts degree value to radian value, useful for angle calculations
function convertDegreesToRadians( degrees )
--      return (math.pi * degrees) / 180
        return math.rad(degrees)
end
 
function convertRadiansToDegrees( radians )
        return math.deg(radians)
end
 
-- rotates a point around the (0,0) point by degrees
-- returns new point object
function rotatePoint( point, degrees )
        local x, y = point.x, point.y
        
        local theta = convertDegreesToRadians( degrees )
        
        local pt = {
                x = x * math.cos(theta) - y * math.sin(theta),
                y = x * math.sin(theta) + y * math.cos(theta)
        }
 
        return pt
end
 
-- rotates point around the centre by degrees
-- rounds the returned coordinates using math.round() if round == true
-- returns new coordinates object
function rotateAboutPoint( point, centre, degrees, round )
        local pt = { x=point.x - centre.x, y=point.y - centre.y }
        pt = rotatePoint( pt, degrees )
        pt.x, pt.y = pt.x + centre.x, pt.y + centre.y
        if (round) then
                pt.x = math.round(pt.x)
                pt.y = math.round(pt.y)
        end
        return pt
end
 
-- returns the degrees between (0,0) and pt
-- note: 0 degrees is 'east'
function angleOfPoint( pt )
        local x, y = pt.x, pt.y
        local radian = math.atan2(y,x)
        --print('radian: '..radian)
        local angle = radian*180/math.pi
        --print('angle: '..angle)
        if angle < 0 then angle = 360 + angle end
        --print('final angle: '..angle)
        return angle
end
 
-- returns the degrees between two points
-- note: 0 degrees is 'east'
function angleBetweenPoints( a, b )
        local x, y = b.x - a.x, b.y - a.y
        return angleOfPoint( { x=x, y=y } )
end
 
-- Takes a centre point, internal point and radius of a circle and returns the location of the extruded point on the circumference
-- In other words: Gives you the intersection between a line and a circle, if the line starts from the centre of the circle
function calcCirclePoint( centre, point, radius )
        local distance = lengthOf( centre, point )
        local fraction = distance / radius
        
        local remainder = 1 - fraction
        
        local width, height = point.x - centre.x, point.y - centre.y
        
        local x, y = centre.x + width / fraction, centre.y + height / fraction
        
        local px, py = x - point.x, y - point.y
        
        return px, py
end
 
-- returns the smallest angle between the two angles
-- ie: the difference between the two angles via the shortest distance
function smallestAngleDiff( target, source )
        local a = target - source
        
        if (a > 180) then
                a = a - 360
        elseif (a < -180) then
                a = a + 360
        end
        
        return a
end

I apologise for not having proper access to github right now!

Type:
- Events,
- User Interface

Replies

Posted on Sat, 2011-12-03 10:09

flyingaudio

Offline