[flexcoders] Re: Scale To Fit
The developer's guide regarding layout & sizing: http://livedocs.adobe.com/flex/3/html/help.html?content=size_position_2.html --- In flexcoders@yahoogroups.com, "pliechty" wrote: > > Does Flex have a scale to fit mechanism? I would like to scale a component > to fit in the visible screen space. >
[flexcoders] Re: Scale To Fit
I've got a measuring class to do it. Scale to fit, fill, stretch and center. it return a matrix of the values. --- In flexcoders@yahoogroups.com, "pliechty" wrote: > > Does Flex have a scale to fit mechanism? I would like to scale a component > to fit in the visible screen space. >
Re: [flexcomponents] RE: [flexcoders] Re: Scale to fit, revisited
Sorry folks. One more time with attachment renamed to foil the filters.
On Wed, Sep 3, 2008 at 10:28 AM, Richard Rodseth <[EMAIL PROTECTED]> wrote:
> Cross-posting to flexcoders...
>
>
> On Wed, Sep 3, 2008 at 9:34 AM, Richard Rodseth <[EMAIL PROTECTED]>wrote:
>
>> On Tue, Sep 2, 2008 at 9:51 PM, Alex Harui <[EMAIL PROTECTED]> wrote:
>>
>>>If you post a test case, I might get a chance to look at it
>>> .
>>> sdf
>>>
>>
>> Thanks, that would be great. A Flex project archive is attached, and the
>> complete code is also below. There's an HBox with two instances of the
>> ScaledContent component. The button on the right scales and centers
>> properly. The one on the left doesn't.
>>
>> TestScaledContent.mxml
>>
>>
>> http://www.adobe.com/2006/mxml";
>> layout="vertical"
>> xmlns:comp="comp.*"
>> >
>>
>> > >
>>
>>
>> > >
>> > height="1400" cornerRadius="100"/>
>>
>>
>>
>>
>>
>>
>> ScaledContent.mxml:
>>
>>
>> http://www.adobe.com/2006/mxml"; xmlns:comp="comp.*"
>> horizontalScrollPolicy="off" verticalScrollPolicy="off"
>> >
>>
>>
>> [DefaultProperty("contents")]
>>
>>
>>
>>
>>
>>
>> > height="100%">
>>
>>
>>
>>
>> ScaledContentHolder.as:
>>
>> package comp
>> {
>> import mx.core.Container;
>> import mx.core.UIComponent;
>>
>>
>> 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);
>> }
>> }
>>
>> }
>>
>
>
TestScaledContent.zp
Description: Binary data
RE: [flexcoders] Re: Scale to fit, revisited
If you post a test case, I might get a chance to look at it.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Richard
Rodseth
Sent: Tuesday, September 02, 2008 4:44 PM
To: flexcoders@yahoogroups.com; [EMAIL PROTECTED]
Subject: [flexcoders] Re: Scale to fit, revisited
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]<mailto:[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:
ScaledContent.mxml:
http://www.adobe.com/2006/mxml"; xmlns:comp="comp.*"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
>
[DefaultProperty("contents")]
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);
}
[flexcoders] Re: Scale to fit, revisited
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:
>
> borderStyle="solid" >
>
> cornerRadius="50"/>
>
>
>
> ScaledContent.mxml:
>
>
> http://www.adobe.com/2006/mxml"; xmlns:comp="comp.*"
> horizontalScrollPolicy="off" verticalScrollPolicy="off"
> >
>
>
> [DefaultProperty("contents")]
>
>
>
>
>
>
>
>
>
>
>
> 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);
> }
>
>
