如何在 React 和 Konva 中应用画布滤镜？

要对 Konva 节点应用滤镜，您需要：

1. 使用 node.cache() 缓存节点
2. 使用 filters 属性应用滤镜
3. 在节点的属性更改时重新缓存节点

import React from 'react';
import Konva from 'konva';
import { Stage, Layer, Rect, Image } from 'react-konva';
import useImage from 'use-image';

// 图像滤镜的函数组件示例
const FilterImage = () => {
  const [image] = useImage('https://konvajs.org/assets/lion.png', 'anonymous');
  const imageRef = React.useRef();

  // 当图像加载时，我们需要缓存形状
  React.useEffect(() => {
    if (image) {
      // 需要在某些属性更改时（如阴影、描边等）重新应用缓存
      imageRef.current.cache();
    }
  }, [image]);

  return (
    <Image
      ref={imageRef}
      x={10}
      y={10}
      image={image}
      filters={[Konva.Filters.Blur]}
      blurRadius={10}
    />
  );
};

// 带有噪声滤镜的类组件示例
// 尝试单击矩形以查看颜色更新
const FilterRect = () => {
  const [color, setColor] = React.useState('green');
  const rectRef = React.useRef();

  React.useEffect(() => {
    if (rectRef.current) {
      rectRef.current.cache();
    }
  }, []);

  const handleClick = () => {
    setColor(Konva.Util.getRandomColor());
    // 更新形状时重新缓存
    rectRef.current.cache();
  };

  return (
    <Rect
      filters={[Konva.Filters.Noise]}
      noise={1}
      x={200}
      y={10}
      width={50}
      height={50}
      fill={color}
      shadowBlur={10}
      ref={rectRef}
      onClick={handleClick}
    />
  );
};

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <FilterImage />
        <FilterRect />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox