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

【问题标题】：How to set filters properly in Konva?如何在 Konva 中正确设置过滤器？
【发布时间】：2021-03-24 07:19:35
【问题描述】：

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

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

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

【问题讨论】：

您好，欢迎来到stackoverflow。请在提问之前结帐How to create a Minimal, Reproducible Example。清楚地指出问题以及您尝试过的方法。

标签： javascript reactjs konvajs konva

【解决方案1】：

Konva js 一一应用过滤器。所以过滤器的order 和它的价值一样非常重要。

假设你有三个滤镜 [invert, sepia, saturate]

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

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

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

【讨论】：