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

최근에 받은 트랙백

글 보관함

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

2013. 2. 8. 12:27 | Posted by 솔웅


Posted on . Written by



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





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


반응형

Comment