Flex 3 - desenhar diagonalmente texto em forma e ajuste o tamanho

Question

Estou tentando criar o seguinte componente:

Apenas para obter informações, o espaço em branco conterá um controle de texto e estou criando um componente que represente o canto preto com o ícone (i) e o texto "Promoção".
A parte que estou tendo problemas é este componente representando o canto preto com o texto diagonal. O texto tem que ser capaz de realizar 2 linhas. E o canto preto tem que ser capaz de se ajustar ao tamanho do texto. Além do mais, o texto tem uma rotação ...

Estou tendo algumas dúvidas sobre como fazer isso:

• devo ter controles diferentes para cada linha de texto?
• devo desenhar o texto na forma (depois de fazer a rotação) ou devo apenas sobrepor ambos os componentes? [Quando falo sobre desenhar o texto na forma, quero dizer da mesma maneira que perguntou em Esta pergunta ]
• Existe alguma maneira de obter o tamanho adequado da forma do triângulo sem fazer alguns cálculos extravagantes?

  e ... você tem alguma maneira "mais fácil" de fazer isso?

  Um grande obrigado por qualquer ajuda que você pode fornecer :) Estou um pouco perdido com este pequeno componente :)

  Cumprimentos.
  Bs_c3

  ---

  editar 1:

  • O triângulo pode ter 2 tamanhos: 1 tamanho que vai caber 1 linha, e outro tamanho para caber 2 linhas de texto.
  • O texto será enviado como uma única string, então ele terá que ser dividido automaticamente em duas linhas, se necessário,
  • Eu estava pensando em usar gráficos para desenhar a forma do triângulo e, em seguida, usar uma máscara para criar o canto arredondado -> Isso ocorre porque o mesmo componente será usado em outros locais do aplicativo sem o canto arredondado

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.