Как написать собственный компонент для автоматического переноса и изменения размера текста (во Flex)?

Question

Мне известно свойство textAlign компонента Text. Но это не делает то, что я пытаюсь достичь:

У меня есть текстовый компонент размером 500x100 (размер не меняется). Размер шрифта по умолчанию составляет 80 пикселей. Текст, однако, постоянно меняется. Я хочу изменить размер текста, чтобы он поместился внутри текстового поля.

Допустим, текст изменен на: «Быстрая коричневая лиса перепрыгнула через ленивую собаку». Это не поместится внутри текстового поля, потому что размер шрифта слишком велик. Так как же можно уменьшить размер текста, чтобы все подходило и ничего не переходило на следующую строку?

Answer 1

Вот, пожалуйста (прямо из Adobe):

Учитывая ширину в пикселях и максимальное количество отображаемых строк, HeadlineTextField изменяет размер шрифта, чтобы текст помещался в поле. Если текст короткий, размер шрифта будет очень большим, создавая заголовок в стиле таблоида. Если текст длинный, размер шрифта, конечно, будет меньше.

Метод HeadlineTextField.fitText (), показанный ниже, выполняет работу по определению размера шрифта:

public function fitText(msg:String, maxLines:uint = 1, toUpper:Boolean = false, targetWidth:Number = -1):uint
{
    this.text = toUpper ? msg.toUpperCase() : msg;

    if (targetWidth == -1)
    {
        targetWidth = this.width;
    }

    var pixelsPerChar:Number = targetWidth / msg.length;

    var pointSize:Number = Math.min(MAX_POINT_SIZE, Math.round(pixelsPerChar * 1.8 * maxLines));

    if (pointSize < 6)
    {
        // the point size is too small
        return pointSize;
    }

    this.changeSize(pointSize);

    if (this.numLines > maxLines)
    {
        return shrinkText(--pointSize, maxLines);
    }
    else
    {
        return growText(pointSize, maxLines);
    }
}

public function growText(pointSize:Number, maxLines:uint = 1):Number
{
    if (pointSize >= MAX_POINT_SIZE)
    {
        return pointSize;
    }

    this.changeSize(pointSize + 1);

    if (this.numLines > maxLines)
    {
        // set it back to the last size
        this.changeSize(pointSize);
        return pointSize;
    }
    else
    {
        return growText(pointSize + 1, maxLines);
    }
}

public function shrinkText(pointSize:Number, maxLines:uint=1):Number
{
    if (pointSize <= MIN_POINT_SIZE)
    {
        return pointSize;
    }

    this.changeSize(pointSize);

    if (this.numLines > maxLines)
    {
        return shrinkText(pointSize - 1, maxLines);
    }
    else
    {
        return pointSize;
    }
}