Question

I am creating a guitar tab display application in Flex and I need to display labels on top of horizontal lines.

I am creating the horizontal lines using the following code:

var s:UIComponent=new UIComponent();
    for(var i:int=0; i<6; i++) {
        var y:Number=getStringY(i);
        with (s.graphics) {
            //beginFill(0xB7B7B7);
            moveTo(15, y);
            lineStyle(1, 0xB7B7B7);
            lineTo(this.width - 15, y);
            //endFill();
        }
    }
this.addChild(s);

And then adding labels using

var l:Label=new Label();
l.x=xPos;
l.y=yPos;
l.text=labelText;
this.addChild(l);

However, the result I get is this (http://imageshack.us/photo/my-images/607/stackoverflow.png)
Notice the lower 4 is overlapped by the line we drew earlier.
This is causing readability issues, anyone know of a workaround?

Thanks,
Pranav

Answer 1

Try to use:

var s:UIComponent=new UIComponent();
    for(var i:int=0; i<6; i++) {
        var y:Number=getStringY(i);
        with (s.graphics) {
            //beginFill(0xB7B7B7);
            moveTo(15, y);
            lineStyle(1, 0xB7B7B7);
            lineTo(this.width - 15, y);
            //endFill();
        }
    }
this.addChildAt(s, 0);