drawing API on Flex 4 stage?

Question

Hello all,

I'm currently trying to debug a problem in Flex 4, in where a component is firing a custom event with its local coordinates translated to global coordinates (i.e. localToGlobal) and another component (in a separate "branch" of the display list hierarchy) recieves such event and uses it as a part of an animation, via globalToLocal. It should be a simple, coordinate-transformation system but it is not working.

I'm trying to debug this, by using AS3's drawing API to draw circles where the Points should be.

Here is the dispatching component (Component A in the image below):

// Check where is the local x,y
this.graphics.beginFill(0x0000FF);
this.graphics.drawCircle(this.x,this.y, 10);

// Draw another circle in the "global" coordinates.
// pGC = Point in Global Coordinates.
var p: Point = new Point ( this.x, this.y);
var pGC:Point = Application(FlexGlobals.topLevelApplication).globalToLocal(p);
Application(FlexGlobals.topLevelApplication).graphics.beginFill( 0xFF0000)
Application(FlexGlobals.topLevelApplication).graphics.drawCircle(pGC.x,pGC.y,50);

// Dispatch the event
dispatchEvent( new ComponentLocationEvent( this.localToGlobal(this.x,this.y) );

Here is the "listening" component (component B in the image below):

private var value_x:int;
private var value_y:int;

private function onComponentLocationData( pointInGlobalCoordinates:Point):void
{
  var pointLocalCoord:Point = this.childContainer.globalToContent( 
          pointInGlobalCoordinates);
  this.value_x = pointLocalCoord.x;
  this.value_y = pointLocalCoord.y;

  // More debugging circles
  this.graphics.beginFill(0x00FF00, 0.5);
  this.graphics.drawCircle(pointLocalCoord.x,pointLocalCoord.y);
}

One would expect the three circles (Red, Green and Blue) to correspond, each being drawn just before the event dispatch and one (green) on event listening. What actually happens is:

• Blue circle is drawn where you would expect it.
• Red circle is never drawn (hence, my question on drawing on the stage in Flex 4)
• Green circle is drawn in an un-expected place.

Does anyone has any clue on what could I try here? This was my approach to debug this error, feel free to point out what I am doing wrong.

EDIT: Here is an image that explains the relationship between components and where are the dots being drawn:

Answer 1

First, are you shure blue circle is drawn where it is expected?

I assume that your first portion of code is ComponentA's code.

this.x and this.y are controls coordinates relative to it's parent.

Reffering your illustration blue circle should be somwhere else, but not at the top left corner of the component as you drawing in component's local graphics object. I've created custom component and tested this. You can try it by yourself. Position of circle within a component depends on components location within it's container.

package components
{
    import mx.controls.Button;
    public class ComponentA extends Button
    {
        public function ComponentA()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            this.graphics.beginFill(0x0000FF);
            this.graphics.drawCircle(this.x,this.y, 10);
        }
    }
}

Second, var pGC:Point = Application(FlexGlobals.topLevelApplication).globalToLocal(p); should have no effect in translating coordinates (I didn't test it but it should be so) Otherwise what are global coordinates if not application level coordinates...

And in listener code what is childContainer you are using to translate coordinates?