Flex 3 - по диагонали рисовать текст в форме и отрегулировать размер

Question

Я пытаюсь создать следующий компонент:

Просто для информации, пустое место будет содержать текстовый элемент управления, и я создаю компонент, который представляет черный угол с значком (i) и текстом «продвижения».


Часть у меня проблемы с этим компонентом, представляющим черный угол с диагональным текстом. Текст должен быть в состоянии удерживать 2 строки. И черный угол должен быть в состоянии приспособиться к размеру текста. Более того, у текста есть вращение ...

У меня есть некоторые сомнения, как это сделать:

.
• У меня есть разные элементы управления для каждой текстовой линии?
• я должен нарисовать текст в форме (после того, как выполнять вращение) или я должен просто перекрывать оба компонента? [Когда я говорю о рисовании текста в форме, я имею в виду таким же образом, как спросил в это вопрос ]
• Есть ли способ получить правильный размер формы треугольника, не делая некоторые экстравагантные расчеты?

  и ... У вас есть какие-либо «проще» способы сделать это?

  Большое спасибо за любую помощь, которую вы можете предоставить :) Я немного потерян с этим маленьким компонентом :)

  С уважением.
  Bs_c3

  ---

  Редактировать 1:

  .
  • Треугольник может иметь 2 размера: 1 размер, который будет соответствовать 1 строке, а другой размер, чтобы соответствовать 2 строкам текста.
  • текст будет отправлен в виде одной строки, поэтому его придется автоматически разделены на две строки, если это необходимо
  • Я думал, что используя графику, чтобы нарисовать форму треугольника, а затем использовать маску для создания закругленного угла -> это потому, что тот же компонент будет использоваться в других местах приложения без закругленного угла

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.