javascript - 如何在 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, sepia, saturate 并且当您像这样应用所有三个过滤器时： invert, saturate, sepia

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

因此，您必须按照正确的顺序应用每个过滤器。