Pinch Zoom a scrollview or group or some item other than an image rectangle

Solar2D General Questions/Discussion
#1

Hello

i saw the example of pinch and zoom working on an container, with an image rectangle inside it, loaded with a bitmap image from a jpg or png file.  and i can get this to work no problems.

But what i want to know is there a way to pinch and zoom some other display item like a scrollviewer or group that that contains various display items.

what i am doing is drawing a chart in a scrollviewer, so its just a lot of lines in a scrollviewer then i put the scroll viewer into a group but when i try this in the pinch zoom code it does not pinch and zoom.

is there a way to pinch and zoom anything other than an image rectangle, or do i have to convert my chart into a jpg or png file, and if so how to do that? 

Regards

Bruce

#2

I would assume you can zoom anything you can scale (scaleX,scaleY), meaning most display objects, but im not so sure native objects are scaleable though.

#3

looking at more examples and code from various Corona people, they all refer to imageRect when they use the pinch and zoom and multi touch events.

this is all good if you have an image file to load, but I was generating my own “image” as it were in a scroll viewer by drawing lines in a graph form, and then trying to pick and zoom the resulting scroll viewer or the group display where I display my graph.

I tried substituting my scroll viewer in the pinch/zoom code in place of the imageRect but there is no resulting pinch and zoom effect when I run the App on my iPad.  But when I use an imageRect and load an image I can get the pinch and zoom to work with no problems.

so it seems the multi touch pinch and zoom only appears to work on an imageRect.  even though scroll viewer and display groups have a xScale and yScale as they inherit form display objects.

I guess my first question is, can we only pinch and zoom on an imageRect? and second question is then, can we pinch and zoom a scroll viewer?

Regards

Bruce. 

#4

Hi, i havent used pinch and zoom so this is all theory for me.

A scrollviewer widget isnt object afaik but more a displaygroup/container. You still need objects to catch the touch events, but I suppose the main challenge is how to reliably detect the pinch/zoom without triggering the scroll event itself.

Maybe someone else who has hands on experience can fill in here.

#5

You can apply the concept and practice of pinch-zoom to a group containing objects.

Just remember, groups scale about their <0,0> 

So, if you scale an group whose <0,0> is in the upper-left corner of the screen and that group contains an object at < 200, 200 >, the object will seems to get smaller and move left and up.

Note: Scaling a complex widget like a scroll-view may have negative side-effects on that widget’s function.

#6

I had a post on how to write multi-touch pinch-zoom code here:

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

The old blog links don’t appear to work any more so I have posted the original (unsanitised) tutorial here:

https://springboardpillow.blogspot.com/2018/07/handling-multitouch-input-tutorial-on.html

As noted by RoamingGamer, I wouldn’t pinch-zoom widgets because they may not behave the way you expect.

#7

ok, I moved everything into a group display only, and I could get some reaction to my pinch and zoom. the scroll view was not working as people indicated.

I just need to figure the exact co-ords I need to manipulate in the group display, but at least I know its possible to pinch and zoom my graph which is now in a groupDisplay item.

Regards

Bruce.

#8

you cannot pinch-zoom a scrollview as it is not a standard display object

#9

I didn’t test my theory but with a bit a little of work and imagination you can have a zoom inside a scrollView object.

just put all content in a group, and put that group inside the scrollView. then create a transparent rectangle in all screen in front of the scrollView. use it for detect the zoom effect…when it detect 2 fingers it will zoom the group inside the scrollView…how it will react i don’t have a clue…but it should work.

#10

I would assume you can zoom anything you can scale (scaleX,scaleY), meaning most display objects, but im not so sure native objects are scaleable though.

#11

looking at more examples and code from various Corona people, they all refer to imageRect when they use the pinch and zoom and multi touch events.

this is all good if you have an image file to load, but I was generating my own “image” as it were in a scroll viewer by drawing lines in a graph form, and then trying to pick and zoom the resulting scroll viewer or the group display where I display my graph.

I tried substituting my scroll viewer in the pinch/zoom code in place of the imageRect but there is no resulting pinch and zoom effect when I run the App on my iPad.  But when I use an imageRect and load an image I can get the pinch and zoom to work with no problems.

so it seems the multi touch pinch and zoom only appears to work on an imageRect.  even though scroll viewer and display groups have a xScale and yScale as they inherit form display objects.

I guess my first question is, can we only pinch and zoom on an imageRect? and second question is then, can we pinch and zoom a scroll viewer?

Regards

Bruce. 

#12

Hi, i havent used pinch and zoom so this is all theory for me.

A scrollviewer widget isnt object afaik but more a displaygroup/container. You still need objects to catch the touch events, but I suppose the main challenge is how to reliably detect the pinch/zoom without triggering the scroll event itself.

Maybe someone else who has hands on experience can fill in here.

#13

You can apply the concept and practice of pinch-zoom to a group containing objects.

Just remember, groups scale about their <0,0> 

So, if you scale an group whose <0,0> is in the upper-left corner of the screen and that group contains an object at < 200, 200 >, the object will seems to get smaller and move left and up.

Note: Scaling a complex widget like a scroll-view may have negative side-effects on that widget’s function.

#14

I had a post on how to write multi-touch pinch-zoom code here:

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

The old blog links don’t appear to work any more so I have posted the original (unsanitised) tutorial here:

https://springboardpillow.blogspot.com/2018/07/handling-multitouch-input-tutorial-on.html

As noted by RoamingGamer, I wouldn’t pinch-zoom widgets because they may not behave the way you expect.

#15

ok, I moved everything into a group display only, and I could get some reaction to my pinch and zoom. the scroll view was not working as people indicated.

I just need to figure the exact co-ords I need to manipulate in the group display, but at least I know its possible to pinch and zoom my graph which is now in a groupDisplay item.

Regards

Bruce.

#16

you cannot pinch-zoom a scrollview as it is not a standard display object

#17

I didn’t test my theory but with a bit a little of work and imagination you can have a zoom inside a scrollView object.

just put all content in a group, and put that group inside the scrollView. then create a transparent rectangle in all screen in front of the scrollView. use it for detect the zoom effect…when it detect 2 fingers it will zoom the group inside the scrollView…how it will react i don’t have a clue…but it should work.