Drag an object and zoom its parent group

I’ve coded an app that has a zoomable mapview area and a draggable object placed on it.

As long as the scale of the map is 1, drag works fine, however when I scale the map down drag works in global coordinates and the object lags behind your finger (in the example below its scaled down to 50%). I’ve tried playing with contentToLocal, but got very jittery results.

How can I modify this code to have the object stay below the user’s finger at any scale?

Thanks for any help!

[code]

local zoomGroup = display.newGroup();

local mapArea = display.newGroup();
local mapAreaBGColor = display.newRect(0,0,500,500);
mapAreaBGColor:setFillColor(80,80,80);
mapAreaBGColor.x , mapAreaBGColor.y = 0 , 0;
mapArea:insert(mapAreaBGColor);
local draggableObject = display.newCircle(0,0,15);
draggableObject.x, draggableObject.y = 0,0
mapArea:insert(draggableObject);

zoomGroup:insert(mapArea);
zoomGroup.x, zoomGroup.y = display.contentWidth*.5 , display.contentHeight*.5;
zoomGroup:scale(.5,.5);
local function dragMe( event )
local t = event.target

local phase = event.phase
if “began” == phase then
display.getCurrentStage():setFocus( t, event.id )
t.isFocus = true

– Store initial position
t.x0 = event.x - t.x
t.y0 = event.y - t.y

elseif t.isFocus then
if “moved” == phase then
if (event.x-t.x0) < (-mapAreaBGColor.width*.5) then --left map boundary
t.x = -mapAreaBGColor.width*.5
elseif (event.x-t.x0)>(mapAreaBGColor.width*.5) then --right map boundary
t.x=mapAreaBGColor.width*.5
else t.x = event.x - t.x0
end
if (event.y-t.y0) < (-mapAreaBGColor.height*.5) then --map top boundary
t.y= -mapAreaBGColor.height*.5
elseif (event.y-t.y0) > ( mapAreaBGColor.height*.5) then --bottom boundary
t.y = mapAreaBGColor.height*.5
else t.y = event.y - t.y0
end

elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( t, nil )
t.isFocus = false
end
end
return true
end

draggableObject:addEventListener(“touch”, dragMe)
[/code] [import]uid: 33608 topic_id: 14672 reply_id: 314672[/import]

This should work for you.

[code]local zoomGroup = display.newGroup();

local mapArea = display.newGroup();
local mapAreaBGColor = display.newRect(0,0,500,500);
mapAreaBGColor:setFillColor(80,80,80);
mapAreaBGColor.x , mapAreaBGColor.y = 0 , 0;
mapArea:insert(mapAreaBGColor);

local draggableObject = display.newCircle(0,0,15);
draggableObject.x, draggableObject.y = 0,0
mapArea:insert(draggableObject);

zoomGroup:insert(mapArea);
zoomGroup.x, zoomGroup.y = display.contentWidth*.5 , display.contentHeight*.5;
zoomGroup:scale(.2,.2);
local function dragMe( event )
local t = event.target
local e_x,e_y = zoomGroup:contentToLocal(event.x,event.y)

local phase = event.phase
if “began” == phase then
display.getCurrentStage():setFocus( t, event.id )
t.isFocus = true

– Store initial position
t.x0 = e_x - t.x
t.y0 = e_y - t.y

elseif t.isFocus then
if “moved” == phase then
if (e_x-t.x0) < (-mapAreaBGColor.width*.5) then --left map boundary
t.x = -mapAreaBGColor.width*.5
elseif (e_x-t.x0)>(mapAreaBGColor.width*.5) then --right map boundary
t.x=mapAreaBGColor.width*.5
else t.x = e_x - t.x0
end
if (e_y-t.y0) < (-mapAreaBGColor.height*.5) then --map top boundary
t.y= -mapAreaBGColor.height*.5
elseif (e_y-t.y0) > ( mapAreaBGColor.height*.5) then --bottom boundary
t.y = mapAreaBGColor.height*.5
else t.y = e_y - t.y0
end

elseif “ended” == phase or “cancelled” == phase then
display.getCurrentStage():setFocus( t, nil )
t.isFocus = false
end
end
return true
end

draggableObject:addEventListener(“touch”, dragMe) [import]uid: 7177 topic_id: 14672 reply_id: 54448[/import]

Works like a charm,
thanks for the help! [import]uid: 33608 topic_id: 14672 reply_id: 54468[/import]