Javascript EaselJSα掩模滤波器

我对帆布相当陌生。在本例中，我一直在尝试反转图像，以使初始图像清晰，而您绘制的内容模糊；基本上，与演示相反

我已经玩了好几个小时了，对

位图

变量应用过滤器，并将其从

模糊

变量中删除。我所做的一切都不起作用。这似乎是一个简单的解决办法，只是改变事情，但似乎不是这样。反正对我来说不是

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

下面是他们示例中的相关代码

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

var期；
var提取；
var绘图画布；
var-oldPt；
var oldMidPt；
var显示画布；
var图像；
var位图；
var maskFilter；
var光标；
var文本；
var模糊；
函数init（）{
示例：showdenstor（）；
图像=新图像（）；
image.onload=handleComplete；
image.src=“../\u assets/art/flowers.jpg”；
stage=newcreatejs.stage（“testCanvas”）；
//text=new createjs.text（“加载…”，“20px Arial”，“#FFF”）；
//set（{x:stage.canvas.width/2，y:stage.canvas.height-40}）；
//text.textAlign=“中心”；
}
函数handleComplete（）{
例如：hideDistractor（）；
createjs.Touch.enable（stage）；
stage.enableMouseOver（）；
stage.addEventListener（“stagemousedown”，handleMouseDown）；
stage.addEventListener（“stagemouseup”，handleMouseUp）；
stage.addEventListener（“stagemousemove”，handleMouseMove）；
drawingCanvas=new createjs.Shape（）；
位图=新建createjs.bitmap（图像）；
blur=新建createjs.Bitmap（图像）；
blur.filters=[new createjs.BlurFilter（24,24,2），new createjs.ColorMatrix过滤器（new createjs.ColorMatrix（60））]；
缓存（0,0960400）；
//text.text=“单击并拖动以显示图像。”；
stage.addChild（模糊、文本、位图）；
updateCacheImage（假）；
cursor=new createjs.Shape（new createjs.Graphics（）.beginll（#FFFFFF”）.drawCircle（0,0,25））；
cursor.cursor=“pointer”；
stage.addChild（游标）；
}
功能handleMouseDown（事件）{
oldPt=newcreatejs.Point（stage.mouseX，stage.mouseY）；
oldMidPt=oldPt；
isDrawing=true；
}
功能handleMouseMove（事件）{
cursor.x=stage.mouseX；
cursor.y=stage.mouseY；
如果（！isDrawing）{
stage.update（）；
返回；
}
var midPoint=new createjs.Point（oldPt.x+stage.mouseX>>1，oldPt.y+stage.mouseY>>1）；
绘图画布.图形.设置行程样式（40，“圆形”，“圆形”）
.beginStroke（“rgba（0,0,0,0.2）”）
.moveTo（中点.x，中点.y）
.curveTo（oldPt.x，oldPt.y，oldMidPt.x，oldMidPt.y）；
oldPt.x=stage.mouseX；
oldPt.y=stage.mouseY；
oldMidPt.x=中点.x；
oldMidPt.y=中点.y；
updateCacheImage（真）；
}
功能handleMouseUp（事件）{
updateCacheImage（真）；
isDrawing=false；
}
函数updateCacheImage（更新）{
如果（更新）{
drawingCanvas.updateCache（）；
}否则{
drawingCanvas.cache（0，0，image.width，image.height）；
}
maskFilter=newcreatejs.AlphaMaskFilter（drawingCanvas.cacheCanvas）；
bitmap.filters=[maskFilter]；
如果（更新）{
updateCache（0，0，image.width，image.height）；
}否则{
缓存（0，0，image.width，image.height）；
}
stage.update（）；
}

使用画布2D上下文API的纯Javascript方式

您需要创建画布、加载图像、创建遮罩图像和模糊图像。我已经模糊了图像，因为我不想写模糊

对象

imageTools

中的以下函数创建画布/图像，并加载图像。请注意，画布和图像是可互换的。画布没有src，并且不能在appart上绘制图像，因为它们是相同的。我将所有图像转换为画布，并将上下文附加到它们。我也叫它们图像

/** ImageTools.js begin **/
var imageTools = (function () {
    var tools = {
        canvas : function (width, height) {  // create a blank image (canvas)
            var c = document.createElement("canvas");
            c.width = width;
            c.height = height;
            return c;
        },
        createImage : function (width, height) {
            var image = this.canvas(width, height);
            image.ctx = image.getContext("2d");
            return image;
        },
        loadImage : function (url, callback) {
            var image = new Image();
            image.src = url;
            image.addEventListener('load', callback);
            image.addEventListener('error', callback);
            return image;
        }
    };
    return tools;
})();

然后我使用

imageTools

加载我需要的图像并创建一个遮罩，当我将遮罩分辨率与图像分辨率匹配时，我有了图像大小

// load the images and create the mask
var imageLoadedCount = 0;
var error = false;
var maskImage;
var flowerImage = imageTools.loadImage("http://www.createjs.com/demos/_assets/art/flowers.jpg", function (event) {
    if (event.type === "load") {
        imageLoadedCount += 1;
    } else {
        error = true;
    }
});
var flowerImageBlur = imageTools.loadImage("http://i.stack.imgur.com/3S5m8.jpg", function () {
    if (event.type === "load") {
        maskImage = imageTools.createImage(this.width, this.height);
        imageLoadedCount += 1;
    } else {
        error = true;
    }
});

我使用

requestAnimationFrame

创建一个60FPS的画布绘制函数，等待图像加载，然后在画布上显示3个层

   // ctx is the main canvas context.
   // drawImageCentered scales the image to fit. See Demo for code.

   // draw the unblured image that will appear at the top
   ctx.globalCompositeOperation = "source-over";
   drawImageCentered(ctx, flowerImage, cw, ch);
   drawText(ctx, "Click drag to blur the image via mask", 40 + Math.sin(time / 100), cw, ch - 30, "White");

   // Mask out the parts when the mask image has pixels
   ctx.globalCompositeOperation = "destination-out";
   drawImageCentered(ctx, maskImage, cw, ch);

   // draw the blured image only where the destination has been masked
   ctx.globalCompositeOperation = "destination-atop";
   drawImageCentered(ctx, flowerImageBlur, cw, ch);

它首先绘制没有可见遮罩像素时显示的图像。然后画一些文字作为说明

接下来是使用

目标输出的掩码。这意味着对于遮罩中alpha>0的像素，从目标移除该alpha量。因此，如果遮罩像素的alpha值为50，而目标（画布）的alpha值为255，则在使用
destination out
渲染遮罩后，该像素的结果将为
255-50=205
。这有效地在画布上的遮罩上有像素的地方打上了洞

现在，我们可以用模糊图像填充孔洞，并使用
destination top
进行渲染，这意味着仅从源（模糊图像）绘制像素，其中目标alpha小于255

这就是分层掩模，我们只需要在掩模上画图。为此，我们只需聆听鼠标事件，如果按钮向下，则在鼠标所在的遮罩上画一个圆圈。我的示例缩放了图像，因此有一些额外的工作，但基本内容如下：

// draws circle with gradient
function drawCircle(ctx, x, y, r) {
    var gr = ctx.createRadialGradient(x, y, 0, x, y, r)
        gr.addColorStop(1, "rgba(0,0,0,0)")
        gr.addColorStop(0.5, "rgba(0,0,0,0.08)")
        gr.addColorStop(0, "rgba(0,0,0,0.1)")
        ctx.fillStyle = gr;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();
}
// draw a circle on the mask where the mouse is.
drawCircle(maskImage.ctx, mouse.x, mouse.y, 20);

对于演示，还有一些代码可以让它很好地工作，但您可以选择所需的位

<
stage.addChild(bitmap, text, blur);

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

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