Pan and zoom/pinch images with MOAI

gistfile1.lua

------------------------------------------------------------------------------
-- local members
------------------------------------------------------------------------------

local devWidth, devHeight = 0, 0
local viewport = nil
local layer = nil
local quad = nil
local prop = nil
local imgWidth, imgHeight = 0, 0
local pinchX, pinchY = 0, 0
local panX, panY = 0, 0
local fingersDown = 0
local mouseDown = false
local mouseX, mouseY = 0, 0

------------------------------------------------------------------------------
-- local methods
------------------------------------------------------------------------------

local function init()
	devWidth, devHeight = MOAIGfxDevice.getViewSize()

	viewport = MOAIViewport.new()
	viewport:setSize( devWidth, devHeight )
	viewport:setScale( devWidth, devHeight )

	layer = MOAILayer2D.new()
	layer:setViewport( viewport )
	MOAISim.pushRenderPass( layer )

	local img = MOAIImage.new()
	img:load( "image.png" )
	imgWidth, imgHeight = img:getSize()

	quad = MOAIGfxQuad2D.new()
	quad:setTexture( img )
	local hw, hh = imgWidth/2, imgHeight/2
	quad:setRect( -hw, -hh, hw, hh )
	quad:setUVRect( 0, 1, 1, 0 )

	prop = MOAIProp2D.new()
	prop:setDeck( quad )
	layer:insertProp( prop )
end

local function initPinch()
	pinchX, pinchY = 0, 0
end

local function doPinch( f1x, f1y, f2x, f2y )
	local w = f2x-f1x
	local h = f2y-f1y
	local d = math.sqrt( w*w + h*h )
	local x, y = prop:getLoc()

	if pinchX == 0 and pinchY == 0 then
		pinchX = imgWidth/d
		pinchY = imgHeight/d
	end

	x = x/imgWidth
	y = y/imgWidth

	imgWidth = pinchX*d
	imgHeight = pinchY*d
	w = imgWidth/2
	h = imgHeight/2

	x = x*imgWidth
	y = y*imgWidth

	quad:setRect( -w, -h, w, h )
	prop:setLoc( x, y )
end

local function initPan( x, y )
	panX, panY = prop:getLoc()
	panX = panX-x
	panY = panY-y
end

local function doPan( x, y )
	prop:setLoc( x+panX, y+panY )
end

local function pointerCallback( x, y )
	mouseX, mouseY = layer:wndToWorld( x, y )

	if mouseDown then
		doPan( mouseX, mouseY )
	end
end

local function clickCallback( down )
	if down and not mouseDown then
		initPan( mouseX, mouseY )
	end

	mouseDown = down
end

------------------------------------------------------------------------------
-- initalize and set up callbacks
------------------------------------------------------------------------------

init()

if MOAIInputMgr.device.finger then
	-- mouse input
	MOAIInputMgr.device.pointer:setCallback ( pointerCallback )
	MOAIInputMgr.device.mouseLeft:setCallback ( clickCallback )
else
	-- touch input
	MOAIInputMgr.device.touch:setCallback(
		function( eventType, index, x, y, tapCount )
			if eventType == MOAITouchSensor.TOUCH_DOWN then
				fingersDown = fingersDown+1
			elseif eventType == MOAITouchSensor.TOUCH_UP or
				eventType == MOAITouchSensor.TOUCH_CANCEL then
				fingersDown = fingersDown-1
				if fingersDown < 0 then fingersDown = 0 end
			end

			if fingersDown == 2 then
				if eventType == MOAITouchSensor.TOUCH_DOWN or
					eventType == MOAITouchSensor.TOUCH_UP then
					initPinch()
				elseif eventType == MOAITouchSensor.TOUCH_MOVE then
					local f1, f2 =
						MOAIInputMgr.device.touch:getActiveTouches()
					local f1x, f1y =
						MOAIInputMgr.device.touch:getTouch( f1 )
					local f2x, f2y =
						MOAIInputMgr.device.touch:getTouch( f2 )

					doPinch( f1x, f1y, f2x, f2y )
				end
			elseif fingersDown > 0 then
				if eventType == MOAITouchSensor.TOUCH_DOWN then
					initPan( layer:wndToWorld( x, y ) )
				elseif eventType == MOAITouchSensor.TOUCH_UP then
					local f1, f2, f3, f4 =
						MOAIInputMgr.device.touch:getActiveTouches()
					local b = 0
					if f1 ~= index then b = f1
					elseif f2 ~= index then b = f2
					elseif f3 ~= index then b = f3
					elseif f4 ~= index then b = f4
					end
					initPan( layer:wndToWorld(
						MOAIInputMgr.device.touch:getTouch( b ) ) )
				elseif eventType == MOAITouchSensor.TOUCH_MOVE then
					doPan( layer:wndToWorld( x, y ) )
				end
			end
		end )
end