如何在AS3中根据动态文本宽度制作动态下三分之一字幕条

以下代码可直接复用，参数可根据你的大屏设计需求调整：

// 配置参数：左右总边距，可按需修改数值
const HORIZONTAL_PADDING:int = 30;
// 背景高度参数，可按需修改
const BG_HEIGHT:int = 52;
// 背景圆角参数，不需要圆角设为0即可
const BG_RADIUS:int = 8;

// 动态创建背景形状，如果你舞台上已有现成背景实例，直接替换下面的实例定义即可
var bgShape:Shape = new Shape();
// 放到文本层最下方
addChildAt(bgShape, 0);
// 可按需调整背景的初始坐标
bgShape.x = 100;
bgShape.y = 100;

// 给两个动态文本绑定内容变更监听，适配InputField输入更新的场景
name.addEventListener(Event.CHANGE, adjustBgSize);
title.addEventListener(Event.CHANGE, adjustBgSize);
// 初始化时执行一次适配
adjustBgSize();

// 核心适配方法
function adjustBgSize(e:Event = null):void {
    // 计算文本最大宽度：取姓名、职称两个文本的实际宽度最大值
    // 如果你需要给两个文本做独立背景，拆分计算逻辑分别处理即可
    var maxTextWidth:Number = Math.max(name.textWidth, title.textWidth);
    // 最终背景宽度 = 文本最大宽度 + 左右边距
    var targetBgWidth:Number = maxTextWidth + HORIZONTAL_PADDING;

    // 重绘背景
    bgShape.graphics.clear();
    // 第一个参数是背景色，第二个是透明度，按需修改
    bgShape.graphics.beginFill(0x000000, 0.75);
    bgShape.graphics.drawRoundRect(0, 0, targetBgWidth, BG_HEIGHT, BG_RADIUS);
    bgShape.graphics.endFill();

    // 调整文本位置，保证在背景内水平居中对齐
    name.x = bgShape.x + HORIZONTAL_PADDING / 2;
    // 职称的y坐标可按需调整，这里默认放在姓名下方10px位置
    title.x = bgShape.x + HORIZONTAL_PADDING / 2;
    title.y = name.y + name.textHeight + 10;

    // 若需要背景作为遮罩，限制文本不超出背景范围，放开下面的代码即可
    /*
    var bgMask:Shape = new Shape();
    bgMask.graphics.beginFill(0xFFFFFF);
    bgMask.graphics.drawRect(bgShape.x, bgShape.y, targetBgWidth, BG_HEIGHT);
    bgMask.graphics.endFill();
    name.mask = bgMask;
    title.mask = bgMask;
    addChild(bgMask);
    */
}

注意事项 #

• 需提前给name和title两个动态文本设置autoSize = TextFieldAutoSize.LEFT（如果是右对齐就设为RIGHT），保证文本字段宽度会随内容自动撑开。
• 建议嵌入使用的字体，避免系统无对应字体时textWidth计算出现偏差。
• 如果InputField输入完成后未自动触发适配，可在输入完成的回调逻辑中手动调用adjustBgSize()。
• 大屏有窗口缩放需求的话，可给stage绑定Event.RESIZE事件，触发时调用adjustBgSize()即可。

内容的提问来源于stack exchange，提问作者Dennis Birkebøg