KineticJS canvas modifié par CamanJS

J'essaie d'appliquer le filtre CamanJS à un canevas créé avec KineticJS. Ça marche:

Caman("#creator canvas", function() { this.lomo().render(); }); 

Après avoir appliqué un filtre CamanJS, j'essaie de faire des sth avec une toile (par exemple, glisser et déplacer une couche ou simplement cliquer dessus), mais la toile revient à son état d'origine (avant d'appliquer le filtre CamanJS). La question est donc de savoir comment "dire" KineticJS de mettre à jour le cache (?) Ou faire en sorte que stage.draw () garde de nouvelles données de toile?

Voici jsfiddle (cliquez sur "appliquer le filtre", lorsque le traitement sera effectué, essayez de faire glisser l'étoile).

BTW: pourquoi le traitement est-il si lent?

Merci d'avance.

Comme vous l'avez découvert, Kinetic redessinera l'image originale lorsqu'elle redessinera en interne.

Votre contenu modifié de Caman n'est pas utilisé ou sauvegardé.

Pour garder votre effet Caman, vous pouvez créer un canevas hors écran et vous demander à votre image Kinetic.Image d'obtenir son image à partir de cette toile hors écran.

Ensuite, vous pouvez utiliser Caman pour filtrer cette toile.

Le résultat est que Kinetic fera ses redessinages internes avec votre image de toile modifiée Caman.

Demo: http://jsfiddle.net/m1erickson/L3ACd/

Exemple de code:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Prototype</title> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.3.0/caman.full.min.js"></script> <style> body{padding:20px;} #container{ border:solid 1px #ccc; margin-top: 10px; width:350px; height:350px; } </style> <script> $(function(){ var stage = new Kinetic.Stage({ container: 'container', width: 350, height: 350 }); var layer = new Kinetic.Layer(); stage.add(layer); // create an offscreen canvas var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); // load the star.png var img=new Image(); img.onload=start; img.crossOrigin="anonymous"; img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/star.png"; // when star.png is loaded... function start(){ // draw the star image to the offscreen canvas canvas.width=img.width; canvas.height=img.height; ctx.drawImage(img,0,0); // create a new Kinetic.Image // The image source is the offscreen canvas var image1 = new Kinetic.Image({ x:10, y:10, image:canvas, draggable: true }); layer.add(image1); layer.draw(); } // lomo the canvas // then redraw the kinetic.layer to display the lomo'ed canvas $("#myButton").click(function(){ Caman(canvas, function () { this.lomo().render(function(){ layer.draw(); }); }); }); }); // end $(function(){}); </script> </head> <body> <button id="myButton">Lomo the draggable Star</button> <div id="container"></div> </body> </html>