javascript - EaselJS Alpha蒙版滤镜

我是Canvas的新手。在这个EaselJS Alpha Mask示例中，我一直在尝试使图像反转，以便使初始图像清晰，并且绘制的图像模糊；基本上是演示的相反过程。

我已经玩了好几个小时，将过滤器应用于bitmap变量，并将其从blur变量中删除。我所做的一切都无法正常工作。似乎只需切换一下内容就可以轻松解决，但事实并非如此。反正不适合我。

有没有人举这个例子，或者知道该怎么办？我可以提供我所做的代码示例，但基本上，它只是在玩打字机上的猴子之类的东西。

Here's the code on Github

这是他们示例中的相关代码。

<script id="editable">
    var stage;
    var isDrawing;
    var drawingCanvas;
    var oldPt;
    var oldMidPt;
    var displayCanvas;
    var image;
    var bitmap;
    var maskFilter;
    var cursor;
    var text;
    var blur;

    function init() {
        examples.showDistractor();

        image = new Image();
        image.onload = handleComplete;
        image.src = "../_assets/art/flowers.jpg";

        stage = new createjs.Stage("testCanvas");
        //text = new createjs.Text("Loading...", "20px Arial", "#FFF");
        //text.set({x: stage.canvas.width / 2, y: stage.canvas.height - 40});
        //text.textAlign = "center";
    }

    function handleComplete() {
        examples.hideDistractor();
        createjs.Touch.enable(stage);
        stage.enableMouseOver();

        stage.addEventListener("stagemousedown", handleMouseDown);
        stage.addEventListener("stagemouseup", handleMouseUp);
        stage.addEventListener("stagemousemove", handleMouseMove);
        drawingCanvas = new createjs.Shape();
        bitmap = new createjs.Bitmap(image);

        blur = new createjs.Bitmap(image);
        blur.filters = [new createjs.BlurFilter(24, 24, 2), new createjs.ColorMatrixFilter(new createjs.ColorMatrix(60))];
        blur.cache(0, 0, 960, 400);

        //text.text = "Click and Drag to Reveal the Image.";

        stage.addChild(blur, text, bitmap);
        updateCacheImage(false);

        cursor = new createjs.Shape(new createjs.Graphics().beginFill("#FFFFFF").drawCircle(0, 0, 25));
        cursor.cursor = "pointer";

        stage.addChild(cursor);
    }

    function handleMouseDown(event) {
        oldPt = new createjs.Point(stage.mouseX, stage.mouseY);
        oldMidPt = oldPt;
        isDrawing = true;
    }

    function handleMouseMove(event) {
        cursor.x = stage.mouseX;
        cursor.y = stage.mouseY;

        if (!isDrawing) {
            stage.update();
            return;
        }

        var midPoint = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1);

        drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
                .beginStroke("rgba(0,0,0,0.2)")
                .moveTo(midPoint.x, midPoint.y)
                .curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y);

        oldPt.x = stage.mouseX;
        oldPt.y = stage.mouseY;

        oldMidPt.x = midPoint.x;
        oldMidPt.y = midPoint.y;

        updateCacheImage(true);
    }

    function handleMouseUp(event) {
        updateCacheImage(true);
        isDrawing = false;
    }

    function updateCacheImage(update) {
        if (update) {
            drawingCanvas.updateCache();
        } else {
            drawingCanvas.cache(0, 0, image.width, image.height);
        }

        maskFilter = new createjs.AlphaMaskFilter(drawingCanvas.cacheCanvas);

        bitmap.filters = [maskFilter];
        if (update) {
            bitmap.updateCache(0, 0, image.width, image.height);
        } else {
            bitmap.cache(0, 0, image.width, image.height);
        }

        stage.update();
    }
</script>

最佳答案

有几个步骤可以做到这一点。其中大多数您可能已经完成:

1)更改添加项目到阶段的顺序。由于要改为显示模糊，因此以相反的顺序添加它们。这将模糊放在首位。

stage.addChild(bitmap, text, blur);

2)更改updateCacheImage方法中缓存或更新的内容:

if (update) {
    blur.updateCache(0, 0, image.width, image.height);
} else {
    blur.cache(0, 0, image.width, image.height);
}

这可能是您绊倒的地方。如果您将blurImage上的过滤器仅设置为maskFilter，它将似乎无法使用。 maskFilter可以正常工作，但是将删除已应用的模糊和彩色滤镜。要给添加masktFilter的，您必须将其与当前过滤器一起放入数组。这是我的方法，可确保原始的2个过滤器完好无损，并且maskFilter仅添加一次:

blur.filters.length = 2; // Truncate the array to 2
blur.filters.push(maskFilter); // add the new filter

在我看来，这种效果并不明显-因此您可能要增加笔刷的不透明度:

drawingCanvas.graphics.setStrokeStyle(40, "round", "round")
    .beginStroke("rgba(0,0,0,0.5)"); // From 0.2

我是EaselJS中原始AlphaMaskFilter演示的作者-很高兴您发现它有用和/或有趣!