How can i give a depth to an object created from graphics?

I am drawing some l开发者_C百科ines in my program using graphics.lineTo(xx, yy);

The program has a background image over which these lines are drawn. The problem which I am facing is that the image overshadows the lines and the lines are not visible to the user.

Since these lines do not have an id, I am not sure as to how I can assign a depth to them?

Any input/suggestions will help?

I don't know about your code in particular but I'll try to point a direction. The best way for that is to place components in your application with particular orger like the following:

<s:Group>
    <s:BitmapImage />
    <MyCustomComponent />
</s:Group>

Where MyCustomComponent is something like the following:

public class MyCustomComponent extends UIComponent
{
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        // Your drawings here: graphics.lineTo(xx, yy);
    }
}

So now your drawings will be on a higher level than image.

The z-index is set in the display list If you want to bring something to the top of the display list just addChild again For example

// this will place the BG on top of the myLinesSprite object
var container:Sprite = new Sprite( );
container.addChild( myLinesSprite );
container.addChild( myBGimage );

// now do another addchild
var container:Sprite = new Sprite( );
container.addChild( myLinesSprite );
container.addChild( myBGimage );
container.addChild( myLinesSprite ); // updates displayList does not add twice


// of course if you build it correctly the first time you wont have a worry
var container:Sprite = new Sprite( );
container.addChild( myBGimage );
container.addChild( myLinesSprite );