为什么蒙版图像被蒙版的颜色覆盖？

Question

我正在使用createJS来掩盖图片，并且掩码将由用户绘制。

由于在用户拖动时会更新蒙版，因此我使用带有图像缓存的mouseAlphaMaskFilter来实现蒙版效果。不幸的是，它导致了意想不到的方式图片由笔触颜色覆盖，图片仅在笔触颜色为半透明时可见。

Here is the on going testing（请在画布中拖动以查看其结果）

var stage = new createjs.Stage("canvas");

var shape, bmp, oldX, oldY, size, color;
var stageWidth = 550;
var stageHeight = 400;

mycolor = createjs.Graphics.getRGB(255, 255, 255, .5);

shape = new createjs.Shape();
bmp = new createjs.Bitmap("https://ocdn.eu/pulscms-transforms/1/dZtktkqTURBXy8xNTI0OTU1NWRlNDMyZDNiMjcwZDY2YjVlODJjNDRiNC5qcGVnkZUCzQMWAMLD");
shape.cache(0,0,550,400);
bmp.filters = [new createjs.AlphaMaskFilter(shape.cacheCanvas)];
bmp.cache(0,0,550,400);

stage.on("stagemousemove", function (evt) {
    if (oldX) {
        shape.graphics.beginStroke(color)
        .setStrokeStyle(size, "round")
        .moveTo(oldX, oldY)
        .lineTo(evt.stageX, evt.stageY);
    }
    oldX = evt.stageX;
    oldY = evt.stageY;
    shape.updateCache();
    bmp.updateCache();
    stage.update();
})

stage.on("stagemouseup", function (event) {
    color = mycolor;
});

stage.on("stagemousedown", function (event) {
    color = mycolor;
    size = 20;
});

stage.on("stagemouseup", function (event) {
    color = "";
});

stage.addChild(bmp);
stage.addChild(shape);
stage.update();

Expected result as an usual mask by createJS（但这种方法bmp.mask = shape仅在面具不变时才有效。）

对不起我上面的错误解释。如果有任何帮助可以引导我走向正确的方向，我们将不胜感激。

Answer 1

不需要缓存形状掩码。只使用一个形状作为蒙版就可以完成同样的事情。这意味着您不需要缓存位图。此外，不应将面罩添加到舞台上。

如果您要应用各种级别的不透明度，AlphaMaskFilter会更好。

这是您的codepen的超简单版本：https://codepen.io/lannymcnie/pen/drEBvw?editors=0010

var shape = new createjs.Shape();
shape.graphics.drawCircle(200,200,100);
bmp.mask = shape;

干杯，