CreateJS中填充+描边透明度异常问题求助

问题原因 #

你遇到的分层效果，本质是容器alpha会作用于每个子元素：下层的宽描边文本和上层的填充文本各自被应用了0.5的透明度，叠加区域的透明度会叠加（总透明度≈0.75），导致视觉上出现深浅分层，而非统一的半黑色粗体。

解决方案 #

方案1：缓存容器为位图（推荐） #

将组合后的文本容器缓存为位图，再设置透明度，这样整个文本会被当作一个整体处理，避免子元素透明度叠加：

// 创建阴影用的容器
const shadowContainer = new createjs.Container();

// 添加下层宽描边文本
const strokeText = new createjs.Text("你的文本内容", "字体样式", "#000");
strokeText.outline = 8; // 两倍描边宽度
shadowContainer.addChild(strokeText);

// 添加上层填充文本
const fillText = new createjs.Text("你的文本内容", "字体样式", "#000");
shadowContainer.addChild(fillText);

// 缓存容器（需根据文本尺寸调整缓存范围，避免裁切）
const bounds = strokeText.getBounds();
shadowContainer.cache(
  bounds.x - strokeText.outline/2,
  bounds.y - strokeText.outline/2,
  bounds.width + strokeText.outline,
  bounds.height + strokeText.outline
);

// 设置统一透明度
shadowContainer.alpha = 0.5;

// 添加到舞台
stage.addChild(shadowContainer);

方案2：直接使用半透明颜色替代容器alpha #

不给容器设置alpha，而是将阴影文本的填充和描边颜色直接设为半透明黑色，这样两个子元素的颜色本身就是统一的半透明，不会出现叠加分层：

// 创建阴影用的容器
const shadowContainer = new createjs.Container();

// 下层宽描边文本：颜色用rgba半透明
const strokeText = new createjs.Text("你的文本内容", "字体样式", "rgba(0,0,0,0.5)");
strokeText.outline = 8;
shadowContainer.addChild(strokeText);

// 上层填充文本：同样用rgba半透明
const fillText = new createjs.Text("你的文本内容", "字体样式", "rgba(0,0,0,0.5)");
shadowContainer.addChild(fillText);

// 无需设置alpha，直接添加到舞台
stage.addChild(shadowContainer);

额外提示 #

如果需要调整阴影的偏移量，只需给shadowContainer设置x和y属性即可，不影响透明度效果。

内容的提问来源于stack exchange，提问作者GeorgePorge