javascript - 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 访问结果。然后，我们可以通过在过滤器 Canvas 上调用 toDataURL() 将结果转换为数据 URI。为了避免清除图像缓存时出现问题，我们创建一个新的图像元素并将其数据 URI 分配给其 src 属性。然后我们使用 img.setImage() 将新图像设置为 Kinetic 图像对象。

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

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

然后您可以安全地清除缓存，将 null 传递给卸载回调，然后玩得开心!

您必须考虑笔画的大小。换句话说，在 img.cache() 属性中，从 X 和 Y 中减去描边宽度，然后将宽度和高度加上 (描边宽度 * 2)。