CreateJS 遮蔽图像背后的晒太阳

Posted 2023-03-05

【中文标题】CreateJS 遮蔽图像背后的晒太阳

【英文标题】：CreateJS masking images behind the bask

【发布时间】：2015-01-11 16:06:08

【问题描述】：

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

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

【参考方案1】：

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

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

蒙版形状可以相对于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);

干杯。

【讨论】：

谢谢，在您发布答案之前，我实际上已经解决了这个问题，但我基本上和您提到的一样。将图像添加到容器中，然后屏蔽容器。感谢您的回答！

只是快速跟进——Chrome 没有抗锯齿遮罩，但您可以通过在“视口”上使用位图填充（使用矩阵转换）而不是制作使用蒙版的视口。我将这个概念更进一步，并构建了一个小放大镜演示：lab.gskinner.com/magnifier