06-16-2012 12:21 PM
I am in a situation where I need to use a control to display an image and pan it on drag. Also this control will have to be able to zoom into the image on pinch, but I've been told that there is no pinch event in Cascades so far, so let's focus on the pan element. When the user touches the ImageView (on touch) it should be able to move as the finger moves. I know that ImageView doesn't support this functionality, but what approach should I take to incorporate this?
Let's say I've loaded the image from some path and I have a QImage stored somewhere. I've used it's data to display an Image in ImageView. How do I implement panning in ImageView? Or if it can't be done, how should I create an image control that can pan (for now) and zoom (in the future)? Basically, I am looking for a Cascades equivalent of this Native functionality example called Gestures: https://developer.blackberry.com/native/sampleapps
I don't need all the functionality of that example. I need information how to pan an image in a Cascades control.
Thanks in advance.
Solved! Go to Solution.
06-18-2012 04:05 PM
This shows moving, responding to touch events.
06-18-2012 06:27 PM
Thanks, but it doesn't help much. I need to implement an image control similar to the example given (Gestures in the native SDK), not a slider-like control. Perhaps such a control should use the native functionality, but how do I link native functionality. For example, can (and if yes, how) I use a ForeignWindow to display the Gestures example functionality to cascades? Or if I shouldn't use ForeignWindow, how can I recreate the Gestures functionality? Now, that is the question.
06-20-2012 09:23 AM
Gesture support is not available through Cascades yet, but it should be coming. Once there you can extend the functionality of ImageView and add support for zoom.
Currently you are able implement the logic to pan the image by responding to touch events (Down then Move) as noted by Stuart. This could then be expanded to handle gestures once APIs are available.
06-20-2012 10:01 AM
And that is exactly what I am asking. How do I implement panning with ImageView? Do I move (translate) the ImageView control in a container smaller than the ImageView itself? (Since you can't control the underlying image.)
Is it even possible the container to be smaller than the item it contains?
I know of the touch events, I don't need zooming for now. I need advice on how to implement the pan. All that's been given so far is generalization and nothing specific.
06-20-2012 10:10 AM
Yes, you can place an element in a Container smaller than the size of the element but the Container will need to be made scrollable (scrollMode: ScrollMode.Both) so it knows to allow the larger child element to extend past its bounds.
For the Pan, just take a look at the PullMyBeard sample, it shows how to listen for touch events and move an ImageView with the touch movement:
If you have any issues implementing please let us know.
06-23-2012 09:20 AM
Thanks for the answer. I was able to test it just now, so that's why I delayed selecting the answer.
For anyone wondering, if you want to control the pan, you'll need to set the layout of the Container to AbsoluteLayout and then set the translation and/or scale of the component you are moving in onTouch. That's what PullMyBeard does.
Scroll mode::Both works as well, but it automates the scrolling, so you won't get much control over the pan it I you need it.