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

Implementing Pinch-Zoom-Rotate  7/11

Posted on January 22, 2013. Written by Brent Sorrentino

이전 글 까지만 해도 이 코드는 유용합니다. 하지만 좀 더 다듬어야 하죠. 작은 파란 사각형을 하나 이상의 손가락으로 움직일 수 있습니다. multitouch input device의 장점은 virtual 상황에서 real world 의 느낌을 주는데 있습니다. 이 코드에 rotation 과 scaling 효과를 주면 훨씬 더 실감나게 움직이곘죠.

Relative Motion


이 작업을 하기 전에 이전 코드(6번)를 실행 시킨 후 한 손가락을 이용했을 때 사각형이 어떻게 움직이는지 한번 보세요. touch point 로 사각형의 중심이 이동한 다음에 움직이죠. 이렇게 사각형의 중심이 이동하지 않고 그냥 touch point 와 그냥 relative 하게 움직이도록 할 겁니다. 이 작업을 하기 위해 moved와 ended phases 에 코드를 추가 할 겁니다.

sample7.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 )
      local dot = newTrackDot(e)  -- create a tracking dot
      rect.dots[ #rect.dots+1 ] = dot  -- add the new dot to the list
      
      -- pre-store the centre position of all touch points
      rect.prevCentre = calcAvgCentre( rect.dots )  
      return true  -- we handled the began phase
      
   elseif (e.parent == rect) then
       
      if (e.phase == "moved") then
          
         print( e.phase, e.x, e.y )
         -- calculate the centre position of all touch points
         local centre = calcAvgCentre( rect.dots )
         rect.x = rect.x + (centre.x - rect.prevCentre.x)  -- update the X position of rect
         rect.y = rect.y + (centre.y - rect.prevCentre.y)  -- update the Y position of rect
         rect.prevCentre = centre  -- store the centre of all touch points
         
      else  -- ‘ended’ and ‘cancelled’ phases
          
         print( e.phase, e.x, e.y )
         if (isDevice or e.numTaps == 2) then  -- remove the tracking dot from the list
            
            local index = table.indexOf( rect.dots, e.target )  -- get index of dot to be removed
            table.remove( rect.dots, index )  -- remove dot from list
            e.target:removeSelf()  -- remove tracking dot from the screen
            -- store the new centre of all touch points
            rect.prevCentre = calcAvgCentre( rect.dots )
         end
      end
      return true
   end
   
   return false  -- if the target is not responsible for this touch event return false
end
 





main.lua
sample7.lua

   

여기서 수정한 부분은 아래와 같습니다.

    모든 touch 들의 center 를 계산하고 began phase 안에서 참고하기 위해 그 값을 저장한다.
    moved phase 에서 사각형의 x,y 값에 이전 touch 와 현재의 touch center 사이의 차이점을 추가적용한다.
    ended phase 에 터치들의 저장된 터치들의 중심값을 업데이트한다. 그래서 손가락을 떼더라도 다음 moved phase 에서 사각형이 필요없이 이동하지 않도록 한다.

이제 사용자는 사각형 위에 여러 손가락을 얹어도 이상하게 움직이지 않을 겁니다. 그 손가락들을 바꾸고 움직이고 해도 어색하지 않게 움직입니다. 이제 사각형이 손가락 움직임에 따라 회전하면 더 자연스럽겠네요.