FusePowered

Pinch Zoom in a scrollView Widget

No replies
horacebury
User offline. Last seen 18 hours 58 min ago. Offline
Joined: 17 Aug 2010

This is a follow-on from a question posted on the Pinch-Zoom tutorial as my initial comment does not show the lua code properly:

http://www.coronalabs.com/blog/2013/01/22/implementing-pinch-zoom-rotate/#comment-11756

Adjusted comment:

Hmm, good one. I’m not sure that you want to be associating the functionality between them…

If you let the (any) scroll (view, widget, etc) take the focus, you will lose the ability to control the handling of the following multiple touches. This implicitly stops your multitouch effect from ever starting.

Well, while writing this, I’ve taken a stab at modifying the final ‘sample11.lua’ file to add a simple, full-screen scrollView widget and add the multi-coloured object from the demo…

If you open ‘sample11.lua’, go to line 214 and add the following code (note: I’ve left in the surrounding lines to show where to place the insert) you should see the multi-colour object in a light blue scrollView:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
-– create display group to listen for new touches
local group = display.newGroup()
 
-– insert this…
local widget = require “widget”
local scrollView = widget.newScrollView{
width = display.contentWidth,
height = display.contentHeight,
scrollWidth = display.contentWidth,
scrollHeight = display.contentHeight*2,
}
display.newRect(scrollView.content,0,0,display.contentWidth,display.contentHeight*2):setFillColor(150,150,255)
-– inserted code ends.
 
scrollView:insert( group )
 
-– populate display group with objects
local rect = display.newRect( group, 200, 200, 200, 100 )

Now, I’ve just built this and tried it on my iPad and it works. There is one issue which I’ve mentioned in a previous post, on this page:

As the scrollView moves (when you use one touch to scroll it) the relative position of the object being pinched effectively changes. Because of this, you would need to begin making use of the :contentToLocal() and :localToContent() functions. These would allow the touch points to take effect in the relative space of the scrolled display group (the scrollView, in this case) rather than the absolute world coordinates of the screen.

I will be working on this and I hope to provide a follow-up tutorial on making use of pinch-zoom in a real world application, but for now I’ll leave this as an exercise for the reader.

Please leave your comments and questions and I’ll do my best to help out.