如何在 Konva 中正确设置过滤器？

问题描述

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

{
  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}
/>

属性集始终相同。应该改变什么才能正常工作？

解决方法

Konva js 一一应用过滤器。因此，过滤器的 order 及其价值非常重要。

假设您有三个滤镜 [反转、棕褐色、饱和]

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

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

所以你必须按照正确的顺序应用每个过滤器。