使用目标输出合成在EaselJS中擦除位图的某些部分 [英] Erasing parts of a bitmap in EaselJS using destination-out compositing

问题描述

要使用某些功能时，我有些困难。我正在尝试创建一个橡皮擦，并使用easylJS擦除图像的某些部分。我见过其他人这样做，但是只能删除其他图形-当我尝试删除图像时，我什么也做不了。如果我想删除位图而不是其他图形，那可能吗？

I'm having a bit of difficulty getting some functionality to work. I'm trying to create an eraser and erase parts of an image using easelJS. I've seen other people do this, but only erasing other graphics - and when I try to erase an image, I can't get anything to work. If I wanted to erase a bitmap instead of other graphics, is that possible?

我也尝试使用AlphaMaskFilter，但这给了我与我所寻找的完全相反的东西（它掩盖了所有内容，只显示了我绘制的内容）。

I also tried to use the AlphaMaskFilter, but it's giving me the exact opposite of what I'm looking for (it's masking everything, and only revealing what I paint).

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/

推荐答案

您的该示例仅影响已缓存的Shape实例。当您在 addChild（）中使用多个参数时，它将返回最后添加的项目，因此在您的示例中， art 变量仅引用形状。因此，图像位于您要绘制到的绘制区域的下方。

Your example is only affecting the Shape instance that you have cached. When you use multiple arguments in addChild(), it returns the last added item, so in your sample, the art variable just references the shape. So the image is just below the "painted area" that you are drawing to.

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

To fix this, create and cache a container instead. A few minor additions:

1. 加载图像后，一次更新缓存（以应用图像）。


2. 然后删除图像，以便在每次绘图时更新缓存时不再应用该图像。

就是这样！

这里是一个小提琴：
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中擦除位图的某些部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！