Flex 3 - Diagonal Text in einer Form zeichnen und die Größe anpassen

Question

Ich versuche, die folgende Komponente zu erstellen:

Nur für Informationen enthält der Leerzeichen eine Textsteuerung, und ich erstellen eine Komponente, die die schwarze Ecke mit dem (i) -Symbol und dem Text "Promotion" darstellt.
Der Teil, mit dem ich Probleme habe, ist diese Komponente, die die schwarze Ecke mit dem diagonalen Text darstellt. Der Text muss 2 Zeilen halten können. Und die schwarze Ecke muss in der Lage sein, sich an die Größe des Textes anpassen zu können. Darüber hinaus hat der Text eine Rotation ...

Ich habe Zweifel, wie man das macht:

.
• Soll ich für jede Textzeile unterschiedliche Steuerelemente haben?
• Wenn ich den Text in der Form zeichnen sollte (nach der Rotation) oder sollte ich nur beide Komponenten überlappen? [Wenn ich darüber spreche, den Text in der Form zu zeichnen, meine ich auf dieselbe Weise wie in diese Frage]
• Gibt es eine Möglichkeit, die richtige Größe der Dreiecksform zu erhalten, ohne einige extravagante Berechnungen zu machen?

  und ... haben Sie "einfachere" Möglichkeiten, dies zu tun?

  Ein großer Dank für jede Hilfe, die Sie bieten können :) Ich bin ein bisschen mit dieser kleinen Komponente verloren :)

  grüße.
  BS_C3

  ---

  edit 1:

  .
  • Das Dreieck kann 2 Größen haben: 1 Größe, die 1 Zeile passen, und eine andere Größe, um 2 Textzeilen anzupassen.
  • Der Text wird als einzelne Zeichenfolge gesendet, sodass sie bei Bedarf automatisch in zwei Zeilen geteilt werden muss
  • Ich dachte an, Grafiken zu verwenden, um die Dreieck-Form zu zeichnen, und verwenden Sie dann eine Maske, um die abgerundete Ecke zu erstellen -> Dies liegt daran, dass dieselbe Komponente an anderen Orten der Anwendung ohne die abgerundete Ecke verwendet wird

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.