 |
History
| Log In
|
|
|
|
We have the same issue here.
We are creating a image viewer application that display a list of thumbnails and a central image. Our central image is in a canvas with horizontalCenter = 0 and verticalCenter = 0. We use the scaleX and scaleY properties of the image to zoom in or out within our application. When the zooming cause the canvas to have scrollbar, a section of the top and a section of the left part of the image is not displayed. It looks like there is not enough space in the scrolling area to display it all. Severity: Incorrectly Functioning Found in Version: SDK Moxie M3 (Beta 2) (build 3.0.183654) Reproducibility: Every Time Affected OS(s): Windows 2003 Language Found: English Browser: Internet Explorer 7.x Player version: 9,0,60,235 CPU: Intel Core 2 6400 @ 2.13GHz Memory: 2 Gig Flex is working as designed here. With box model overflow, any portion of a child in negative coordinate space is clipped and does not count towards overflow width (or height).
In the zoom example, when the child image becomes larger than the parent canvas, it is centered relative to the canvas (as intended) but its left and top is now in negative space. And the portion in negative coordinate space is what you don't see (by design). For example if you had a 10x10 box positioned at -10, -10 within a canvas, it would not inherently trigger overflow (scrollbars), and is hidden from the user. The same behavior is present with CSS overflow, see the HTML document below: <html> <head> </head> <body> <p>The overflow property decides what to do if the content inside an element exceeds the given width and height properties.</p> <div style="overflow:scroll;width:150px;height:150px;"> <div style="position:relative;top:-20px; width:150px; height:200px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo </div> </div> </body> </html> See also the attached revised sample (zoomCanvasNew) that takes this overflow behavior into consideration. The approach is that the child image is constrained to the positive coordinate space, making use of horizontalCenter and verticalCenter only up to the point of overflow. Recommend resolving (works as designed). See above explanation.
Resolving as Not a Bug, in light of Corey's explanation.
Bug.
OK, it's as designed. So, you could say not a bug. But let's instead question the design. We have a real world need not being met - how can we meet it? Peter on http://www.sephiroth.it/weblog/archives/2007/11/flex_canvas_bug_when_it_is_zoomed_in.php said it well, "[the issue] is not in the zooming or positioning of image on the canvas, but it is in maintaining the scroller positioning. The scrollers should be positioned at the center when you zoom in towards the center." This would meet my needs. Have not read it yet, but perhaps Flex 4 will help ...
http://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Viewport Currently the Gumbo scrolling classes behave the same was as Halo did in this situation. However I've run into the same mismatch between intuition and implementation myself, and I think we could do better in Gumbo.
I think what people intuitively expect to be able to do in this case is to constrain the location of the viewport when it's smaller than the available space within the FxScroller. So if you've specified verticalCenter="0" what you mean is vertically center the viewport within the FxScroller until the viewport is consuming all of the available vertical space. Once it gets bigger than that, we show a vertical scrollbar and ignore the verticalCenter constraint. Making FxScrollBarLayout respect left,right,top,bottom and vertical,horizontalCenter (for this case) wouldn't be too difficult. This is a BUG... a desktop application should not behave like this period.
Here's a workaround I use (it basically binds it to the left as soon as it goes outside the screen and centers it when it fits the screen again): // FOR HORIZONTAL if(image.x < 0){ holderBox.setStyle("horizontalAlign", "left"); }else if(image.width < holderBox.width){ holderBox.setStyle("horizontalAlign", "center"); } // FOR VERTICAL if(image.y < 0){ holderBox.setStyle("verticalAlign", "top"); }else if(image.height < holderBox.height){ holderBox.setStyle("verticalAlign", "middle"); } I hope this helps anyone... Cheers, Pedro | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
 |
|
Bug
Closed
C
Canvas clips left half of contents when it is zoomed in and horizontalCenter = 0
1. Load the application.
2. Using the horizontal slider, increase the scaleX and scaleY properties to something like 1.45.
3. Try to use the horizontal scrollbar to scroll to the left most edge of the photo.
Results, the left umbrella is cut off and you can't scroll to the left most edge.
This is not a regression, however.