Question

我在使用某些功能时遇到了一些困难。我正在尝试使用easelJS创建橡皮擦并擦除图像的某些部分。我已经看到其他人这样做，但只删除了其他图形 - 当我尝试擦除图像时，我无法获得任何工作。如果我想删除位图而不是其他图形，那可能吗？

我也尝试使用AlphaMaskFilter，但是它给了我与我正在寻找的完全相反的东西（它掩盖了所有东西，只揭示了我画的东西）。

var c = createjs, stage, art;
var x, y, listener, color, hue=0;

stage = new c.Stage("test");
var testImg = new c.Bitmap("http://lorempixel.com/output/animals-q-c-640-480-5.jpg");

art = stage.addChild(testImg, new c.Shape());
art.cache(0,0,600,400);

stage.on("stagemousedown", startDraw, this);

function startDraw(evt) {
    listener = stage.on("stagemousemove", draw, this);
    stage.on("stagemouseup", endDraw, this);
    color = c.Graphics.getHSL(hue+=85, 50, 50);
    x = evt.stageX-0.001; // offset so we draw an initial dot
    y = evt.stageY-0.001;
    draw(evt); // draw the initial dot
}

function draw(evt) {
    art.graphics.ss(20,1).s(color).mt(x,y).lt(evt.stageX, evt.stageY);

    // the composite operation is the secret sauce.
    // we'll either draw or erase what the user drew.
    art.updateCache(erase.checked ? "destination-out" : "source-over");

    art.graphics.clear();
    x = evt.stageX;
    y = evt.stageY;
    stage.update();
}

function endDraw(evt) {
    stage.off("stagemousemove", listener);
    evt.remove();
}

http://jsfiddle.net/17xec9y5/8/

Answer 1

您的示例仅影响已缓存的Shape实例。当您在addChild()中使用多个参数时，它会返回最后添加的项目，因此在您的示例中，art变量仅引用该形状。因此，图像位于＆＃34;绘制区域的下方＆＃34;你正在吸引。

要解决此问题，请改为创建和缓存容器。一些小的补充：

加载图像后，更新缓存一次（以应用图像）。
然后删除图像，以便每次在绘图时更新缓存时都不再应用它。

那就是它！

这是一个小提琴： http://jsfiddle.net/lannymcnie/17xec9y5/9/

相关守则：

// Listen for the image load
testImg.image.onload = function() {
    cont.updateCache("source-over"); // Update cache once
    cont.removeChild(testImg); // Remove image

    stage.update(); // Draw the stage to see the image
}

// Create a sub-container that will hold the art and image 
var cont = stage.addChild(new c.Container());
art = new c.Shape(); // Art is just the shape
cont.cache(0,0,600,400); // Cache the container instead
cont.addChild(testImg, art);

// Then, later update the container's cache (instead of the art)
cont.updateCache(erase.checked ? "destination-out" : "source-over");

使用目标输出合成擦除EaselJS中位图的一部分

1 个答案: