如何重写CreateJS Container子元素的alpha（透明度）设置？

CreateJS中，容器的alpha属性会作用于其所有子元素的最终渲染结果，子元素的显示透明度为自身alpha × 容器alpha。要重写子元素的alpha行为，可通过以下几种方式实现：

方案一：手动抵消容器alpha的影响 #

如果希望特定子元素不受容器alpha的叠加影响，可以通过计算将子元素的alpha值设置为「目标透明度 ÷ 容器alpha」，抵消容器的alpha作用。

示例代码：

var content = new createjs.Container();
content.addChild(bkground, foreground);
content.alpha = 0.5;

// 让前景元素保持完全不透明（不受容器0.5 alpha的影响）
foreground.alpha = 1 / content.alpha; // 计算得2，最终显示透明度为2×0.5=1

// 如果前景需要半透明（比如目标透明度0.8）
// foreground.alpha = 0.8 / content.alpha; // 计算得1.6，最终显示0.8

注意：CreateJS允许alpha值超过1，渲染时会正确计算最终透明度，不会被截断为1。

方案二：拆分容器分离元素 #

更直观的方式是将需要不同alpha规则的元素拆分到独立容器中，仅对目标容器设置alpha，避免元素间的alpha影响。

示例代码：

// 背景容器：单独设置alpha
var bgContainer = new createjs.Container();
bgContainer.addChild(bkground);
bgContainer.alpha = 0.5;

// 前景容器：不设置alpha，保持原透明度
var fgContainer = new createjs.Container();
fgContainer.addChild(foreground);

// 将两个容器添加到舞台
stage.addChild(bgContainer, fgContainer);

方案三：自定义Container重写alpha渲染逻辑（进阶） #

如果需要全局或特定容器忽略alpha对子元素的影响，可以重写Container的_draw方法，自定义渲染时的alpha传递逻辑。

示例：创建忽略自身alpha的自定义容器

// 自定义Container类
var CustomContainer = function() {
  createjs.Container.call(this);
};
CustomContainer.prototype = Object.create(createjs.Container.prototype);
CustomContainer.prototype.constructor = CustomContainer;

// 重写_draw方法，跳过容器alpha对子元素的影响
CustomContainer.prototype._draw = function(ctx, ignoreCache) {
  if (this.DisplayObject__draw(ctx, ignoreCache)) { return; }
  
  var childCount = this.numChildren;
  // 保存上下文原有的alpha状态
  var originalAlpha = ctx.globalAlpha;
  
  // 重置上下文alpha为原始值，忽略容器自身的alpha设置
  ctx.globalAlpha = originalAlpha;
  
  // 绘制所有子元素
  for (var i = 0; i < childCount; i++) {
    this.getChildAt(i).draw(ctx, ignoreCache);
  }
  
  // 恢复上下文alpha状态
  ctx.globalAlpha = originalAlpha;
};

// 使用自定义容器
var content = new CustomContainer();
content.addChild(bkground, foreground);
content.alpha = 0.5; // 此设置不会影响子元素的透明度

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