CreateJS中如何将包含两个形状的符号实例用作另一元件的遮罩

核心实现步骤 #

• 首先实例化符号S1得到实例mc1，注意实例化时要使用你导出的资源库对象（一般默认名为lib），代码如下：
  const mc1 = new lib.S1();
• 必须将mc1添加到舞台的显示列表中，CreateJS规定遮罩对象必须属于舞台显示树，否则遮罩不会生效：
  stage.addChild(mc1);
• 直接给目标实例mc的mask属性赋值为mc1即可完成遮罩绑定：
  mc.mask = mc1;
• 如果你只需要使用S1内部的单个形状做遮罩，直接调取mc1内部的子形状赋值即可：
  仅用sh0做遮罩：mc.mask = mc1.sh0;
  仅用sh1做遮罩：mc.mask = mc1.sh1;
• 最后刷新舞台让修改生效：
  stage.update();

注意事项 #

如果需要让mc的交互事件仅在遮罩区域触发，需要额外给mc设置hitArea属性：mc.hitArea = mc1;
遮罩本身可以做位移、缩放、旋转等动画，直接修改mc1的对应属性后调用stage.update()即可同步遮罩效果
遮罩区域以S1内部形状的填充路径为准，只要形状有填充属性（哪怕填充透明度为0）就能被识别为遮罩区域，无填充的描边路径不会生效

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