Pinch Zoom Rotate 구현하기 - 5/11 -

Implementing Pinch-Zoom-Rotate  5/11

Posted on January 22, 2013. Written by Brent Sorrentino

Employing Multitouch

이제 멀티 터치 포인트들의 시작을 detect 할 수 있는 object를 가지게 됐습니다. 그리고 그 객체는 각 포인트에 대한 tracking dot을 생성하고 touch 이벤트들을 receive하게 되죠.

이 멀티터치 정보의 기본적인 사용법을 활용하기 위해 이 rect display object를 touch point의 중심에 위치시킬겁니다. 이러한 기능들은 사각형 객체의 :touch() function 안에서 구현됩니다. 여러 터치 이벤트들의 중심에 rect 객체를 위치시키기 위해 우선 모든 터치 이벤트들의 평균 x값과 y값을 구해야 합니다. 이 기능을 위해서는 별도의 함수를 만들어서 구현하겠습니다.

sample5.lua

local function calcAvgCentre( points )
   local x, y = 0, 0
   
   for i=1, #points do
      local pt = points[i]
      x = x + pt.x
      y = y + pt.y
   end
   
   return { x = x / #points, y = y / #points }
end

이 함수를 call 하려면 rect 는 자신이 생성한 tracking dot들의 리스크를 보관하고 있어야 합니다. 이 리스트들을 생겼을 떄 바로 사각형의 property 로 추가할 겁니다.

-- create object to listen for new touches
local rect = display.newRect( 200, 200, 200, 100 )
rect:setFillColor( 0, 0, 255 )
rect.dots = {}  -- table for the list of tracking dots

이제 이 점들의 평균 center 값을 갖게 됐습니다. 그리고 rect 의 x,y 를 그 값에 따라 움직일 수가 있습니다.

-- standard multi-touch event listener
function rect:touch(e)
 
   local target = e.target  -- get the object which received the touch event
   
   -- handle began phase of the touch event life cycle...
   if (e.phase == "began") then
       
      print( e.phase, e.x, e.y )
      local dot = newTrackDot(e)  -- create a tracking dot
      rect.dots[ #rect.dots+1 ] = dot  -- add the new dot to the list
      return true  -- we handled the began phase
      
   elseif (e.parent == rect) then
      
      local centre = calcAvgCentre( rect.dots )  -- calculate centre pos of touch points
      rect.x, rect.y = centre.x, centre.y  -- update the position of rect
      
      if (e.phase == "moved") then
         print( e.phase, e.x, e.y )
      else -- ‘ended’ and ‘cancelled’ phases
         print( e.phase, e.x, e.y )
      end
      return true
      
   end
   
   return false  -- if the target is not responsible for this touch event return false
end


main.lua
sample5.lua

이 코드를 실행시켜 보세요. 작은 파란 사각형을 보실 겁니다. 그 사각형을 터치해보세요. 그러면 하얀 원이 생길 겁니다. 이 원을 움직이면 파란 사각형도 따라서 움직일 겁니다. 터치를 떼고 다른 원을 다시 만들어 보세요. 이제 그 원을 움직이면 작은 파란 사각형은 그 두 원의 중심 부분에 위치하게 될 겁니다. 다른 원을 만들면 또 그 원들의 중심에 사각형이 위치할 거구요.