Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>rhtx was on the right track, but there is no easy way to center the image control with his solution. After some testing I came up with the following to solve this problem. I hope it saves you all some time.</p> <p>Here is the code for the custom component based on a group that contains the image control.</p> <pre><code>&lt;s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" creationComplete="group1_creationCompleteHandler(event)" &gt; &lt;fx:Script&gt; &lt;![CDATA[ public function assignImage(imgUrl:String):void { imgA.source = imgUrl; imgA.visible = true; } protected function group1_creationCompleteHandler(event:FlexEvent):void { this.addEventListener(ResizeEvent.RESIZE, SinglePageViewer_resizeHandler); } protected function group1_resizeHandler(event:ResizeEvent):void { updateImageDimensionsAndPosition(this.width, this.height); } private function updateImageDimensionsAndPosition(w:Number, h:Number):void { var aspect:Number = imgA.width / imgA.height; var containerAspect:Number = w / h; if ( isNaN(aspect) == false ) { if (aspect &lt;= containerAspect) { imgA.height = h; imgA.width = aspect * imgA.height; } else { imgA.width = w; imgA.height = imgA.width / aspect; } // If you want to horizontally center the image, uncomment the following /* var oldX:Number = imgA.x; var newX:Number = w/2 - imgA.width/2; if ( (oldX != newX) &amp;&amp; (newX &gt; 0) ) { imgA.x = newX; } */ } } ]]&gt; &lt;/fx:Script&gt; &lt;s:Image id="imgA" visible="false" top="0" maintainAspectRatio="true" /&gt; &lt;/s:Group&gt; </code></pre> <p>The only other part is in the main application you must specify a maxWidth and maxHeight for the custom component.</p> <pre><code>&lt;components.myCustomImageGroup id="cig" maxWidth="500" maxHeight="400" /&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload