CreateJS 遮蔽图像背后的晒太阳

Question

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

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

Answer 1

你应该能够制作一个容器，它有：

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

蒙版形状可以相对于Bitmap/Shape移动，然后Container可以作为一个整体进行变换。

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

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);

干杯。