javascript - CreateJS 在 bask 后面屏蔽图像

Question

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

因此，正如您从下图中看到的那样，我需要 mask 保持在同一个位置，但只显示圆圈中的内容。因此，当我移动和操纵图像时，我需要 mask 保持在同一个位置，但显示它后面的图像部分。

Answer 1

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

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

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

下面的代码显示了基本方法 - 但是 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);

干杯。