반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

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

2013. 2. 11. 17:32 | Posted by 솔웅


Posted on . Written by



이전 글 까지만 해도 이 코드는 유용합니다. 하지만 좀 더 다듬어야 하죠. 작은 파란 사각형을 하나 이상의 손가락으로 움직일 수 있습니다. 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 에서 사각형이 필요없이 이동하지 않도록 한다.

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




반응형

Comment