1

我有一个 html5 画布，您可以在其中擦除图像顶部的模糊。我想用另一个图像替换模糊。我希望最终结果是，一旦您擦除顶部图像，底部图像将出现在其下方。我一直在使用一个easeljs 演示作为模板。

http://www.createjs.com/#!/EaselJS/demos/alphamask

我觉得我需要编辑的是 html 页面脚本，但它可能比这更深。

（完整代码可以在这里查看）

HTML

<canvas id="testCanvas" width="960" height="400"></canvas>

JavaScript

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() {
    if (window.top != window) {
        document.getElementById("header").style.display = "none";
    }

    document.getElementById("loader").className = "loader";

    image = new Image();
    image.onload = handleComplete;
    image.src = "images/summer.jpg";

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

function handleComplete() {
    document.getElementById("loader").className = "";
    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.BoxBlurFilter(15,15,2)];
    blur.cache(0,0,960,400);
    blur.alpha = .5;

    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,20));
    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.15)")
                .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(0, 0, image.width, image.height);
    } 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();
}
4

2 回答 2

1

如果您只是想替换模糊图像，则必须更改以下部分：

在加载第一张图片后添加：

image.src = "images/summer.jpg";
// add new part
image2 = new Image();
image2.onload = handleComplete;
image2.src = "images/your_newImage.jpg";

在handleComplete()你现在等待加载 2 个图像，所以你添加这个：

function handleComplete() {
    loaded++; // and initialize this variable in the very top with: var loaded = 0;
    if ( window.loaded < 2 ) return;
    //... other stull

最后你改变以下几行：

// old
blur = new createjs.Bitmap(image);
blur.filters = [new createjs.BoxBlurFilter(15,15,2)];
blur.cache(0,0,960,400);
blur.alpha = .5;

// new
blur = new createjs.Bitmap(image2);

现在应该用您想要的图像替换模糊的图像，这不是最好的方法，但它应该可以让您到达那里。如果您打算做更多“更深入”的事情，我建议您从一些教程开始；）

于 2013-09-05T19:30:23.307 回答
1

一种常见的，虽然有点笨拙的方法是快速重新调整画布的大小。所以改变你的<canvas>元素width和height属性。这将擦除画布中的所有内容。

完成后，立即将其重置为您想要的状态，然后重新绘制底部图像。

正如我所说，这种方法有点粗略，但确实可以完成工作。

于 2013-09-05T19:04:58.853 回答