Question

我知道Text组件的textAlign属性。但它没有做我想要实现的目标：

我有一个500x100的Text组件（大小不会改变）。默认字体大小为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;
    }
}

如何编写自定义组件来自动换行和调整文本大小（在Flex中）？

1 个答案: