Effacement de parties d’un bitmap dans EaselJS à l’aide de la composition en sortie-destination - easeljs

J'ai un peu de mal à en obtenirfonctionnalité pour travailler. J'essaie de créer une gomme et d'effacer des parties d'une image en utilisant easelJS. J'ai vu d'autres personnes faire cela, mais seulement effacer d'autres graphiques - et quand j'essaie d'effacer une image, je ne peux rien faire fonctionner. Si je voulais effacer un bitmap au lieu d'autres graphiques, est-ce possible?

J'ai également essayé d'utiliser l'AlphaMaskFilter, mais cela me donne exactement le contraire de ce que je recherche (il masque tout, et ne révèle que ce que je peins).

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/

Réponses:

Votre exemple affecte uniquement l'instance de forme que vous avez mise en cache. Lorsque vous utilisez plusieurs arguments dans addChild(), il renvoie le dernier élément ajouté, donc dans votre échantillon, le art fait simplement référence à la forme. L'image est donc juste en dessous de la "zone peinte" vers laquelle vous dessinez.

Pour résoudre ce problème, créez et mettez en cache un conteneur à la place. Quelques ajouts mineurs:

1. Une fois l'image chargée, mettez à jour le cache une fois (pour appliquer l'image).
2. Supprimez ensuite l'image afin qu'elle ne soit plus appliquée à chaque mise à jour du cache lors du dessin.

C'est tout!

Voici un violon: http://jsfiddle.net/lannymcnie/17xec9y5/9/

Code pertinent:

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