在晒太阳后面的CreateJS掩盖图像

Question

所以我有一个包含多个元素的画布。我想将图像蒙版应用于图像，因此它只显示该图像的一部分。我的问题是，我需要做的是相对于舞台定位蒙版，但只显示该蒙版后面的图像部分。我需要这样做的原因是我将操纵图像（旋转，缩放，倾斜等...）。很难解释，如果您需要更多详细信息，请告诉我。我在下面给出了一些图片来帮助解释。

因此，从下面的图片可以看出，我需要将面具留在同一个地方，但只显示圆圈中的内容。因此，当我移动和操纵图像时，我需要将遮罩保持在同一位置，但显示图像的后面部分。

Answer 1

您应该能够创建一个容器，其中包含：

1. 作为第一个子项的Bitmap，具有图像
2. 黑色叠加形状​​作为第二个孩子
3. 具有相同图像的第二个位图
4. 一个蒙版形状，应用于Shape

蒙版形状可以相对于位图/形状移动，然后可以整体转换容器。

下面的代码显示了基本方法 - 但是example here有一些额外的天赋可以让它看起来和做你想要的，以及一些显示正在发生的事情的评论。

var c = new createjs.Container().set();
var b = new createjs.Bitmap(image);
var o = new createjs.Shape(new createjs.Graphics().f("#000").dr(0,0,imageWidth,imageHeight));
var b2 = new createjs.Bitmap(image);
var m = new createjs.Shape(new createjs.Graphics().dc(0,0,50));
b2.mask = m;

c.addChild(b, o, b2);
stage.addChild(c);

干杯。