javascript - KonvaJS 过滤器值的等价物

Question

我正在尝试在https://www.cssfilters.co/上找到与 CSS 过滤器等效的 KonvaJS 过滤器值

例如，如何使用 KonvaJS 应用“1977”过滤器。我尝试了很多选择，但每次都得到不同的结果。是否可以为棕褐色或灰度提供值？

我正在使用这样的过滤器（具有不同的值）：

backgroundImage.filters([
    Konva.Filters.Contrast,
    Konva.Filters.Brighten,
    Konva.Filters.HSV
    ]);

backgroundImage.contrast(10);
backgroundImage.brightness(0.10);
backgroundImage.saturation(7.8);           
backgroundImage.hue(0);
backgroundImage.value(0);

Answer 1

我刚刚做了这个属性组合，它的工作原理非常接近：

  image.filters([
    Konva.Filters.Contrast,
    Konva.Filters.Brighten,
    Konva.Filters.HSV
    ]);

  image.contrast(10);
  image.brightness(0.1);
  image.saturation(1.1);           
  image.hue(0);
  image.value(0);


  const overlay = new Konva.Rect({
    width: image.width() * image.scaleX(),
    height: image.height() * image.scaleY(),
    fill: 'rgba(243, 106, 188, 0.3)',
    globalCompositeOperation: 'screen'
  });
  layer.add(overlay);
  layer.draw();

演示：https ://jsbin.com/cuyikeduza/2/edit?html,js,output

如果您很难调整 Konva 过滤器并且编写自己的过滤器是有意义的。