0

When scaling the Spark Image component, the bounding box does not scale with it. This means the parent container (in this case, a Group) does not fit the image bounds exactly. I've seen this asked several times, but never have I seen someone give an answer.

Code currently being used:

this.headerArea = new Group();
this.headerArea.percentWidth = 100;
this.headerArea.styleName = "pageHead";
this.scrollViewport.addElementAt( this.headerArea, 0 );

this.logo = new Image();
this.logo.source = "assets/images/logo.png";
this.logo.scaleMode = BitmapScaleMode.LETTERBOX;
this.logo.smooth = true;
this.logo.percentWidth = 75;
this.logo.horizontalCenter = 0;
this.logo.styleName = "headerLogo";
this.headerArea.addElement( this.logo );

The logo scales to the size I need it to, but there is a large amount of padding on top and bottom (which increases as the image's percentWidth decreases).

Is there any solution to this?

zero323
  • 322,348
  • 103
  • 959
  • 935
Josh
  • 8,079
  • 3
  • 24
  • 49
  • From what I see your code seems to be correct. Maybe there's a problem with the containing groups layout? Is this actually all code needed to reproduce the error? – T. Richter Jul 08 '13 at 18:01
  • @T.Richter The headerArea is added to a Scroller which is in a View, but those should have no effect on this. – Josh Jul 08 '13 at 19:17
  • It would seem that when you use 'letterbox' a.k.a. "keep aspect ratio" combined with 'percentWidth', a similar percentHeight is applied to keep the aspect ratio of the Image as a component (not the image itself). In a way this makes sense, though I have to agree it's not what you'd expect. – RIAstar Jul 08 '13 at 20:34
  • @RIAstar Any ideas how to work around it? I suppose we could manually set height (`Image.contentHeight * Image.scaleX` might work; I'd have to play with it though), which would overwrite the `percentHeight`. That seems like an inefficient way to do this, though, since it would have to rely on various events to behave correctly in all instances. – Josh Jul 08 '13 at 20:54
  • What if you bind the Image's `width` to the Group's, something like `{headerArea.width*3/4}`? – RIAstar Jul 08 '13 at 21:41
  • @RIAstar Same issue if you do it that way or the way I suggested. This seems like a major oversight on Adobe's part. It's unfortunate Apache isn't really making any sweeping improvements with this framework – Josh Jul 08 '13 at 22:15
  • Why don't you help them out and file an issue? https://issues.apache.org/jira/browse/FLEX ;) – RIAstar Jul 08 '13 at 22:43
  • @RIAstar After looking at it more closely, this isn't a bug. The default scaleMode is LETTERBOX and this is being letterboxed. There is no built in way to auto scale an image without letterboxing from the looks of it. I'll have to handle it manually (i.e. don't use percentHeight/percentWidth) I think – Josh Jul 08 '13 at 23:14

0 Answers0