createjs 在面具中组合 2 个形状

Question

我有一个具有两种形状的符号 S1（比如说 sh0 和 sh1）。在舞台上，我有另一个符号 mc 的实例。在运行时，我将创建一个符号 S1 的实例 mc1。使用createjs，如何使用mc1作为mc的掩码？

Answer 1

我假设当您说“符号”时，您指的是 Adobe Animate 中的图形或 MovieClip。不幸的是，您只能使用 CreateJS“Shape”as a mask directly。有几个选项：

自己把形状组合成一个。
合并指令。这有点脏，但理论上你可以将图形指令从一种形状连接到另一种形状。我怀疑如果 Shape 实例有不同的 x/y 位置，这会有问题。

symbol.shape1.graphics._instructions.concat(symbol.shape2.graphics._instructions);

缓存符号，将其用作 AlphaMaskFilter 的掩码。文档中的示例应该可以满足您的需求。

 var box = yourSymbol;
 box.cache(0, 0, 100, 100);

 var bmp = new createjs.Bitmap("path/to/image.jpg");
 bmp.filters = [
     new createjs.AlphaMaskFilter(box.cacheCanvas)
 ];
 bmp.cache(0, 0, 100, 100);

第三个可能是您的最佳选择，但它有局限性，并且由于使用过滤器可能会占用大量性能（尤其是当内容发生变化并且您必须不断更新时）。

随时 post 关于您正在使用的内容的更多详细信息，以获得更好的推荐。

干杯。

createjs 在面具中组合 2 个形状

createjs combine 2 shapes in a mask

masking