KineticJS：应用过滤器后，图像没有笔划

Question

使用KineticJS 5.1.0

我有一个中风的KineticJS图像。对于这个图像，我想应用一个过滤器。在缓存并应用过滤器之后，笔划就消失了。

Here is a JSFiddle和我的演示代码：

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
        });
        var strokeWidthValue = 10;
        img.setOffsetX(img.getWidth() / 2); 
        img.setOffsetY(img.getHeight() / 2); 
        img.stroke("green");  
        img.strokeWidth(strokeWidthValue);
        img.strokeScaleEnabled(false);  
        img.strokeEnabled(true);  

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

        img.cache();
        img.filters([Kinetic.Filters.Invert]);
        layer.draw();
      };
       imageObj.crossOrigin = "anonymous";
      imageObj.src =
  "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";

以下是我应用过滤器之前的图像：

在我应用过滤器之后：

如何在应用过滤器后恢复笔划？

编辑：我还试图为边框添加额外的空间，但结果显示一个粉红色的边框，我的那个应该是绿色的。这是我尝试的缓存功能：

    img.cache({
        x: -(img.getWidth() / 2) - strokeWidthValue,
        y: -(img.getHeight() / 2) - strokeWidthValue,
        width: img.getWidth() + (strokeWidthValue * 2),
        height: img.getHeight() + (strokeWidthValue * 2)
    });

结果如下：

完整示例可在this JSFiddle中找到。

Answer 1

http://jsfiddle.net/truefusion/o73ur6pf/8/

当我们创建缓存并对图像应用过滤器时，我们可以从Kinetic.Image._cache.canvas.filter访问结果。然后，我们可以通过在过滤器画布上调用toDataURL()将结果转换为数据URI。为了避免在清除图像缓存时出现问题，我们创建了一个新的图像元素，并将数据URI分配给其src属性。然后我们使用img.setImage()将新图像设置为动态图像对象。

var image = new Image()
,   data  = img._cache.canvas.filter.toDataURL()
;

image.src = data;
img.setImage(image);

然后，您可以安全地清除缓存，传递null以卸载回调，并获得乐趣！

您必须考虑笔划的大小。换句话说，在img.cache（）属性中，从X和Y中减去strokeWidth，并将（strokeWidth * 2）添加到宽度和高度。