1. App Creation Studio
  2. Vragen
0
Beantwoord

Zooming Large Graphics

dpotter05 11 jaar geleden • bijgewerkt door icahill (Administrator) 11 jaar geleden • 7
I'm creating an app that displays large photos and I'd like users to be able to pinch zoom in, move the photo around, and pinch zoom out. So far I have this by setting the panel to zoomable="yes", but I'd love to have more control. I'd love for it to take less pinches to zoom in and out, and less swipes when zoomed in to move from one side of the photo to the other.

I suspect zoomscale, zoommin, and zoommax might help but I haven't been able to figure out how to use them. I've set them to floats like .25, .556, and 3.75 without seeing an effect. Anyone have tips for how I can gain more control over my users' zooming experience?

Also, right now if I want to display an 800 x 1500 pixel image it shrinks down so all the image is visible and looks like a thumbnail. I'd love to be able to display the image so it is aligned to the left, its height takes up the entire height of the screen, and the rest of the image to the right is off screen and the user has to scroll the image left to see it. Is there a way to do this?

David
Beantwoord
icahill (Administrator) 11 jaar geleden
I am sure there are probably other solutions, but this seems to do what you want. 

Image here: http://i.imgur.com/l2fSum8.jpg

Try out this WIRE:
<wire>
    <main>
    <pager name="main" width="200%" height="100%" orientation="horizontal" paginate="no">
      <image name="img" height="100%" source="big.jpg" zoomable="yes" zoomscale="5" zoomcenter="yes" draggable="yes" dragorientation="horizontal"></image> 
      <panel name="fill" width="40%" height="100%"></panel>
    </pager>  
    </main>
  </wire>
dpotter05 11 jaar geleden
Thanks!  It doesn't quite do what I need, but it's close.  I love the speed at which it pans.  For some reason though when I input the code above, replacing "big.jpg" with my own large image file name, the image jiggles when I zoom in and it isn't able to move diagonally.
dpotter05 11 jaar geleden
I'd love to see working examples of zoomscale, zoommin, and zoommax, as well as zoomcenter and zoomscroll.  Also, thanks for including draggable into your example!  Hadn't seen that tag yet.  Very useful.
icahill (Administrator) 11 jaar geleden
I performed some tests and it seems as if zoomscale and zoomscroll are not functioning as they should. I have logged some bugs for them.  


A simple min/max zoom can be achieved like this based off a 100% image. Min and max can be set for the number times zoom. So a 3x min zoom will kick you to 3 times the size of the image set on pinch and not let you go any smaller. The same applies for max, you can zoom in a max of 60x on pinch in the example below, but not more.  

<image name="big" height="100%" width="100%" source="big.jpg" zoomable="yes" zoommin="3" zoommax="60" ></image>
dpotter05 11 jaar geleden
Thanks!  I copied and pasted the code above into my app and wasn't able to get zoommin and zoommax to work.  If they were set to zoommin="3" zoommax="60" or zoommin="1" zoommax="2" the image responded the same: it displayed at 100% height and width of the android screen and I could pinch zoom the image as far in as desired.

Would love to hear when there is movement on the zoomscale and zoomscroll bugs!
icahill (Administrator) 11 jaar geleden
David,

Let me double check with my dev team this morning and see if zoommin and zoommax have been implemented for Android. I know there is still some parity to achieve in some regards. 
icahill (Administrator) 11 jaar geleden
According to the Dev Team, these have NOT been implemented in Android yet, which explains why you are seeing inconsistencies. I will log a feature request and let them know. 

Thanks. 

Customer support service by UserEcho