Giro de imagen dentro de itemRenderer de TileList

Hola, a ver si me podeis hechar una mano, q no consigue que gire como debe.
Tengo un TileList con una coleccion de "imagenes". Para mostrar esas imágenes me he creado un componente que hace de itemRenderer. Hasta aki todo bien.
Mi problema viene cuando intento girar la imagen, pero no los textos e iconos que tb forman parte de mi itemRenderer.
Pra girarla tengo dentro del método updateDisplayList de mi itemRenderer una llamada a la siguiente función:

Código ActionScript :

   protected function aplicarGiro():void {
               
               var nivelGiro:uint = TileListGiroZoom(listData.owner).nivelRotacion;
               
                var giroAct:Number = TileListGiroZoom(listData.owner).arrayRotacion[nivelGiro];
               
               var radians:Number = degreesToRadians(giroAct);
               var offsetWidth:Number = img.width / 2;
                var offsetHeight:Number = img.height / 2;
                var tempMatrix:Matrix = img.transform.matrix;
                tempMatrix.translate(-offsetWidth, -offsetHeight);
                tempMatrix.rotate(radians);
                tempMatrix.translate(+offsetWidth, +offsetHeight);

                img.transform.matrix = tempMatrix;
                
      }

Este método obtiene los valores de arrays de los valores de giro (0, 90, 180, -90) y el nivelGiro actual(el indice para saber que giro tienen todas la imagenes actualmente).
En resumen este método obtiene cuantos grados tiene que estar girada la imagen, respecto a su posicion original.
El problema viene en que los itemRenderer se reutilizan por lo que con lo que actualmente hay escrito me temo que, al obtener tempMatrix, obtengo los valores antiguos.
Es decir, lo que necesito es poner la imagen en su angulo de giro inicial y luego rotarla los grados que tiene la variable giroAct.

Para hacer que gire respecto a su centro la imagen está metida dentro de un VBOX, con una estructura como la que sigue:

Código ActionScript :

      <mx:VBox id="contenido" y="{(iconos.visible)? (iconos.y + iconos.height + 2) : 2}" x="2"
            backgroundColor="#FFFFFF" cornerRadius="0"
            verticalAlign="middle" horizontalAlign="center"
              horizontalScrollPolicy="off" verticalScrollPolicy="off" 
              >
               <mx:VBox id="contenedorImagen"
               horizontalScrollPolicy="off" verticalScrollPolicy="off"
               paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
               borderColor="#FF0000" borderStyle="solid" borderThickness="4">
              <mx:Image id="img" maintainAspectRatio="true"
                   source="{data.detail.@ruta}"
              height="{data.detail.@height}" width="{data.detail.@width}"/>
         </mx:VBox>
      
      </mx:VBox>

El VBox "contenido" centra respecto al area del itemRenderer el VBox "contenedorImagen".
Este "contenedorImagen" se encarga de contener la imagen y hacer que cuando se gire la imagen esta gire respecto al centro de la misma y no respecto a su esquina izq.

EL problema es que la imagen hay veces q gira respecto a su izquina (0,0) y no se repinta bien, por problemas de giro, ya que con el zoom no hay problemas de pintado de nuevos elementos (cuando se desplaza el scroll).

Espero haber sido clara, es un código muy extenso y he tratado de poner solo lo mas relacionado.
Gracias de antemano, bye

El truco esta en que la informacion de rotacion no debe estar almacenada en el itemRenderer (de hecho ninguna informacion debe ser almacenada ahi) pues este se recicla.
Hice un ejemplo rapido de como funciona la rotacion.
Si quieres Copia y Pega el codigo en el Flex Builder...
Application RotateImage

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="loadInfo()" xmlns:local="*">
   <mx:Script>
      <![CDATA[
         import mx.controls.Image;
         import mx.collections.ArrayCollection;
         [Bindable] public var imgList:ArrayCollection;
         public function loadInfo ():void {
            imgList = new ArrayCollection();
            for ( var i:int = 0; i < 10; i++) 
               imgList.addItem(generateData(i));
         }
         
         public function generateData (i:int) : ImageDTO {
            var tmp:ImageDTO = new ImageDTO();
            tmp.rotation = 0;
            return tmp;
         }
      ]]>
   </mx:Script>
   <mx:VBox width="50%" height="20%">
      <mx:TileList id="meh" width="50%" height="100%" dataProvider="{imgList}" itemRenderer="rotationRender" columnCount="4" columnWidth="150" rowCount="2" rowHeight="100" themeColor="haloSilver" verticalScrollPolicy="on"/>
   </mx:VBox>
</mx:Application>

Componente rotationRender (es el itemRenderer)

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
   horizontalAlign="center"
        verticalAlign="middle">
   <mx:Script>
      <![CDATA[
         public function rotate ( val:Number ):void {
            if (val < 0 )
               if ( data.rotation == 0)
                  data.rotation = 360;
            data.rotation += val;
         }
      ]]>
   </mx:Script>
   <mx:Image source="assets/MrBomb.png" rotation="{data.rotation}" />
   <mx:VBox>
      <mx:Button label="+90°" click="rotate(90)"/>
      <mx:Button label="-90°" click="rotate(-90)"/>
   </mx:VBox>
</mx:HBox>

ActionScriptClass ImageDTO (es un simple Data Transfer Object)

Código :

package {
   [Bindable]
   public class ImageDTO {
      public var rotation:Number;
   }
}

en la carpeta Assets tengo una imagen llamada MrBomb.png
Lo hice con una sola imagen pues la finalidad era demostrar la funcionalidad...

Espero te ayude.
Saludos,
Yonatan Abrego

Muchas gracias Yonatan,
Yo guardaba el valor del giro en el titleList ya que lo que intento hacer es una galeria donde hay una botonera comun que permite zoom y giros de todas las fotos a la vez, lo que hace q se complique la cosa, ya que el boton de giro está fuera del itemRenderer.
He probado lo que me dices, pero la imagen gira respecto a la esquina superior izq (0,0) en vez de contra el centro de la imagen. He buscado peor no hay forma de mover el punto de registro(giro) en AS3.
Pongo aki un codigo mas extenso, por si se explica mejor que yo.

Esta es la aplicación:

Código ActionScript :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
   backgroundColor="#646464" xmlns:componentsVistas="milcomponents.componentsVistas.*">
   
   <mx:Style source="MileniumStyles.css"/>
   <mx:Script>
      <![CDATA[
         import milcomponents.componentsVistas.DisplayImage;
         
         private var nivelZoom:uint = 0;
         
         private var nivelGiro:int = 0;
         
         [Bindable] public var myXML:XML= <rs>
              <item tieneProp="0" tipo="0" estado="0" fecha="10/03/2009" titulo="Barbara Jennings" agencia="Arizona" autor="Gacia Garcia" modAdelanto="">
               <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/prueba3.png"
               height="122" width="183" giroActivo="0" giro="0"/>
            </item>   
              <item tieneProp="0" tipo="1" estado="1" fecha="10/03/2009" titulo="Dana Binn" agencia="Belen" autor="Gacia Garcia" modAdelanto="">
                 <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/prueba2.png"
                 height="136" width="183" giroActivo="0" giro="0"/>
              </item>   
              <item tieneProp="0" tipo="2" estado="2" fecha="10/03/2009" titulo="Joe Smith" agencia="Cerdeña" autor="Gacia Garcia" modAdelanto="">
                 <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/prueba1.png"
                 height="134" width="182" giroActivo="0" giro="0"/>
              </item>
              <item  tieneProp="0" tipo="3" estado="3" fecha="10/03/2009" titulo="Alice Treu" agencia="Deli" autor="Gacia Garcia" modAdelanto="">
                 <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/mileniumFONDO.PNG"
                 height="30" width="38" giroActivo="0"  giro="0"/>
              </item>
              <item  tieneProp="1" tipo="0" estado="0" fecha="10/03/2009" titulo="Barbara Jennings" agencia="Arizona" autor="Gacia Garcia" modAdelanto="">
               <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/prueba3.png"
               height="122" width="183" giroActivo="0" giro="0"/>
            </item>   
              <item  tieneProp="1" tipo="1" estado="1" fecha="10/03/2009" titulo="Dana Binn" agencia="Belen" autor="Gacia Garcia" modAdelanto="">
                 <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/prueba2.png"
                 height="136" width="183" giroActivo="0" giro="0"/>
              </item>   
              <item  tieneProp="1" tipo="2" estado="2" fecha="10/03/2009" titulo="Joe Smith" agencia="Cerdeña" autor="Gacia Garcia" modAdelanto="">
                 <detail texto="balbalabalablabalbalababalabalablabablabalbalalabalabba" ruta="assets/prueba1.png"
                 height="134" width="182" giroActivo="0" giro="0"/>
              </item>              
           </rs>;
            //show text message when user selects image
            private function showMessage(event:Event):void {
               trace("Imagen: " + event.currentTarget.selectedItem.detail.@ruta);
         }

            protected function aplicarZoom():void {
               var rate:Number = 0;
               if (nivelZoom == 0)
                  rate = 1;
               else if (nivelZoom == 1)
                  rate = 1.5;
               else if (nivelZoom == 2)
                  rate = 2.56;      
                mylist.nivelZoom = nivelZoom;
                mylist.rowHeight = 128 * mylist.arrayZoom[nivelZoom] + 21;
            mylist.columnWidth = 128 * mylist.arrayZoom[nivelZoom] + 21;
         }
         
         protected function aplicarGiro():void {
            var arrayGrados:Array = mylist.arrayRotacion;
            //Indicamos que van a girarse
            for each(var elem:XML in myXML.children()){
               elem.detail.@giroActivo = 1;
               elem.detail.@giro = arrayGrados[nivelGiro];
            }
            
            if(nivelGiro == 4){
                  nivelGiro = 0;
               }
               else if (nivelGiro == -1){
                     nivelGiro = 3;
               }
               mylist.nivelRotacion = nivelGiro;
            for each(var elem:XML in myXML.children()){
               elem.detail.@giroActivo = 1;
               elem.detail.@giro = arrayGrados[nivelGiro];
            }

         }
         
      ]]>
   </mx:Script>
   <componentsVistas:TileListGiroZoom id="mylist" width="100%" height="100%" 
      dataProvider="{myXML.children()}" arrayZoom="[1, 1.5, 2.56]" nivelZoom="0" 
      arrayRotacion="[0, 90, 180, 270]" nivelRotacion="0"
      rowHeight="149" columnWidth="149"
      paddingTop="0" paddingLeft="0" left="0" paddingBottom="0" paddingRight="0" right="0"
      backgroundColor="#646464" themeColor="haloSilver"
      itemRenderer="milcomponents.componentsVistas.DisplayImage"
      verticalScrollPolicy="auto"
      itemClick="showMessage(event)" 
      />
      
   <mx:Button label="Zoom Mas" click="{nivelZoom++; aplicarZoom();}"/>
   <mx:Button label="Zoom Menos" click="{nivelZoom--; aplicarZoom();}"/>   
    <mx:Button label="Giro Izq" click="{nivelGiro--; aplicarGiro();}"/> 
    <mx:Button label="Giro Der" click="{nivelGiro++; aplicarGiro();}"/>   
</mx:Application>

Este el itemRenderer:

Código ActionScript :

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#646464" width="100%" height="100%" 
   paddingRight="0" paddingLeft="21" paddingTop="21" paddingBottom="0" xmlns="milcomponents.*"
   implements="mx.controls.listClasses.IDropInListItemRenderer" xmlns:image="image.*">
       
   <mx:Script>
      <![CDATA[
         import mx.formatters.SwitchSymbolFormatter;
         import mx.controls.listClasses.ListData;
         import mx.controls.listClasses.BaseListData;
         import milcomponents.DynamicMovie;
         import AppData.InfoData;
         //import image.CMFoto;
      
         private var rate:Number = 1; 
         
         //Funciones de manejo de listData del que lo toma como itemRenderer
         private var _listData:BaseListData;
         public function get listData() : BaseListData
         {
            return _listData;
         }
         public function set listData( value:BaseListData ) : void
         {
            _listData = value;
         }
                     
         private function getImagenTipo(tipo:int):String
         {
            var strImg:String = "";
            
            switch(tipo)
            {
               case AppData.InfoData.NOTICIA:
                  strImg = "assets/not17.png";
                  break;
               case AppData.InfoData.TELEFOTO:
                  strImg = "assets/fot17.png";
                  break;
               case AppData.InfoData.ARTICULO:
                  strImg = "assets/artsrc.png";
                  break;
               case AppData.InfoData.ADELANTO:
                  strImg = "assets/adesrc.png";
                  break;
               case AppData.InfoData.DESPEGADO:
                  strImg = "assets/despegad.png";
                  break;
               case AppData.InfoData.MULTIMEDIA:
                  strImg = "assets/mcm.png";
                  break;
            }
            return strImg;
         }
         
         protected function tienePropiedades():Boolean{
            if (uint(data.@tieneProp) == 0)
               return false;
            else   
               return true;
         }
         
         protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
         {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            //Hacemos visibles los iconos 
            if(tienePropiedades()){
               iconos.visible = true;
               llave.visible = true;
               exp.visible = true;
               alarma.visible = true;
            }
            else{
               iconos.visible = false;
               llave.visible = false;
               exp.visible = false;
               alarma.visible = false;
            }
                          
            //Cambiamos los tamaños
            var nivelZoom:uint = TileListGiroZoom(listData.owner).nivelZoom;
            rate = TileListGiroZoom(listData.owner).arrayZoom[nivelZoom];
            switch (nivelZoom){
               case 0:
                     contenido.width = 120;
                     if (tienePropiedades())
                        contenido.height = 97;
                     else
                        contenido.height = 120;
                     //Ajustamos el nuevo tamaño de imagen
//                     contenedorImagen.scaleX = rate;
//                     contenedorImagen.scaleY = rate;   
                     break;
               case 1:
                     contenido.width = 184;
                     if (tienePropiedades())
                        contenido.height = 161;
                     else
                        contenido.height = 184;
//                     contenedorImagen.scaleX = 1.25;//rate;
//                     contenedorImagen.scaleY = 1.25;//rate;   
                     break;
               case 2:
                     contenido.width = 319;
                     if (tienePropiedades())
                        contenido.height = 294.5;
                     else
                        contenido.height = 319;
//                     contenedorImagen.scaleX = rate;
//                     contenedorImagen.scaleY = rate;   
                     break;
            }

            var giroActivo:uint = uint(data.detail.@giroActivo);

            if (giroActivo == 1){
               //aplicarGiro();
               //Lo desactivamos ya que ya se giró
               data.detail.@giroActivo = 0; 
            }
                  
         }

           private function radiansToDegrees(radians:Number):Number {
                var degrees:Number = radians * (180 / Math.PI);
                return degrees;
            }

            private function degreesToRadians(degrees:Number):Number {
                var radians:Number = degrees * (Math.PI / 180);
                return radians;
            }
         
           public function rotate ( val:Number ):void {
               if (val < 0 )
                  if ( data.detail.@giro == 0)
                     data.detail.@giro = 360;
               data.detail.@giro += val;
           }
         
         
         protected function aplicarGiro():void {
               
               var nivelGiro:uint = TileListGiroZoom(listData.owner).nivelRotacion;
               var giroAct:Number = TileListGiroZoom(listData.owner).arrayRotacion[nivelGiro];
               var giroAnt:Number = data.detail.@giro;
 
/*               var radians:Number = degreesToRadians(giroAct);
               var offsetWidth:Number = img.width / 2;
                var offsetHeight:Number = img.height / 2;
                var tempMatrix:Matrix = new Matrix;//= img.transform.matrix;
                tempMatrix.identity();
                tempMatrix.translate(-offsetWidth, -offsetHeight);
                tempMatrix.rotate(radians);
                tempMatrix.translate(+offsetWidth, +offsetHeight);

                img.transform.matrix = tempMatrix;
*/                
         }
      ]]>
   </mx:Script>
   
   <mx:Canvas width="100%" height="100%" 
        horizontalScrollPolicy="off" verticalScrollPolicy="off" 
        styleName="celdaMosaico">

      <mx:HBox id="iconos" x="0" y="0"
         paddingTop="7" paddingLeft="7" horizontalGap="5" visible="{tienePropiedades()}"
         borderStyle="none">
         <mx:Image id="llave" 
            source="@Embed(source='assets/llave.gif')" width="16" height="16"
            visible="{tienePropiedades()}"/>
         <mx:Image id="exp"  
            source="@Embed(source='assets/exp.gif')" width="16" height="16"
            visible="{tienePropiedades()}"/>
         <mx:Image id="alarma" 
            source="@Embed(source='assets/Ala.gif')" width="16" height="16"
            visible="{tienePropiedades()}"/>         
      </mx:HBox>        
      <mx:VBox id="contenido" y="{(iconos.visible)? (iconos.y + iconos.height + 2) : 2}" x="2"
            backgroundColor="#FFFFFF" cornerRadius="0"
            verticalAlign="middle" horizontalAlign="center"
              horizontalScrollPolicy="off" verticalScrollPolicy="off" 
              >
               <mx:VBox id="contenedorImagen" 
               horizontalScrollPolicy="off" verticalScrollPolicy="off" 
               paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
               borderColor="#FF0000" borderStyle="solid" borderThickness="4">
              <mx:Image id="img" maintainAspectRatio="true" rotation="{data.detail.@giro}"
                   source="{data.detail.@ruta}" 
              height="{data.detail.@height}" width="{data.detail.@width}"/>
            </mx:VBox>
      
      </mx:VBox>
      <mx:Image id="icono" right="5" bottom="3" 
      width="16" height="16" source="{getImagenTipo(data.@tipo)}"/>          
    </mx:Canvas> 
</mx:VBox>

Y aki el TileList modificado que guarda el zoom que tienen actualmente las imagenes y el giro de las mismas. En ambos casos para que la clase se pueda usar con cualquier grado de zoom y giro, se tienen arrayZoom y arrayGiro que almacena los valores de zoom y giro posibles en orden ascendente. Asi se guarda y modifica los atributos nivelZoom y nivelGiro.

Código ActionScript :

package milcomponents.componentsVistas
{
   import mx.controls.TileList;

   public class TileListGiroZoom extends TileList
   {      
      private var _nivelZoom:uint = 0;
      
      public function set nivelZoom (nivel :uint):void{
         _nivelZoom = nivel;
      }
      
      public function get nivelZoom ():uint{
          return _nivelZoom;
      }
      
      private var _arrayZoom:Array = null;
      
      public function set arrayZoom (newArray :Array):void{
         _arrayZoom = newArray;
      }
      
      public function get arrayZoom ():Array{
          return _arrayZoom;
      }
      
      private var _nivelRotacion:uint = 0;
      
      public function set nivelRotacion (nivelRotacion :uint):void{
         _nivelRotacion = nivelRotacion;
      }
      
      public function get nivelRotacion ():uint{
          return _nivelRotacion;
      }
            
      private var _arrayRotacion:Array = null;
      
      public function set arrayRotacion (newArray :Array):void{
         _arrayRotacion = newArray;
      }
      
      public function get arrayRotacion ():Array{
          return _arrayRotacion;
      }
      
      public function TileListGiroZoom()
      {
         super();
      }
   }
}

Muchisimas gracias!! Estoy con manejandome con Flex pero aún a veces se me traba;)
Gracias

Disculpa que no te contestara antes, no reviso mi correo tan seguido
La verdad no revise tu codigo, solo adapte el que puse, es un cambio muy rapido.
De acuerdo al codigo que te puse en el rotationRender

cambia la imagen por esto

Código :

<mx:Image source="assets/MrBomb.png" rotation="{data.rotation}" />

Código :

<assets:ImageContainer id="imgContainer" rotation="{data.rotation}"/>

y ahora creemos el ImageContainer

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" clipContent="false">
   <mx:Image id="myImg" source="assets/MrBomb.png" x="{-myImg.width/2}" y="{-myImg.height/2}" />
</mx:Canvas>

como veras lo unico que hice fue mover la imagen para el canvas, le puse al canvas clipContent en false, para que no corte la imagen
y en la imagen pongo su x y su y a menos la mitad de su longitud y menos la mitad de su altura *esto la centra en el canvas)

y seguimos rotando el canvas como te lo habia mostrado, con estos cambios veras que la imagen gira sobre su centro.


Espero te sirva,
Saludos

Typo, lo que quise decir fue
cambia esto

Código :

<mx:Image source="assets/MrBomb.png" rotation="{data.rotation}" />

por esto

Código :

<assets:ImageContainer id="imgContainer" rotation="{data.rotation}"/>

en el componente del rotationRender, de mi primer post.

...umh, lastima que no tienen boton de edit para que no tuviera que postear de nuevo

Oh y otro post mas para la posteridad.

Ya que la imagen gira sobre si misma, y no quieres los botones de giro en el itemRender (es poco practico de todas formas y hace mas pesada la carga de una galeria)

sacaremos los botones y la funcion del render y los movemos a la aplicacion principal.
El codigo de RotateImage queda asi ahora.

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="loadInfo()" xmlns:local="*">
   <mx:Script>
      <![CDATA[
         import mx.collections.ArrayCollection;
         [Bindable] public var imgList:ArrayCollection;
         public function loadInfo ():void {
            imgList = new ArrayCollection();
            for ( var i:int = 0; i < 10; i++) 
               imgList.addItem(generateData(i));
         }
         
         public function generateData (i:int) : ImageDTO {
            var tmp:ImageDTO = new ImageDTO();
            tmp.rotation = 0;
            return tmp;
         }
         
         public function rotate ( val:Number ):void {
            if(meh.selectedItem != null) {
               if (val < 0 )
                  if ( meh.selectedItem.rotation == 0)
                     meh.selectedItem.rotation = 360;
               meh.selectedItem.rotation += val;
            }
         }
      ]]>
   </mx:Script>
   <mx:VBox width="50%" height="20%">
      <mx:TileList id="meh" width="50%" height="100%" dataProvider="{imgList}" itemRenderer="rotationRender" columnCount="4" columnWidth="150" rowCount="2" rowHeight="100" themeColor="haloSilver" verticalScrollPolicy="on"/>
      <mx:Button label="+90°" click="rotate(90)"/>
      <mx:Button label="-90°" click="rotate(-90)"/>
   </mx:VBox>
</mx:Application>

Como veras para hacer el manejo de la rotacion sigo llamando a la misma funcion, solo que como ahora esta afuera del render, hago referencia al selectedItem del tileList, esta funcion puede ser adaptada si deseas que se puedan seleccionar multiples imagenes y todas se roten a la vez.

El rotationRender se queda asi ahora

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
   horizontalAlign="center"
        verticalAlign="middle" xmlns:local="*">
   <local:ImageContainer id="imgContainer" rotation="{data.rotation}"/>
</mx:HBox>

y finalmente el ImageContainer queda

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" clipContent="false" rotation="{data.rotation}">
   <mx:Image id="myImg" source="assets/MrBomb.png" x="{-myImg.width/2}" y="{-myImg.height/2}" />
</mx:Canvas>

Es solo un ejemplo, realmente no es muy bueno que tengas Tantos contenedores en un itemRender xk hace mas lenta la carga. probablemente se debe remover el render y llamar directamente al ImageContainer con algunas adaptaciones en sus coordenadas para que este centrada la imagen.

Pero espero que los ejemplos aclaren tus dudas, de nuevo lo hice sobre el codigo ejemplo xk creo que es mas sencillo de comprender sin logica especifica y te permitira a ti como a otros adaptarlo a sus necesidades mas facilmente.

Saludos

Ultimo post, en serio se necesita poder editar los posts ..o k revise bien lo que escribo, jajajaja

en el ImageContainer el canvas no debe tener rotation, o girara dos veces la imagen (xk ya esta siendo girada en el rotationRender)

Sin embargo si llamaras directo al ImageContainer, si lo deberia de llevar. (y podrias borrar el rotationRender, xk ya no se necesitaria)
...hay esta gente que no se fija lo que escribe...

Hola, Muchas gracias por tu ayuda. Al final llegue a la misma conclusion y me monté el canvas y tal, ya funciona todo ok. Gracias