Foros del web, para los que viven de bits

He estado probando flex y creo que es un buen producto, sin embargo me he encontrado con un problema. Cuando hago un dibujo vectorial, por ejemplo una línea o un círculo, si el dibujo es muy grande o le hago un zoom, se sale del contenedor y se dibuja arriba de otros controles. He estado buscando en la red pero no he encontrado información sobre este problema, lo que me lleva a pensar que estoy haciendo algo mal. He aqui un ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
xmlns:gr="pru.gr.*"
layout="absolute" creationComplete="initApp()">

<mx:Script>
<![CDATA[
import pru.gr.*;

public var fig:SSprite = new SSprite();;

public function initApp():void {

myCanvas.init();
myCanvas.addChild(fig);

}
]]>
</mx:Script>

<mx:HDividedBox x="10" y="10" width="678" height="427">
<mx:Panel width="193" height="426" layout="absolute">
<mx:Button x="19" y="21" label="Button" width="144"/>
</mx:Panel>
<gr:SCanvas width="200" height="426" id="myCanvas">
</gr:SCanvas>
</mx:HDividedBox>

</mx:Application>

************************************************** **
package pru.gr
{
import mx.core.UIComponent;
import flash.text.*;
import flash.geom.Matrix;

public class SCanvas extends UIComponent
{

public function SCanvas()
{
super();
}

public function init():void {
drawBounds();
}

public function drawBounds():void {
this.graphics.clear();

this.graphics.lineStyle(1.0, 0x000000, 1.0);
this.graphics.beginFill(0x808080, 1.0);
this.graphics.drawRect(0, 0, this.width, this.height);
this.graphics.endFill();
}
}
}
************************************************** **
package pru.gr
{
import flash.display.Sprite;

public class SSprite extends Sprite
{
public function SSprite()
{
super();

this.graphics.lineStyle(1.0, 0x000000, 1.0);
this.graphics.moveTo(-100, 50); // aquí hago la línea
this.graphics.lineTo(100, 100);
}
}
}
************************************************** **
La figura que dibujo, es una simple línea que se dibuja en un Sprite (fig) y luego se agrega a myCanvas (derivado de UIComponent).
Al lado izquierdo hay un panel con un botón y al lado derecho "myCanvas". La línea se dibuja sobre el botón y el panel. Se sale del sprite y se sale de myCanvas.

Si alguien me puede ayudar, se lo agradesco de antemano.
Saludos a todos.

He descubierto algo.

1.- El objeto que se inserta a "Canvas", debe derivarse de UIComponent.
2.- El objeto debe tener ancho y alto (width/height).
3.- No se debe dibujar fuera de estos límites.

ejemplo:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()">

<mx:Script>
<![CDATA[

public var myObj:MObj;

public function initApp():void {
myObj = new MObj();
myObj.width = 200;
myObj.height = 200;
myObj.draw();

myCanvas.addChild(myObj);
}

public function movX():void {
myObj.x = sX.value;
}

]]>
</mx:Script>

<mx:Panel x="10" y="10" width="206" height="427" layout="absolute">
<mx:HSlider x="10" y="79" width="166" id="sX"
minimum="0" maximum="300" snapInterval="1" change="movX()"/>
</mx:Panel>
<mx:Canvas x="224" y="10" width="454" height="427" id="myCanvas" backgroundColor="#d5fffd">
</mx:Canvas>

</mx:Application>
************************************************** ***********
package
{
import mx.core.UIComponent;

public class MObj extends UIComponent
{
public function MObj() {
super();
}

public function draw():void {
this.graphics.clear();
this.graphics.lineStyle(2.0, 0xFF0000, 1.0);
this.graphics.drawRect(0, 0, this.width-1, this.height-1);
}
}
}

sabgto, no tiene nada que ver, un consejo nada mas, evita la palabra clave "this", no tiene sentido usarla en estos casos, dentro de una classe es inutil y fuerza al runtime a comprobar "this".
en el unico lugar donde tiene sentido es:

como la propiedad de la classe se llama igual al parametro de la funccion se necesita la palabra "this" para hacer la referencia al objeto en cuestion.

espero que sea de ayuda. saludos.