Flex 3 - нарисуйте текст по диагонали и отрегулируйте размер - PullRequest
Новая
       24

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

1 голос
/ 30 марта 2011

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

enter image description here

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

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

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

И ... есть ли у вас "более простые" способы сделать это?

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

Привет.
BS_C3

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

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

Ответы [ 2 ]

0 голосов
/ 06 апреля 2011

Ну, я наконец написал класс, и вот результат: 

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));
    }

    ...

}
0 голосов
/ 31 марта 2011

Flex достаточно хорош для обновления групповых компонентов до любого размера, который становится их содержимым, динамическое обновление на лету.

, как вы предлагаете, я бы, вероятно, создал группу "Продвижение" в углу, какпрямоугольник, поверните его и поместите его в угол, как вы хотите, затем, используя копию скругленного прямоугольника, который вы используете в качестве фона компонента maing, я бы сделал маску, чтобы вырезать компонент «Promotion», чтобы вы не виделиперекрытие.

...