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;

干杯

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

1 个答案: