0 Replies Latest reply on Nov 16, 2011 7:10 AM by pcoyne1979

    Zooming/scaling content in a Scroller

    pcoyne1979

      Hello, I want to create an app that allows for pinch zooming on an image that is nested inside a scroller. I thought it would be relatively trivial to achieve this result by using code such as the following, together with a gestureZoomHandler event handler.

       

      <s:Scroller id="swfScroller" width="100%" height="100%">

          <s:Group id="imageGroup">

                <s:SWFLoader id="swfl"/>

           </s:Group>

      </s:Scroller>

       

      However, it turns out to be anything but trivial to achieve what I want to do because of the way the viewport of the scroller behaves when its content is scaled. Firstly, I need to remove the swfloader from the scroller when zooming to stop any scrolling from happening. Then I need to use the gestureZoomHandler to scale the swfloader. I scale from a registration point, so that the control seems to zoom from where the pinch is happening. This means the x,y coordinates of the swfloader have changed and are no longer 0,0. If I just add the swfloader back to the group, the viewport of the scroller and the swfloader control are no longer aligned. This creates a problem in that a user can no longer scroll back to the top left corner of the swfloader.

       

      It is a simple job to get a nested control to line up with the viewport of the scroller container. Just setting the x,y positions of the swfloader to 0,0 and then changing the horizontalScrollPosition and verticalScrollPosition of the group to the previous x,y positions of the swfloader multiplied by -1 should do this. The problem is that there is an internal method in the scroller, which repositions its viewport late on in its lifecycle if its properties change. This results in a jumping effect when a control is added back to the group, for which there is no obvious work around.

       

      I found this write up of the problem but the solution doesn't work for me, http://cliffordmeece.com/content/setting-scroll-positions-flex.

      Even if I use swfScroller.validateNow(), and then callLater(someMethod), and then reposition I still get problems.

       

      All I want to do is to be able to zoom a control inside a scroller, but it appears to be impossible in Flex. I want my app to work like Safari but I've tried for days to achieve this effect with no positive result. Has anyone done this? I would dearly like to know how. It seems to be the case that to get this effect to work I will need to override methods of the Scroller but I'm not a Flex genius, if I was I would be an Adobe evangelist. I'm just someone who wants to be able to scroll and zoom. It might have something to do with the checkScrollPosition() method of the Scroller class but I really don't know.