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

Question

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

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

Answer 1

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

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

蒙版形状可以相对于位图/形状移动,然后可以将Container整体转换.

下面的代码显示了基本方法 - 但这里的示例 有一些额外的天赋,使它看起来和做你要问的,以及一些评论显示正在发生的事情.

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

干杯.