yeah . it was in response to this .. But my main concern now is that while it scales and centers as desired, it only does it if the contents have an explicit width and height. Not sure if that calls into question the whole approach, or is just a missing invalidation.
On Wed, Sep 3, 2008 at 12:23 AM, Richard Rodseth <[EMAIL PROTECTED]> wrote: > Edward, > > Was this in response to my thread? I don't follow. > > On Tue, Sep 2, 2008 at 8:07 PM, Edward Rockwell <[EMAIL PROTECTED]>wrote: > >> >> My scenario was loading images from a directory on the server and placing >> them inside a canvas in a rectangular array fashion. When I set >> autoLayout to >> true the images would show without me sizing the canvas to the >> height/width >> of the total contents, but when I set autoLayout to false, I had to set >> the total >> height/width of the canvas to match it's contents. I thought it was >> strange. >> I read in blog somewhere that easing would not work correctly on moving a >> canvas that had autoLayout set to true.. I was finding that to be the >> case, so >> that's why I set autoLayout to false. >> >> >> On Tue, Sep 2, 2008 at 7:43 PM, Richard Rodseth <[EMAIL PROTECTED]>wrote: >> >>> I'd really love some review of the code below. I made one correction >>> in red: the target of the move() call should be "this" rather than _content. >>> >>> Some refactoring might be in order. The dance between the contentholder >>> and the ScaledContent parent due to the _allowInvalidateSize issue is a bit >>> clunky. >>> >>> But my main concern now is that while it scales and centers as desired, >>> it only does it if the contents have an explicit width and height. Not sure >>> if that calls into question the whole approach, or is just a missing >>> invalidation. >>> >>> Thanks. >>> >>> On Tue, Sep 2, 2008 at 11:59 AM, Richard Rodseth <[EMAIL PROTECTED]>wrote: >>> >>>> I'm returning to a component I was trying to write earlier, that would >>>> scale and center a single child (or ideally children), such that the >>>> contents fit within the bounds of the container, and aspect ratio is >>>> preserved. The solution at the end of this post does the scaling of one >>>> child fine (including aspect ratio) but I haven't figured out how to >>>> incorporate the centering. Just setting horizontalCenter on the content >>>> holder didn't work, and nor did my efforts to add a move() call as shown in >>>> the code below: >>>> >>>> A couple of notes. >>>> - If the measure() implementations returned content dimensions rather >>>> than 0, I got scroll bars and 1400 was passed into updateDisplayList(). >>>> - allowInvalidateSize is because otherwise setting scale triggers >>>> re-measuring. >>>> >>>> Any advice about the centering would be much appreciated. Here's the >>>> code: >>>> >>>> Test case: >>>> >>>> <mx:Canvas width="90%" height="90%" horizontalCenter="0" >>>> verticalCenter="0" borderStyle="solid" > >>>> <comp:ScaledContent width="100%" height="100%" borderStyle="solid" >>>> > >>>> <mx:Button label="Big" width="1400" height="1400" >>>> cornerRadius="50"/> >>>> </comp:ScaledContent> >>>> </mx:Canvas> >>>> >>>> ScaledContent.mxml: >>>> >>>> <?xml version="1.0" encoding="utf-8"?> >>>> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; >>>> xmlns:comp="comp.*" >>>> horizontalScrollPolicy="off" verticalScrollPolicy="off" >>>> > >>>> >>>> <mx:Metadata> >>>> [DefaultProperty("contents")] >>>> >>>> </mx:Metadata> >>>> >>>> <mx:Script> >>>> <![CDATA[ >>>> import mx.core.UIComponent; >>>> >>>> private var _contents:UIComponent; >>>> private var _contentsChanged:Boolean = false; >>>> >>>> public function set contents(value:UIComponent):void { >>>> _contents = value; >>>> _contentsChanged = true; >>>> this.invalidateProperties(); >>>> } >>>> >>>> override protected function commitProperties():void { >>>> super.commitProperties(); >>>> >>>> if (_contentsChanged) { >>>> contentHolder.content = _contents; >>>> _contentsChanged = false; >>>> } >>>> } >>>> >>>> >>>> override protected function measure():void { >>>> super.measure(); >>>> minWidth = measuredWidth = 0; // >>>> _contents.getExplicitOrMeasuredWidth(); >>>> minHeight = measuredHeight = 0; // >>>> _contents.getExplicitOrMeasuredHeight(); >>>> } >>>> >>>> override protected function >>>> updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { >>>> super.updateDisplayList(unscaledWidth, unscaledHeight); >>>> contentHolder.scaleContentToFit(unscaledWidth, >>>> unscaledHeight); >>>> contentHolder.setActualSize(unscaledWidth, >>>> unscaledHeight); >>>> } >>>> ]]> >>>> </mx:Script> >>>> >>>> <comp:ScaledContentHolder id="contentHolder" > >>>> </comp:ScaledContentHolder> >>>> >>>> </mx:Canvas> >>>> >>>> ScaledContentHolder.as >>>> >>>> public class ScaledContentHolder extends UIComponent >>>> { >>>> public function ScaledContentHolder() >>>> { >>>> } >>>> >>>> private var _allowInvalidateSize:Boolean = true; >>>> private var _content:UIComponent; >>>> private var _contentChanged:Boolean = false; >>>> >>>> override protected function measure():void >>>> { >>>> super.measure(); >>>> minWidth = measuredWidth = 0; // >>>> _content.getExplicitOrMeasuredWidth(); >>>> minHeight = measuredHeight = 0; >>>> //_content.getExplicitOrMeasuredHeight(); >>>> } >>>> >>>> public function set content(value:UIComponent):void { >>>> _content = value; >>>> _contentChanged = true; >>>> this.invalidateProperties(); >>>> } >>>> >>>> override protected function commitProperties():void { >>>> super.commitProperties(); >>>> if (_contentChanged) { >>>> this.removeAllChildren(); >>>> this.addChild(_content); >>>> _contentChanged = false; >>>> } >>>> } >>>> >>>> >>>> private function removeAllChildren():void >>>> { >>>> while (numChildren> 0) >>>> { >>>> removeChildAt(0); >>>> } >>>> } >>>> >>>> >>>> override public function invalidateSize():void >>>> { >>>> if (_allowInvalidateSize) >>>> super.invalidateSize(); >>>> } >>>> >>>> public function scaleContentToFit(unscaledWidth:Number, >>>> unscaledHeight:Number):void { >>>> var contentWidth:Number = >>>> _content.getExplicitOrMeasuredWidth(); >>>> var contentHeight:Number = >>>> _content.getExplicitOrMeasuredHeight(); >>>> >>>> var xScale:Number = (unscaledWidth / contentWidth); >>>> var yScale:Number = (unscaledHeight / contentHeight); >>>> var finalScale:Number = Math.min(xScale, yScale); // >>>> Preserve aspect ratio >>>> >>>> _allowInvalidateSize = false; >>>> this.scaleX = finalScale; >>>> this.scaleY = finalScale; >>>> _allowInvalidateSize = true; >>>> >>>> var scaledContentWidth:Number = contentWidth * finalScale; >>>> var scaledContentHeight:Number = contentHeight * >>>> finalScale; >>>> >>>> this.move(unscaledWidth/2 - scaledContentWidth/2 , >>>> unscaledHeight/2 - scaledContentHeight/2); >>>> >>>> } >>>> >>>> override protected function >>>> updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void >>>> { >>>> super.updateDisplayList(unscaledWidth, unscaledHeight); >>>> } >>>> >>>> >>> >> >> >> -- >> Jamie >> > > > -- Jamie
