如何在Konva中正确设置滤镜？

Question

我有一个获取十六进制颜色并返回以下格式的对象的函数：

{
  brightness: "88%"
  contrast: "94%"
  hue: "165deg"
  invert: "42%"
  saturate: "2371%"
  sepia: "12%"
}

我试过了，但是颜色不对。

<Image
  ref={imgRef}
  x={props.x}
  y={props.y}
  width={props.width}
  height={props.height}
  image={image}
  draggable={false}
  filters={[Konva.Filters.Blur, Konva.Filters.HSL, Konva.Filters.Invert, Konva.Filters.Sepia, Konva.Filters.Brighten, Konva.Filters.Contrast]}
  invert={0.42}
  sepia={0.12}
  saturate={23.71}
  hue={165}
  brightness={0.88}
  contrast={0.94}
/>

属性集始终是相同的。应该做哪些更改才能正常工作？

Answer 1

Konva js逐个应用过滤器。因此滤波器的order和它的值是非常重要的。

假设您有三个滤波器倒置、深褐色、饱和度

当您像这样应用所有三个过滤器时：invert, sepia, saturate，当您像这样应用所有三个过滤器时：invert, saturate, sepia

这两个图像的结果将以不同的效果显示。

因此，您必须遵循正确顺序来应用每个过滤器。