EaselJS Alpha蒙版过滤器 [英] EaselJS Alpha Mask Filter

问题描述

我是Canvas的新手。我一直在尝试在此 EaselJS Alpha Mask 示例中颠倒图片，以使初始图片清晰，和你油漆是模糊的;基本上是演示的相反。

I'm fairly new to Canvas. I've been trying to get the images reversed in this EaselJS Alpha Mask example so that the initial image is clear, and what you paint is blurry; basically, the reverse of the demo.

我已经玩了几个小时，对位图应用过滤器 var，并从 blur var中删除它们。我做的一切只是不工作。似乎这将是一个简单的解决方案，只是切换的东西，但似乎不是这样的。

I've been playing around with it for hours, applying filters to the bitmap var and removing them from the blur var. Everything I do just doesn't work. Seems like it would be an easy fix of just switching things around but that doesn't seem to be the case. Not for me anyway.

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

Does anybody have an example of this, or know what to do? I could provide code examples of what I did, but it's basically just playing around with stuff like a monkey on a typewriter.

这是Github上的代码

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

Here's the relevant code from their example.

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

推荐答案

他们中的大多数你可能已经做了：

There are a few steps to do this. Most of them you have probably already done:

1）更改添加项目到舞台的顺序。由于您想要显示模糊，请以相反的顺序添加它们。

1) Change the order you add the items to stage. Since you want to reveal the blur instead, add them in the reverse order. This puts the blur on top.

stage.addChild(bitmap, text, blur);

2）更改 updateCacheImage method：

2) Change what is cached or updateCached in the updateCacheImage method:

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

这是你可能会跳起来的地方。如果将 blurImage 上的过滤器设置为 maskFilter ，它将不会工作。 maskFilter工作，但将删除应用的模糊和颜色过滤器。要添加 maskFilter，您必须将其与当前过滤器一起放在数组中。这是我的方法，它确保原来的2个过滤器是完好无损的，并且maskFilter只是添加一次：

This is where you probably got tripped up. If you set the filters on the blurImage to just the maskFilter, it will not appear to work. The maskFilter IS working, but will have removed the blur and color filters that were applied. To add the maskFilter, you have to put it in the array with the current filters. This is my approach, which ensures the original 2 filters are intact, and the maskFilter is just added once:

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

在我看来，这种效果并不明显 - 想要增加画笔的不透明度：

In my opinion, this effect isn't as obvious - so you might want to increase the opacity of the brush:

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

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

I was the author of the original AlphaMaskFilter demo in EaselJS - glad you found it useful and/or interesting!

这篇关于EaselJS Alpha蒙版过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！