Wymazywanie części mapy bitowej w EaselJS przy użyciu kompozycji docelowej - sztalugi

Mam trochę trudności z uzyskaniemfunkcjonalność do pracy. Próbuję utworzyć gumkę i skasować części obrazu za pomocą sztalugi. Widziałem, jak inni to robią, ale tylko usuwają inną grafikę - a kiedy próbuję skasować obraz, nie mogę nic zrobić. Jeśli chciałbym usunąć bitmapę zamiast innej grafiki, czy to możliwe?

Próbowałem także użyć AlphaMaskFilter, ale daje mi to dokładnie odwrotność tego, czego szukam (maskuje wszystko i ujawnia tylko to, co maluję).

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/

Odpowiedzi:

Twój przykład wpływa tylko na instancję Shape, którą buforujesz. Gdy używasz wielu argumentów w addChild(), zwraca ostatni dodany element, więc w Twojej próbce jest to art zmienna tylko odwołuje się do kształtu. Obraz znajduje się tuż pod „malowanym obszarem”, do którego rysujesz.

Aby to naprawić, zamiast tego utwórz i buforuj kontener. Kilka drobnych dodatków:

1. Po załadowaniu obrazu zaktualizuj pamięć podręczną jeden raz (aby zastosować obraz).
2. Następnie usuń obraz, aby nie był już stosowany przy każdej aktualizacji pamięci podręcznej podczas rysowania.

To jest to!

Oto skrzypce: http://jsfiddle.net/lannymcnie/17xec9y5/9/

Odpowiedni kod:

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