Borrado de partes de un mapa de bits en EaselJS utilizando composición de destino - easeljs

Tengo un poco de dificultad para conseguirFuncionalidad para trabajar. Estoy tratando de crear un borrador y borrar partes de una imagen usando easelJS. He visto a otras personas hacer esto, pero solo borrando otros gráficos, y cuando trato de borrar una imagen, no puedo hacer que nada funcione. Si quisiera borrar un mapa de bits en lugar de otros gráficos, ¿es eso posible?

También intenté usar AlphaMaskFilter, pero me da exactamente lo contrario de lo que estoy buscando (está enmascarando todo y solo revela lo que pinto).

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/

Respuestas

Su ejemplo solo afecta a la instancia de Shape que ha almacenado en caché. Cuando usas múltiples argumentos en addChild(), devuelve el último elemento agregado, por lo que en su muestra, el art La variable solo hace referencia a la forma. Entonces, la imagen está justo debajo del "área pintada" en la que está dibujando.

Para solucionar esto, cree y guarde en caché un contenedor. Algunas adiciones menores:

1. Una vez que se carga la imagen, actualice el caché una vez (para aplicar la imagen).
2. Luego, elimine la imagen para que ya no se aplique cada vez que actualice el caché mientras dibuja.

¡Eso es!

Aquí hay un violín: http://jsfiddle.net/lannymcnie/17xec9y5/9/

Código Relevante:

// 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");