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

Implementing Pinch-Zoom-Rotate  4/11

Posted on January 22, 2013. Written by Brent Sorrentino



Faking Multitouch Input


파란 사각형 객체는 multiple touch input들의 recipient(받는사람) 이 될 겁니다. 이렇게 하기 위해서 우선 그 touch listener 함수를 수정해야 합니다. 우선 moved와 eneded 그리고 cancelled phases에 대해 print() 구문을 몇개 넣을 겁니다. 아래 코드는 작은 파란 사각형의 :touch() listener function을 수정한 결과 입니다.


sample4.lua

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 )  -- create a tracking dot
      local dot = newTrackDot(e)  -- we handled the began phase
      return true
 
   elseif (e.parent == rect) then
 
      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 target is not responsible for this touch event return false
end

가장 많이 바뀐 부분은 moved,ended, cancelled phases 에 추가 된 건데요. 여기서 tracking dot들이 파란 사각형의 :touch() function을 call 하도록 하는 겁니다. event parameter 로 pass 하고 하얀 원의 touch 함수에의해 receive 되게 되죠.

elseif 구문도 중요한데요. tracking dot들이 사각형에 event parameter를 pass 한다면 e.target은 사각형이 아니라 그 dot에 대한 reference 가 될 겁니다. 이 reference 를 .parent 프로퍼티안의 사각형으로 저장할 겁니다. 이렇게 함으로서 rect:touch() function은 해당 터치 이벤트가 맞는지 안 맞는지 체크할 수 있게 됩니다. 물론 아직 원의 touch 함수가 사각형의 :touch()를 call 하도록 바꾸지는 않았습니다. 이 작업을 하기 전에 각 원이 사각형 객체에 대한 reference를 가지고 있어서 rect:touch() function를 call 하고 evnet parameter를 pass 할 수 있는지 여부를 확인해야 합니다.

아래 newTrackDot() function의 시작부분 입니다. 이 함수는 이벤트 파라미터의 원래 .target 프로퍼티에 대한 local copy 를 만들어야 합니다.

-- creates an object to be moved
function newTrackDot(e)
 
   local circle = display.newCircle( e.x, e.y, 50 )  -- create a user interface object
   circle.alpha = 0.5  -- make it less imposing
   
   local rect = e.target  -- keep reference to the rectangle
   
   function circle:touch(e)  -- standard multi-touch event listener
   -- ...

원래의 began event phase를 receive 한 객체를 계속 reference 하는 것은 tracking dot을 multitouch event에서 해당 reference로 영향을 줄 수 있도록 합니다. 이제 began phase event parameter를 "rect"로 보내기 위한 tracking dot이 필요 없게 됐습니다. 왜냐하면 이미 이벤트를 receive 했기 때문이죠. 이제 우리가 해야할 작업은 tracking dot의 :touch() function 안의 rect:touch(e)를 call 하는 겁니다. 그렇게 하면 다른 phase들이 그 rect 객체로 보내질 수 있게 되는 것이죠.

main.lua sample4.lua

-- standard multi-touch event listener
function circle:touch(e)
 
   local target = circle  -- get the object which received the touch event
   circle.alpha = 0.5  -- make it less imposing
   e.parent = rect  -- store the parent object in the event
      
   -- handle each phase of the touch event life cycle...
   if (e.phase == "began") then
       
      display.getCurrentStage():setFocus(target, e.id)  -- set touch focus on this object
      target.hasFocus = true  -- remember that this object has the focus
      return true  -- indicate the event was handled
      
   elseif (target.hasFocus) then  -- this object is handling touches
      
      if (e.phase == "moved") then  -- move the display object with the touch
         target.x, target.y = e.x, e.y
      else  -- "ended" and "cancelled" phases
         display.getCurrentStage():setFocus(target, nil)  -- remove touch focus
         target.hasFocus = false  -- this object no longer has the focus
      end
 
      rect:touch(e)  -- send the event parameter to the rect object
      return true  -- indicate that we handled the touch and not to propagate it
   end
 
   return false  -- if target is not responsible for this touch event return false
end

아주 간단하죠. 이제 우리는 사각형을 만들었습니다. 그 사각형은 touch 가 될 때마다 tracking dot을 생성하게 됩니다. 각 dot들은 또한 그들의 touch 정보를 그 사각형에 보내게 됩니다. 이 때 그 dot들의 original touch handler 함수를 사용하게 되는 거죠. 이 사각형은 그것이 맞는  target인지 알고 있습니다.

이 trick 을 사용함으로서 얼티터치 정보를 사용할 수 있게 됐습니다.