ericdrowell / KineticJS

KineticJS is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://www.kineticjs.com
3.98k stars 753 forks source link

Cached Image does not show border anymore #1041

Open confile opened 9 years ago

confile commented 9 years ago

I use KineticJS 5.1.0 and want to apply a filter on an Image. My image has a border. After applying cache and filter the border in gone.

Here is the code I use (http://jsfiddle.net/confile/qgrjjjq9/):

var imageObj = new Image();
      imageObj.onload = function() {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 600,
          height: 700
        });
        var layer = new Kinetic.Layer();
        img = new Kinetic.Image({
          x: 250,
          y: 200,
          image: imageObj,
          draggable: true
        });
        img.clearCache();
        img.setOffsetX(img.getWidth() / 2); 
          img.setOffsetY(img.getHeight() / 2); 
        img.stroke("green");  
        img.strokeWidth(4);
        img.strokeScaleEnabled(false);  
        img.strokeEnabled(true);  

        layer.add(img);
        stage.add(layer);

        img.cache({
            x: -(img.getWidth() / 2),
            y: -(img.getHeight() / 2),
            drawBorder: true
          });
        img.filters([Kinetic.Filters.Invert]);
        layer.draw();

          console.log("type: "+img.getType());  
      };
       imageObj.crossOrigin = "anonymous";
      imageObj.src =
  "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";      

Here is the image before the caching:

edit_fiddle_-_jsfiddle

And the image after caching and filter:

edit_fiddle_-_jsfiddle