Flex 3 - Diagonally draw text in a shape and adjust size

Question

I'm trying to create the following component:

Just for information, the blank space will contain a text control, and I'm creating a component that represents the black corner with the (i) icon and the "promotion" text.
The part I'm having issues with is this component representing the black corner with the diagonal text. The text has to be able to hold 2 lines. And the black corner has to be able to adjust to the text's size. What's more, the text has a rotation...

I'm having some doubts on how to do this:

• Should I have different controls for each text line?
• Should I draw the text in the shape (after doing the rotation) or should I just overlap both components? [When I talk about drawing the text in the shape, I mean in the same way as asked in this question]
• Is there any way to get the proper size of the triangle shape without doing some extravagant calculations?

And... do you have any "easier" ways to do this ?

A big thanks for any help you can provide :) I'm a little bit lost with this little component :)

Regards.
BS_C3

---

Edit 1:

• The triangle may have 2 sizes: 1 size that will fit 1 line, and another size to fit 2 lines of text.
• The text will be sent as a single string, so it will have to be automatically divided in two lines if needed
• I was thinking of using graphics to draw the triangle shape and then use a mask to create the rounded corner --> This is because the same component will be used in other places of the application without the rounded corner

Answer 1

Well, I finally wrote the class and this is the result:

public class Corner extends Canvas
{
    private var infoIcon:Image;
    private var text:Text;
    private var triangle:Shape;
    private var bgColor:uint;

    public function Corner()
    {
        super();

        infoIcon = new Image;

        text = new Text;
        text.rotation = -45;
        text.width = 75;
        text.maxHeight = 30;
        text.setStyle('color', '0xffffff');
        text.setStyle('textAlign', 'center');
        text.y = 53;

        this.addChild(infoIcon);
        this.addChild(text);

        triangle = new Shape;
    }

    public function build(bgColor:uint = 0x61113D):void{
        this.bgColor = bgColor;

        // info icon data

        // set text     
        text.addEventListener(FlexEvent.UPDATE_COMPLETE, textHandler);
        text.text = 'blabla';
        text.validateNow();
    }

    /**
     * 
     */
    private function textHandler(e:FlexEvent):void{
        switch(e.type){
            case FlexEvent.UPDATE_COMPLETE:
                text.removeEventListener(FlexEvent.UPDATE_COMPLETE, textHandler);
                drawTriangle();
                break;
        }
    }

    /**
     * 
     */
    private function drawTriangle():void{
        var h:int = 80;
        // check if the text has 1 or 2 lines
        if(text.height > 20)
            h = 95;

        // remove the triangle shape if it exists
        if(this.rawChildren.contains(triangle))
            this.rawChildren.removeChild(triangle);

        // draw triangle
        triangle = new Shape; 
        triangle.graphics.moveTo(0, 0);
        triangle.graphics.beginFill(bgColor);
        triangle.graphics.lineTo(h, 0);
        triangle.graphics.lineTo(0, h);
        triangle.graphics.lineTo(0, 0);
        triangle.graphics.endFill();

        this.rawChildren.addChildAt(triangle,0);

        dispatchEvent(new MyEvent(MyEvent.CORNER_UPDATED));
    }

    ...

}

Answer 2

Flex is pretty good at updating group components to whatever size thier contents become, updating dynamically on the fly..

for what your suggesting, I'd probably create the "Promotion" group in the corner as a rectangle, rotate it and fit it to the corner like you want, then using a copy of the rounded rect you use as the maing component background, i'd make a mask to cut the "Promotion" component so you don't see the overlap.